对自定义图例执行onClick函数

Question

我在options > legend > onClick中添加了一个函数"Pie_onClickLegend_HighlightOnSlice(event，legendItem)“，我想把它也用在我的自定义图例中。但我不知道如何将legendItem传递到我的图表之外。

​

​

在顶部:我的自定义图例( onClick不起作用)

在按钮上：“原始”图例(使用onClick函数)

我认为问题出在我调用函数"Pie_onClickLegend_HighlightOnSlice“的方式上。

document.getElementById('js-legend').innerHTML = 

chartTurn.generateLegend().replace(/\"0-legend"/g, 'legend');
$("#js-legend > ul > li").on("click", function(e) {
  var index = $(this).index();

  Pie_onClickLegend_HighlightOnSlice(e.originalEvent, chartTurn.legend.legendItems[index]);
  ci.update();

你有什么建议吗？我想问题出在

chartTurn.legend.legendItems[index]

但我不知道该用什么。

https://jsfiddle.net/stamina/x2pbnoes/89/

Answer 1

在海狸的建议下，我找到了一个解决方案。我必须更改对函数的调用：

document.getElementById('js-legend').innerHTML = chartTurn.generateLegend().replace(/\"0-legend"/g, 'legend');
$("#js-legend > ul > li").on("click", function(event) {
  event = event || window.event;

  var target = event.target || event.srcElement;
  while (target.nodeName !== 'LI') {
    target = target.parentElement;
  }
  var parent = target.parentElement;
  var chart = Chart.instances[0];
  var index = Array.prototype.slice.call(parent.children).indexOf(target);
  console.log(chart.legend.legendItems[index]);

  Pie_onClickLegend_HighlightOnSlice(event.originalEvent, chart.legend.legendItems[index],chart);
})

因为我在"Pie_onClickLegend_HighlightOnSlice“中使用了"this.chart”，所以现在我还必须传递我想要使用的chartInstance：

function Pie_onClickLegend_HighlightOnSlice(event, legendItem, chartInstance) {
   if (chartInstance === undefined){
       chartInstance = this.chart;
   }

   [...]
}