使用 Chart.js 和 PHP 配置饼图颜色

Question

我一直在尝试为不同的区域启用不同的颜色，但我找不到为不同的对象设置不同颜色的方法。

我正在从数据库中获取数据，然后对其进行处理，并按如下方式进行处理。

非常感谢您对如何更改不同项目的颜色的看法

//looping through the data
for(var i in data) {
    CarPrices.push(data[i].name);
    score.push(data[i].price);
}

//Working with data fetched from database
var chartdata = {
    labels: player,
    datasets : [
        {
             //Trying to change background color for each element                               
             label: 'Car Prices',
             backgroundColor: [
                  "#FF6384",
                  "#36A2EB",
                  "#FFCE56"
             ],
             //Trying to change background color for each element**
             hoverBackgroundColor: [
                  "#FF6384",
                  "#36A2EB",
                  "#FFCE56"
             ],

        }
    ]
};

Answer 1

可以使用 backgroundColor 数据集属性控制 pie/doughnut 图表中每个切片的颜色。

看起来您在问题中试图这样做，但这里有一个完整的工作示例，您可以利用它来满足您的需要。

var config = {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [300, 50, 100, 40, 10],
      backgroundColor: [
        window.chartColors.red,
        window.chartColors.orange,
        window.chartColors.yellow,
        window.chartColors.green,
        window.chartColors.blue,
      ],
    }],
    labels: [
      "Red",
      "Orange",
      "Yellow",
      "Green",
      "Blue"
    ]
  },
  options: {
    responsive: true,
    legend: {
      display: true,
      labels: {
        padding: 20
      },
    },
    tooltips: {
      enabled: false,
    }
  }
};

这是一个有效的 Codepen example。

使用 Chart.js 和 PHP 配置饼图颜色

Configure Pie Chart Colors Using Chart.js and PHP

pie-chart

chart.js