使用highcharts

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演示