Question

使用Chart.js qnd Angular.chart，我有一个堆叠的图表，其中使用了不同的颜色，我想将每个值的数字放入购物车中，因此我在使用插件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
        }
   }
};

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

欢迎任何帮助，在此先感谢！

Answer 1

我已经找到问题的答案了。
基于我提出问题的链接中的代码。

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

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

我们需要在 datalabels.color 中添加一个功能，并在该功能中说明如何为与“深蓝色”相对应的标签的标签着色“：

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

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

对比chart.js datalabels与背景颜色

1 个答案: