ハイチャートを使用した棒グラフの各データ項目の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.First適切なデータ系列は、フォーム

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デモ