Javascript 如何在图表的x轴上发送其他变量？

我使用的是ReactHighCharts，其中BarChart配置如下：

    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
  };

categories=[9000，12500]
barChartConfig：{
图表：{
类型：“列”
},
标题：{
文本：“播放摘要”
},
xAxis：{
类别，
十字准星：对
},
亚克斯：{
分:0,，
标题：{
文本：“计数（数字）”
}
},
工具提示：{
总部：
“{point.key}”，
点格式：
“{series.name}:”+
“{point.y:.1f}计数”，
页脚格式：“”，
分享：是的，
useHTML:true
},
打印选项：{
系列：{
光标：“指针”，
要点：{
活动：{
单击：（e）=>{this.props.history.push（`/showdata/${id}）}
}
}
}
},
系列
};

并将此条形图配置传递给

 <ReactHighcharts config={barChartConfiguration} />

---

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

您可以做的是将要在序列中使用的数据参数绑定起来

创建系列有多种方法，但有一种解决方案如下所示：

    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)
             }
         );

系列：[
{
数据：[[1，“Highcharts”，10]，[1，“React”，22]，[3，“Highsoft”，22]，
键：[“y”、“名称”、“路由ID”]，
类型：“条”
}
]

使用此选项，您可以向序列中添加所需的任何数据（这里是

routeId

）。 然后，您可以在以后的事件中使用该选项，如下所示（在本例中，您添加的数据绑定到单个点）：

事件：{
点击：e=>{
this.props.history.push（`/showdata/${e.point.routeId}`）；
}
}

---

下面是一个条形图示例：

您可以做的是将要在序列中使用的数据参数关联起来

创建系列有多种方法，但有一种解决方案如下所示：

    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)
             }
         );

系列：[
{
数据：[[1，“Highcharts”，10]，[1，“React”，22]，[3，“Highsoft”，22]，
键：[“y”、“名称”、“路由ID”]，
类型：“条”
}
]

使用此选项，您可以向序列中添加所需的任何数据（这里是

routeId

）。 然后，您可以在以后的事件中使用该选项，如下所示（在本例中，您添加的数据绑定到单个点）：

事件：{
点击：e=>{
this.props.history.push（`/showdata/${e.point.routeId}`）；
}
}

---

下面是一个带有条形图的示例：

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

演示：

---

将

click（e）=>

更改为

click（）

会将

此

分配给允许您访问

点类别

值的点值

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

演示：

---

将

click（e）=>

更改为

click（）

会将

此

分配给允许您访问

点类别

值的点值

此处日期[i]。值可以相同。因此，到那时，这将无法正常工作。我不明白为什么这无法正常工作。类别值是根据数据[i].value.Here date[i]指定的。值可以相同。因此，到那时，这将无法正常工作。我不明白为什么这无法正常工作。类别值是根据数据[i]值指定的。