将 chart.js 数据标签颜色与背景进行对比

Question

使用 Chart.js qnd Angular.chart, I have a stacked chart in which I'm using different colors, I want to put the number of each value inside the cart, so I'm making use of the Plugin Datalabels.

问题是我的图表看起来像这样：

在我有深蓝色的地方，我希望数字是白色的。但是不知道怎么实现。

这是我的代码：

$scope.Options = {
   ...
   plugins: {
        datalabels: {
            color: '#171d28',
            anchor: 'center',
            align: 'center',
            clamp: true
        }
   }
};

我试着把颜色放在一个数组中，像这样：

$scope.Options = {
   ...
   plugins: {
        datalabels: {
            //The first 2 colors as dark and the third one as white
            color: ['#171d28', '#171d28', '#fff'],
            anchor: 'center',
            align: 'center',
            clamp: true
        }
   }
};

但是这样它会按栏应用更改！不是按颜色部分。
它在数据标签页面中说您可以添加功能，但不太确定如何：Link to datalabels page about color

欢迎任何帮助，提前致谢！

Answer 1

我找到了答案！
基于我提出问题的 link 中的代码。

您需要系列中给出的值的名称。这是我现在的 Series 数组：

$scope.Series = ['Low Blue', 'Blue', 'Strong Blue'];

我们需要向 datalabels.color 添加一个函数，在该函数中我们将指示如何为 标签[=25]着色=]对应"Strong Blue"的那些：

plugins: {
    datalabels: {
         color: function(context) {
             var index = context.dataIndex;
             var value = context.dataset.data[index];

             //Inside the "dataset" we look for the "labels" we are using
             //and store them in a variable
             var valueWhite = context.dataset.label;

             //We make the condition: if a value of the label is "Strong blue"
             //then we color this label 'white'
             if(valueWhite === 'Strong Blue') {
                 return value = 'white';
             } else {
                 //If it's any other label, we color it 'black'
                 return value = '#000';
             }
         }
}

这样所有以深蓝色为背景的部分都会变成白色，其余部分变成黑色。