Question

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

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

我可以使用包下降标记中包含的定义来引用图表和mappoint：

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

并在我的渲染中：

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

尝试：

chart.series [2] .event.update（{visible：false}）＆gt;＆gt;错误：Highchart.js：27 Uncaught TypeError：无法读取属性'update'   未定义

chart.plotOptions.mappoint.events.hide（）＆gt;＆gt; TypeError：无法读取未定义的属性'mappoint'

chart.series [2] .setVisible（false，true）＆gt;＆gt;控制台没有错误但没有任何反应

chart.series [2] .hide（）＆gt;＆gt;控制台没有错误，但没有任何反应和其他一些变化。

ReactHighmaps.Highcharts.hide（chart.series [0]）＆gt;＆gt;这不是函数的错误

我有很多事要做一个JSbin ......

在Chrome中测试

当我检查mappoints的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）

Answer 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( )} />

使用Highmaps和React

1 个答案: