Переменный цвет фона Chart.js на основе метки - PullRequest
Новая
       13

Переменный цвет фона Chart.js на основе метки

1 голос
/ 05 марта 2019

Я пытаюсь задать определенный цвет фона и цвет фона hoverbackground в зависимости от ярлыка моего пирога (у меня есть 4 ярлыка: серебряный, золотой, бронзовый и новый).Я перепробовал много вещей, но у меня все еще есть один цвет для каждой метки моего графика ... (картинка) Звучит так, как мои переменные backgroundcolor и цвет hoverbackground не используются моей функцией repartition_fidelite ...

спасибо за вашеhelp!

Изображение:

enter image description here

chart.js: 

const repartition = document.getElementById("repartition-fidelite");
var backgroundColor = function (context) {
                const lab = context.dataset.label
                if (lab === 'gold')
                  return '#c49c48';
                else if (lab === 'silver')
                 return '#A5A49B';
                else if (lab === 'bronze')
                 return '#614E1A';
                 else if (lab === 'new')
                 return '#f4f3f3';
                end
              };
var hoverBackgroundColor = function (context) {
                const lab = context.label
                if (lab === 'gold')
                  return '#c49c48';
                else if (lab === 'silver')
                 return '#A5A49B';
                else if (lab === 'bronze')
                 return '#614E1A';
                 else if (lab === 'new')
                 return '#f4f3f3';
                end
              };
var borderColor = [
                 '#E8B500',
                 '#AFAFAF',
                 '#9E5C1F',
              ];

if (repartition) {
  const repartition_fidelite = new Chart(repartition,{
      type: 'pie',
      data: {
        labels: JSON.parse(repartition.dataset.points_em),
        datasets: [{
              data: JSON.parse(repartition.dataset.points),

              backgroundColor: backgroundColor,
              hoverBackgroundColor: hoverBackgroundColor,
              borderColor: borderColor,
              borderWidth: 1
          }]
      },
      options: {
            legend: {
            position: 'bottom',
            },
            plugins: {
              datalabels: {
                  formatter: (value, ctx) => {
                    let sum = 0;
                    let dataArr = ctx.chart.data.datasets[0].data;
                    dataArr.map(data => {
                        sum += data;
                    });
                    let percentage = (value*100 / sum).toFixed(0)+"%";
                    return percentage;
              },
            color: '#232947',
          },
        },
      }
  });
}
...