Mit Highmaps mit React

Question

Gebäude mit React ... Der Versuch, außerhalb Methode auf die Schaltfläche aufgerufen verwenden klicken

Versuch mappoints unsichtbar zu setzen. Ich habe unter Verwendung versucht: .Hide() .setVisible und unter Verwendung von .Update() ‚sichtbar‘ zu falschen

ich in der Lage zu setzen bin das Diagramm und die mappoint mit der Definition enthielt im Paket Abschlag zu verweisen:

 let chart = this.refs.chart.getChart(); 

und in meiner render:

 <ReactHighmaps config={config} ref="chart" /> 

Versuchte:

1. chart.series[2].event.update({visible: false}) >> Error: Highchart.js:27 Uncaught TypeError: Cannot read property 'update' of undefined
2. chart.plotOptions.mappoint.events.hide() >> TypeError: Cannot read property 'mappoint' of undefined
3. chart.series[2].setVisible(false, true) >> No Error in Console but nothing happens
4. chart.series[2].hide() >> No Error in Console but nothing happens And a few other variations.
5. ReactHighmaps.Highcharts.hide(chart.series[0]) >> Error that this isn't a function

viel für mich da los ist, eine JSbin zu machen ...

Testing in Chrome

Wenn ich die console.log des mappoints bin Inspektion mich, dass die Methode .setVisible() Projekt sehen Weg: .proto.proto.proto.setVisible

Diagrammkonfiguration (Optionen):

 const config = { 
     title: { 
      text: 'ZCTA with Metric Data' 
     }, 

     chart: { 
      height: '600 px', 
      borderWidth: 1, 
      borderColor: 'silver', 
      borderRadius: 3, 
      shadow: true 
     }, 
     mapNavigation: { 
      enabled: true 
     }, 
     tooltip: { 
      enabled: false 
     }, 
     plotOptions: { 
      map: { 
       showInLegend: false 
      }, 
      mappoint: { 
       showInLegend: false, 


      }, 
      mapline: { 
       enabledMouseTracking: false, 
       showInLegend: false 

      } 
     }, 
     series: [{ 
      mapData: MapData, 
      name: 'test', 
      data: County, 
      joinBy: ['fips', 'code'], 
      animation: true, 
      tooltip: { 
       pointFormat: '<b>{point.name}</b>' 
      }, 
      borderColor: 'black', 
      borderWidth: 0.2, 
      states: { 
       hover: { 
        borderWidth: 0.5 
       }, 
       select: { 
        color: 'yellow' 
       } 
      }, 
      allowPointSelect: true, 
      cursor: 'pointer' 
     }, 
     { 
      type: 'mapline', 
      name: 'State borders', 
      data: lines, 
      color: 'black', 
      states: { 
       hover: { 
        borderWidth: 0.5 
       } 
      }, 
      allowPointSelect: false 
     }, 

     { 
      type: 'mappoint', 
      name: 'zcta', 
      color: Highcharts.getOptions().colors[1], 
      data: Data, 
      boostThreshold: 500, 


     }] 

Für die Komponente render:

  <ReactHighmaps config={config} ref="chart" /> 

Irgendwelche Vorschläge?

Using React, Highcharts, and React-Highcharts (npm)

Answer 1

Ich konnte keine Highcharts (Highmaps) API-Methoden zu arbeiten, aber war in der Lage, einen Drill-down, um das Statusobjekt zu aktualisieren.

Dies führte mich zu Redux als ein Werkzeug zur Zustandsverwaltung, weil ich weiß, dass es besser wäre, dies in einem Anwendungszustand im Gegensatz zu React-Komponente gesteuert zu haben.

Hier ist meine Aktion und Minderer:

export const SHOW_POINTS = 'SHOW_POINTS' 

export function showPoints(configuration){ 
    return { 
    type: SHOW_POINTS, 
    payload: configuration 
}; 
} 



const PointsMapConfig = (state = initialState, action) => { 
switch (action.type){ 
    case SHOW_POINTS: 
    return console.log(state.mapConfig.series[2]), { ...state, 
    mapConfig: { 
    series: [ 
     ...state.mapConfig.series.filter((el, index) => index !== 2), { 
     ...state.mapConfig.series[2], 
     visible: true 
     } 
    ] 
    } 
    } 
    default: 
    return state; 
} 
} 

export default PointsMapConfig 

onClick Zugang mit mapDispatchToProps:

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({ 
    showPoints: showPoints 
    }, dispatch); 
} 

<Buttons style="success" classN="btn btn-secondary" text="test" onButtonClick={()=> this.props.showPoints()} />