Angular2-Highcharts：自定义图例标题上的单击事件

Question

下面是我创建的图表。我添加了一个自定义图例标题，它给出了计数 (2000)。我正在尝试在此 2000 上进行点击事件，但无法添加它。

https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview

我的图例代码：

 legend: {
                useHTML: true,
                enabled: true,
                align: 'center',
                verticalAlign: 'bottom',
                layout: 'vertical',
                x: 0,
              y:30,
                symbolHeight: 12,
                itemMarginBottom: 1,
                symbolWidth: 25,
                symbolRadius: 1,
                labelFormatter: function () {
                    return '<div style="width:180px"><span class="pull-left" style= "font-weight: 500; padding-bottom: 5px">' + this.name +
                    '</span><span class="pull-right" style= "font-weight: 500" >' + this.value +
                    '</span></div> ';
                },
                title: {
            text: ' Issues<br/><span style="font-size: 9px; color: #666; font-weight: normal">Total: 2000</span>' 
            //Click event on 2000 
            // call donut service's get total info. Need not have to pass any variable. 

        },


            }

Answer 1

您可以在图表加载事件上附加 onclick 事件。

 template: `
    <chart  [options]="options" (load)="onChartLoad($event.context)">
    </chart>

在组件中

onChartLoad(chart) {
  this.chart = chart;
  var t = chart.legend.title.element.children[0].children[1]
  t.onclick = () => this.onLegendTitleClick()
}

onLegendTitleClick() {
  console.log('title clicked', this)
}

示例：https://plnkr.co/edit/kxEgwfV8iKUnBkIZlYxv?p=preview

Angular2-Highcharts：自定义图例标题上的单击事件

Angular2-Highcharts: Click event on custom legend title

javascript

highcharts

angular2-highcharts

angular