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：点击自定义图例标题

1 个答案: