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