在 React 中使用 Highmaps答案

【问题标题】：Using Highmaps with React在 React 中使用 Highmaps
【发布时间】：2018-03-25 20:36:40
【问题描述】：

使用 React 构建...尝试使用在按钮单击时调用的外部方法

尝试将地图点设置为不可见。我试过使用：。隐藏（） .setVisible 并使用 .update() 将 'visible' 设置为 false

我可以使用 markdown 包中包含的定义来引用图表和地图点：

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

在我的渲染中：

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

尝试过：

chart.series[2].event.update({visible: false}) >> 错误：Highchart.js:27 Uncaught TypeError：无法读取属性“更新” 未定义

chart.plotOptions.mappoint.events.hide() >> TypeError: Cannot read property 'mappoint' of undefined

chart.series[2].setVisible(false, true) >> 控制台没有错误，但没有任何反应

chart.series[2].hide() >> 控制台中没有错误，但没有任何反应以及其他一些变化。

ReactHighmaps.Highcharts.hide(chart.series[0]) >> 这不是函数的错误

我要做一个 JSbin...

在 Chrome 中测试

当我检查地图点的 console.log 时，我看到方法 .setVisible() 项目路径是： .proto.proto.proto.setVisible

图表配置（选项）：

        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,


        }]

对于组件渲染：

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

有什么建议吗？

使用 React、Highcharts 和 React-Highcharts (npm)

【问题讨论】：

在标准 Highcharts 库中，此代码有效：chart.series[2].hide() 现场演示： jsfiddle.net/kkulig/s9ocLnbd 你确定chart.series[2] 引用了正确的系列吗？请提供图表选项的代码。
@KamilKulig 我添加了配置代码。当我 console.log(chart.series[2]) 我得到正确的系列。我正在考虑通过使用 React State 构造函数的选项部分来解决这个问题，但我仍在努力将其映射出来，因为我正在努力思考如何遵循反应最佳实践，但也不会因为导致太多而导致效率低下重新渲染。

标签： javascript reactjs highcharts

【解决方案1】：

我无法让任何 Highcharts(Highmaps) API 方法工作，但能够深入研究以更新状态对象。

这使我将 Redux 作为状态管理工具，因为我意识到在应用程序状态中控制它会比 React 组件更好。

这是我的动作和减速器：

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

使用 mapDispatchToProps 进行 onClick 访问：

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

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

【讨论】：