Chart.js 如何修改现有图例

Question

如何修改 Chart.js 中的现有图例？

我见过创建自定义 HTML 图例的复杂方法（使用generateLegend或legendCallback ），以及一个简单的options.legend.legendText方法，它应该接受一个数组，但没有看到任何变化，所以假设这是版本 1。

我正在寻找向默认图例添加文本：

type: 'doughnut',
data: {
    datasets: [{
        data: series,
    }],
    labels: labels,                
},
options: {
   legend: {
     legendText = labels.map((label, index) => `${label} - ${series[index]}%`);
   }
}

Answer 1

Chart.js 3.xx

我也包含了 3.5 版的示例。 您可以通过覆盖generateLabels方法来更改图例文本。

 let labels = ['a', 'b', 'c', 'd'], series = [4, 2, 1, 3], myChart = new Chart(document.getElementById('chart'), { type: 'doughnut', data: { labels: labels, datasets: [{ data: series, backgroundColor: ['red', 'blue', 'green', 'orange'] }] }, options: { maintainAspectRatio: false, plugins: { legend: { display: true, position: "bottom", align: "center", fontFamily: "Arial", labels: { usePointStyle: true, fontColor: "red", generateLabels(chart) { const data = chart.data; if (data.labels.length && data.datasets.length) { const {labels: {pointStyle}} = chart.legend.options; return data.labels.map((label, i) => { const meta = chart.getDatasetMeta(0); const style = meta.controller.getStyle(i); return { text: 'This is ' + label + ' - ' + chart.data.datasets[0].data[i], fillStyle: style.backgroundColor, strokeStyle: style.borderColor, lineWidth: style.borderWidth, pointStyle: pointStyle, hidden: .chart,getDataVisibility(i): index; i }; }); } return []; } } } } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script> <canvas id="chart"></canvas>

Answer 2

编辑：

我注意到如果图表被重绘（例如，如果浏览器窗口被调整大小），图例将丢失额外的文本。

我已经修改了作为内联插件工作的方法，以便在绘制图例之前修改label对象。

 let labels = ['a', 'b', 'c', 'd'], series = [4, 2, 1, 3], myChart = new Chart(document.getElementById('chart'), { type: 'doughnut', data: { labels: labels, datasets: [{ data: series, backgroundColor: ['red', 'blue', 'green', 'orange'] }] }, options: { maintainAspectRatio: false }, plugins: [{ afterLayout: function(chart) { let total = chart.data.datasets[0].data.reduce((a, b) => { return a + b; }); chart.legend.legendItems.forEach( (label) => { let value = chart.data.datasets[0].data[label.index]; label.text += ' - ' + (value / total * 100).toFixed(0) + '%' return label; } ) } }] });

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <canvas id="chart"></canvas>