具有ChartJS DataLabels的ChartJS：更改值标签的每个数据集的颜色

Question

我正在将ChartJS与插件ChartJS DataLabels一起使用，以在这些点旁边显示文本值（谁会认为插件是完成此基本任务所必需的，但我偏离了方向。）

我的问题，我需要更改文本标签的颜色以及各个数据集。但是到目前为止，我还没有找到解决方案。我正在动态添加新的数据集，但它们不是静态预加载的。颜色应与数据集的颜色匹配。

假设我有

var colorpalette = ["red", "blue", "green", "magenta", "yellow", "brown", "purple", "orange", "black", "gray"];
var currseriesnum = 0;
var chart = null;

function setUpChart() {

    var ctx = document.getElementById('chartArea').getContext('2d');
    chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: monthnames, 
            datasets: [] // Initially blank - series added dynamically with chart.update()
        }, 
        options: {
            legend: {
                display: false
            },          
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }, 
            plugins: {  // ChartsJS DataLabels initialized here
                datalabels: {
                    anchor: 'end',
                    align: 'bottom',
                    formatter: Math.round,
                    font: {
                      weight: 'bold', 
                      size: 16
                    },
                    color: colorpalette[currseriesnum] // Pick color dynamically
                }
            }           
        }
    });     

}

不起作用。还尝试了一个函数color: function(context)，但不确定如何检索我在这里获得的数据集的当前索引。

我正在如下向动态添加图表系列（最初为空），并增加全局变量currseriesnum。

chart.data.datasets.push({
    label: keyValueSelection.label, 
    fill: false, 
    data: keyValueSelection.value, 
    borderColor: colorpalette[currseriesnum], 
    borderWidth: 2
});
chart.update();
currseriesnum++;

Answer 1

他们在ChartJS DataLabels论坛上给了我答案：

plugins: {
    datalabels: {
        color: function(ctx) {
            // use the same color as the border
            return ctx.dataset.borderColor
        }
    }
}