Javascript Highcharts не может получить имя столбца щелчка в событии onclick

Question

Я пытаюсь получить имя столбца, которое было нажато, но я получаю undefined.

Я вижу, что это отображается в подсказке, но не при нажатии столбца.

Вот код:

$(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.series.name, this.x и this.y, но ни один не дает мне имя.

Как это исправить?

Answer 1

Как DOC состояния 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

Задайте объект "events" внутри объекта "column" вместо ряда.