Javascriptハイチャートでは、onclickイベントのクリック列の名前を取得できません。

Question

クリックした列の名前を取得しようとしていますが、未定義です。

ツールチップに表示されていますが、その列をクリックしても表示されません。

は、ここでは、コードです：

$(function() { 

var data = { "mains": [{ "id": "454", "name": "main 1", "subs": [{ "id": "32", "name": "sub 1" }, { "id": "23", "name": "sub 2" }, { "id": "54", "name": "sub 3" }], "image": null }, { "id": "654", "name": "main 2", "subs": [{ "id": "87", "name": "sub 1" }, { "id": "78", "name": "sub 2" }], "image": null }] }; 


mainlist = [], 
sublist = Object.create(null); 

data.mains.forEach(function (main) { 
    mainlist.push(main.name); 
    sublist[main.name] = main.subs.map(function (sub) { 
     return sub.name; 
    }); 
}) 


$('#container').highcharts({ 

    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Top Title Here' 
    }, 
    xAxis: { 
     categories: mainlist 
    }, 
    yAxis: { 
     title: { 
      enabled: true, 
      text: 'Left Title', 
     } 
    }, 
    tooltip: { 
     formatter: function() { 
      return '<b>' + this.x + '</b><br/>' + 
        this.series.name + ': ' + this.y + '<br/>' + 
        'Total: ' + this.point.stackTotal; 
     } 
    }, 
    plotOptions: { 
     series: { 
      cursor: 'pointer', 
      point: { 
       events: { 
        click: function() { 

         alert(this.name); //returns undefined 

        }, 
       }, 
      }, 
     }, 
     column: { 
      stacking: 'normal', 
      dataLabels: { 
       enabled: true, 
       color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
       style: { 
        textShadow: '0 0 3px black' 
       } 
      } 
     } 
    }, 
    series: [{ 
     name: 'title here', 
     data: [5, 10] 
    }], 

}); 

私はまた、this.xとthis.y、this.series.nameを試してみましたが、どれも私の名前を与えていません。

どうすればこの問題を解決できますか？

Answer 1

はplotOptions.series.pointはそれにもかかわらず、彼らは同様にいくつかの情報を保持し、そのイベントリスナー内のパラメータとしてイベントを取得します。

$('#container').highcharts({ 

    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Top Title Here' 
    }, 
    xAxis: { 
     categories: mainlist 
    }, 
    yAxis: { 
     title: { 
      enabled: true, 
      text: 'Left Title', 
     } 
    }, 
    tooltip: { 
     formatter: function() { 
      return '<b>' + this.x + '</b><br/>' + 
        this.series.name + ': ' + this.y + '<br/>' + 
        'Total: ' + this.point.stackTotal; 
     } 
    }, 
    plotOptions: { 
     series: { 
      cursor: 'pointer', 
      point: { 
       events: { 
        // a click-listener gets an event as param 
        click: function (event) { 

         console.log(event.point.category); //returns "main 1" or "main 2" 
         console.log(event.point.plotX+'/'+event.point.plotY); //or its coords 

         console.log(event);// and a lot more 

        }, 
       }, 
      }, 
     }, 
     column: { 
      stacking: 'normal', 
      dataLabels: { 
       enabled: true, 
       color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
       style: { 
        textShadow: '0 0 3px black' 
       } 
      } 
     } 
    }, 
    series: [{ 
     name: 'title here', 
     data: [5, 10] 
    }], 

}); 

Answer 2

「列」オブジェクト内の「イベント」オブジェクトを直列ではなく設定します。ドキュメントの状態として