javascript - 使用 highcharts 为条形图中的每个数据项传入 Id

Question

目前，我的条形图显示了条形图，并且每个条形的标题和数据值都毫无问题地显示。但我还想为每个显示的栏添加 id，因为我有可单击的栏，并且通过单击栏，我想传递该单独栏的 id，以便我可以显示包含另一组特定于的图表的页面传入的项目 ID。

这是我用来创建图表的当前 json 数据的示例:

数组:...

{id: 1, uuid: "0ff158d7-09a7-41df-81d1-fd3ac752a967", name: "Example 1", percentage: 34}

{id: 2, uuid: "81aa6eb2-b6fe-4d14-a3ea-f5487b67784a", name: "Example 2", percentage: 0}

{id: 7, uuid: "b7d7fd90-d9af-4a56-aceb-20bfdeda3af4", name: "Example 3", percentage: 12}
....

这就是我填充图表的方式:

var value: Array<any> = [];
  var name: Array<any> = [];
  var ids: Array<any> = [];
  this.myService.getData(url).subscribe(
      data => {
          this.results = data;
          this.results.map(function(result){
              value.push(result.percentage);
              name.push(result.name);
              ids.push(result.id);
          })
          this.chart = {
              title: {
                  text: '',
                  style: {
                      display: 'none'
                  }
              },
              credits: {
                  enabled: false
              },
              chart: {
                  type: 'bar'
              },
              xAxis: {
                  categories: name,
              },
              yAxis: {
                  min: 0,
                  max: 100,
                  labels: {
                      overflow: 'justify'
                  }
              },
              tooltip: {
                  valueSuffix: ' %'
              },
              plotOptions: {
                  bar: {
                      dataLabels: {
                          enabled: false
                      }
                  },
                  series: {
                      cursor: 'pointer',
                      point: {
                          events: {
                              click: function(event:any){
                                  console.log(event.target.id);
                              }
                          }
                      }
                  }
              },
              series: [{
                  showInLegend: false,
                  data: value,
                  name: 'Demo'
              }]
          };

      }
  );

目前，当我单击一个栏时，我只能获取名称及其百分比。有没有办法传递整个对象或至少包含每个数据值的 id 引用，以便我可以在单击后提取它？

Answer 1

1.必须形成第一个正确的数据系列

var dataObj=[{id: 1, uuid: "0ff158d7-09a7-41df-81d1-fd3ac752a967",
name: "Example 1", percentage: 34},
{id: 2, uuid: "81aa6eb2-b6fe-4d14-a3ea-f5487b67784a", name: "Example 2", percentage: 0},
{id: 7, uuid: "b7d7fd90-d9af-4a56-aceb-20bfdeda3af4", name: "Example 3", percentage: 12}];

var value=[];
for(var i=0;i<dataObj.length;i++){
value.push({name:dataObj[i].name,y:dataObj[i].percentage,uuid:dataObj[i].uuid,id:dataObj[i].id})
}
console.log(value);

2.PlotOptions 将是

plotOptions: {
              bar: {
                  dataLabels: {
                      enabled: false
                  }
              },
              series: {
                  cursor: 'pointer',
                  point: {
                      events: {
                          click: function(event){
                              console.log(event.point.id);
                              console.log(event.point.uuid);
                          }
                      }
                  }
              }
          },

Fiddle演示