基于标签的可变背景色Chart.js

时间:2019-03-05 17:41:06

标签: javascript variables colors background chart.js

我正在尝试根据饼图的标签定义定义的backgroundcolor和hoverbackgroundcolor(我有4个标签:银,金,青铜和新标签)。我尝试了很多事情,但图表的每个标签仍然有一种颜色...(图片) 听起来我的函数repartition_fidelite没有使用我的变量backgroundcolor和hoverbackground color ...

谢谢您的帮助!

图片:

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

0 个答案:

没有答案