Question

这里有一个饼图，用chart.js绘制。它的工作正常。但问题是，它在多个数据集中呈现相同的颜色，这看起来很尴尬和混乱。

以下是该饼图的快照

这是我的AJAX代码

$.ajax({
    url: "<?php echo base_url('Analytics/AdminAnalyticsCat');?>",
    method: "GET",
    success: function (data) {
            alert(data);
        console.log(data);
        var data = JSON.parse(data);
        var month = [];
        var customers = [];

        for (var i in data) {
            month.push("Customers in " + data[i].cat_name);
            customers.push(data[i].counter);
        }
var ctx = document.getElementById("canvasDoughnut").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: month,
        datasets: [{

            data: customers,
            lineTension: 0,
            fill: false
        }]

    },
    options: {
        legend: {
            display: false
        }
    }
});
    }
});

我尝试了很多次来设置不同的颜色，但它不起作用。那么请指导我，我哪里出错了？感谢..

Answer 1

我没有看到你发布的代码中的任何地方，提到指定颜色方案......

根据@ http://www.chartjs.org/docs/latest/找到的官方文档，您需要执行以下操作 - 根据需要进行调整

data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
},

将上述内容放在options: {

之前

Answer 2

您可以调用此函数为每个条形成随机颜色：

 var randomColorGenerator = function () {
           return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
        };

var barChartData = {
               labels: ["Your label sets"],
               datasets: [
                   {
                       label: "My First dataset",
                       fillColor: randomColorGenerator(),
                       strokeColor: randomColorGenerator(),
                       highlightFill: randomColorGenerator(),
                       highlightStroke: randomColorGenerator(),
                       data: [Your datasets]
                   }
               ]
           };

根据饼图中的数据更改颜色.js

2 个答案: