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

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
        }
    }
}