Question

Chart.js 图表 onclick 禁用图例 onclick

2017-12-08

2684

javascript chart.js chart.js2

我刚刚在条形图中添加了一个图表 onclick 函数，该函数允许我根据单击的条形图执行操作 - 效果很好 - 但是（你知道有一个但是）它会禁用正常的图例 onclick 功能。我怎样才能同时拥有这两个 onclick 功能？

我猜它可能类似于从图表 onclick 函数调用图例 onclick 回调函数，但细节超出了我目前的知识范围。

我已经做到了这一点，但不确定调用默认处理程序的参数应该是什么。

var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;

function YrChartClick(event, YCarray)
  {
    if (typeof YCarray[0] === "undefined")  //click not on a bar, might be legend
    defaultLegendClickHandler(event, 1);  // parameters?? correct function?
else
{
//clicked on a bar - this works
    $('#month').val(YCarray[0]._index+1);  
    MonChange();
}
}

使用最新版本的 chart.js 2.7.1

Answer 1

尝试这样做：

var legendClick = Chart.defaults.global.legend.onClick;
Chart.defaults.global.legend.onClick = function(e, legendItem) {
    console.log(legendItem);
    legendClick.call(this, e, legendItem);
};

legendItem 包含被点击的栏的索引。

legendClick.call(this, e, legendItem) 执行默认的点击处理程序。