angular-chart.js legendCallback答案

【问题标题】：angular-chart.js legendCallbackangular-chart.js legendCallback
【发布时间】：2016-08-19 03:15:40
【问题描述】：

我似乎无法使legendCallback 工作。

我试着这样写：

options = {
    legend: {
        legendCallback: function (chart) {
            console.log(chart);
            return 'a';
        }
    }
}

OR

options = {
    legend: {

    },

    legendCallback: function (chart) {
        console.log(chart);
        return 'a';
    }
}

我也尝试在第二个中切换legend 和legendCallback，但仍然不起作用，也没有任何错误。

【问题讨论】：

你能提供 plunker ...
如果有必要，我可以。但是基于我给的sn-ps。哪个是添加legendCallback 的正确部分？

标签： javascript angularjs charts angular-chart

【解决方案1】：

legendCallback 函数在选项上设置，由 Chart JS 运行，然后通过调用 chartInstance.generateLegend() 提供给您的调用代码，该函数将为您生成 HTML 以附加到页面上的元素。

var chartInstance = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legendCallback: function (chart) {
            console.log(chart);
            return 'a';
        }
    }
});

// This runs the legendCallback and returns the result
var legendHtml = chartInstance.generateLegend();

【讨论】：

您能否添加评论以解释它为什么不起作用以及您采取了哪些措施来解决它？
legendCallback 函数在选项上设置，由 Chart JS 运行，然后通过调用 chartInstance.generateLegend() 提供给您的调用代码，这将为您生成 HTML 以附加到元素在页面上。更新了上面的答案。

【解决方案2】：

根据Chart.js docs，legendCallback 是一个全局选项，即

var chartInstance = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legendCallback: function (chart) {
            console.log(chart);
            return 'a';
        }
    }
});

【讨论】：