如何在ReactHighCharts的x轴上发送其他变量？

Question

我正在使用ReactHighCharts，其中我有这样的barChartConfiguration：

    let data = {1: {value: 9000}, 2: {value: 12500}}
    let categories = [];
     Object.keys(data).forEach(obj =>  {
              let id = obj;
              let value = obj[id].value;
              categories.push(value)
             }
         );

现在，

      categories = [9000, 12500]

barChartConfig: {
    chart: {
      type: "column"
    },
    title: {
      text: "Playback Summary"
    },
    xAxis: {
      categories,
      crosshair: true
    },
    yAxis: {
      min: 0,
      title: {
        text: "Counts (numbers)"
      }
    },
    tooltip: {
      headerFormat:
        '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat:
        '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} Count</b></td></tr>',
      footerFormat: "</table>",
      shared: true,
      useHTML: true
    },
    plotOptions: {
      series: {
        cursor: 'pointer',
        point: {
          events: {
            click: (e) => { this.props.history.push(`/showdata/${id}`)  }
          }
        }
      }
    },
    series
  };

并将此barChartConfiguration传递给

 <ReactHighcharts config={barChartConfiguration} />

我已将onClick事件添加到每个栏中，我必须在其中导航到另一个屏幕。但是问题是我无法将“ id”传递给路线。如何发送ID（ID是我映射数据数组的位置）

Answer 1

您可以做的是将要使用的数据参数绑定到系列中。

创建意甲的方法有多种，但一种解决方案如下所示：

series: [
  {
    data: [[1, "Highcharts", 10], [1, "React", 22], [3, "Highsoft", 22]],
    keys: ["y", "name", "routeId"],
    type: "bar"
  }
]

使用此功能，您可以将所需的任何数据（这里是routeId）添加到系列中。然后，您可以在以后的事件中像这样使用它（在此示例中，添加的数据绑定到单个点）：

events: {
  click: e => {
    this.props.history.push(`/showdata/${e.point.routeId}`);
  }
}

以下是带有条形图的示例：https://codesandbox.io/s/highcharts-react-demo-dpck6

Answer 2

下面是我的想法，如何访问数据示例中定义的ID。

演示：https://codesandbox.io/s/highcharts-react-demo-13kx9

point: {
  events: {
    click() {
      for (let i in data) {
        if (data[i].value === this.category) {
          console.log(i);
        }
      }
    }
  }
}

将click (e) =>更改为click()会将this分配给点值，这使您可以访问point.category值。