Сравните цвета данных диаграммы.js с фоном - PullRequest
0 голосов
/ 08 мая 2019

Использование Chart.js qnd Angular.chart , у меня есть составная диаграмма, на которой я использую разные цвета, я хочу поместить число каждого значения в корзинупоэтому я использую плагин Datalabels .

Проблема в том, что мой график выглядит так:

enter image description here

Где у меня темно-синий, я бы хотел, чтобы цифры были белыми.Но не знаю, как этого добиться.

Это мой код:

$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 говорится, что вы можете добавлять функции, но не очень уверены, как: Ссылка на страницу datalabels о цвете

Любая помощь приветствуется,Заранее спасибо!

1 Ответ

0 голосов
/ 09 мая 2019

Я нашел ответ!
, основанный на коде по ссылке, которую я вставил в вопрос.

Вам нужны имена значений, указанных в Серии.Это мой массив 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';
             }
         }
}

Таким образом, все секции с Сильным синим в качестве фона будут иметь белый цвет, а остальные будутчерный.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...