Question

我正在尝试使用Chart.js绘制饼图。我的值来自数据库，因此我不知道数据库中会有多少值。在这里，我想为每个值设置一个唯一的颜色。以下是我的例子。

var pieData = [
    {
        value: 20,
        color:"#878BB6"
    },
    {
        value : 40,
        color : "#4ACAB4"
    },
    {
        value : 10,
        color : "#FF8153"
    },
    {
        value : 30,
        color : "#FFEA88"
    }
];

var pieOptions = {
    segmentShowStroke : false,
    animateScale : true
}

var countries= document.getElementById("countries").getContext("2d");
        new Chart(countries).Pie(pieData, pieOptions);

目前在上面的示例中，我设置了硬编码值，但在我的示例中，数据（Json）来自DB。

Answer 1

我创造了一个15种不同颜色的简单颜色系列它们不是随机选择的。相反，已选择颜色以最大化近色之间的差异。

您仍然可以创建少于15个数据点的图表，并且不会生成任何警告。

以下是代码：

ctx = document.getElementById('myChart').getContext('2d');
chart = new Chart(ctx, {
    type: 'pie',
    data: {
        datasets: [{
            label: 'Colors',
            data: [9, 8, 7, 6, 5, 4, 3, 2, 1],
            backgroundColor: ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"]
        }],
        labels: ['a','b','c','d','e','f','g','h','i']
    },
    options: {
        responsive: true,
        title:{
            display: true,
            text: "Color test"
        }
    }
});

这是html：

<canvas id="myChart" width="600" height="400"></canvas>

如果你想玩它，这是jsfiddle上的代码。

我希望这会有所帮助：）

Answer 2

您可以循环思考您的pieData数组并为颜色值设置随机值。

您可以使用＆＃34; rgb（230,0,0）＆＃34;等值设置此值。并随机生成红绿蓝整数值。

这样的事情：

r = Math.floor(Math.random() * 200);
g = Math.floor(Math.random() * 200);
b = Math.floor(Math.random() * 200);
color = 'rgb(' + r + ', ' + g + ', ' + b + ')';

使用随机值和随机颜色查看example jsfiddle here。（运行几次以了解它如何显示不同的数据集。）

否则你可以定义一组预定义颜色并使用它。考虑到一个包含超过50个项目的饼图不是非常可重复的。所以默认列表50可能就好了。

Answer 3

首先，那里有很多色盲人士。这是一篇关于图表和色盲的好文章： Finding the Right Color Palettes for Data Visualizations

这使用Chart.js 2.4.0

我正在计算渐变的不同颜色，如下所示：

这给人一种很好的凝聚力。我从上面的链接借用了调色板。我只测试了甜甜圈，条形图和折线图，但它应该很容易添加其他类型。您也可以轻松制作自己的渐变色。

您可以找到jsfiddle here。

HTML：

<div>
    <button onclick="doughnut();">Doughnut</button>
    <button onclick="lineBar('bar')">Bar</button>
    <button onclick="lineBar('line')">Line</button>
</div>
<div>
    <button onclick="chartColors('cool');">Cool</button>
    <button onclick="chartColors('warm')">Warm</button>
    <button onclick="chartColors('neon')">Neon</button>
</div>
<hr />
<canvas id="canvas"></canvas>
<hr />
Palettes borrowed from:<br />
<a href="https://blog.graphiq.com/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283">
    Finding the Right Color Palettes for Data Visualizations
</a>

使用Javascript：

var ctx = document.getElementById('canvas').getContext('2d');
var chart;
var currentPalette = "cool";

function doughnut() {
    if (chart) chart.destroy();
    chart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Bananas", "Street lights", "Emotions", "Colors", "Children", "Nodes"],
            datasets: [{
                data: [1, 2, 6, 9, 1, 2],
            }]
        },
    });
    chartColors();
}

function lineBar(type) {
    if (chart) chart.destroy();
    chart = new Chart(ctx, {
        type: type,
        data: {
            labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            datasets: [{
                label: "Bananas",
                data: [1, 2, 6, 9, 1, 2]
            }, {
                label: "Street lights",
                data: [2, 6, 9, 1, 2, 7]
            }, {
                label: "Emotions",
                data: [2, 4, 6, 8, 6, 4]
            }, {
                label: "Colors",
                data: [3, 6, 3, 1, 3, 1]
            }, {
                label: "Children",
                data: [4, 4, 4, 5, 5, 5]
            }, {
                label: "Nodes",
                data: [5, 1, 2, 3, 4, 5]
            }, ]
        },
    });
    chartColors();
}

function chartColors(palette) {
    if (!palette) palette = currentPalette;
    currentPalette = palette;

    /*Gradients
      The keys are percentage and the values are the color in a rgba format.
      You can have as many "color stops" (%) as you like.
      0% and 100% is not optional.*/
    var gradient;
    switch (palette) {
        case 'cool':
            gradient = {
                0: [255, 255, 255, 1],
                20: [220, 237, 200, 1],
                45: [66, 179, 213, 1],
                65: [26, 39, 62, 1],
                100: [0, 0, 0, 1]
            };
            break;
        case 'warm':
            gradient = {
                0: [255, 255, 255, 1],
                20: [254, 235, 101, 1],
                45: [228, 82, 27, 1],
                65: [77, 52, 47, 1],
                100: [0, 0, 0, 1]
            };
            break;
        case 'neon':
            gradient = {
                0: [255, 255, 255, 1],
                20: [255, 236, 179, 1],
                45: [232, 82, 133, 1],
                65: [106, 27, 154, 1],
                100: [0, 0, 0, 1]
            };
            break;
    }

    //Get a sorted array of the gradient keys
    var gradientKeys = Object.keys(gradient);
    gradientKeys.sort(function(a, b) {
        return +a - +b;
    });

    //Find datasets and length
    var chartType = chart.config.type;
    switch (chartType) {
        case "pie":
        case "doughnut":
            var datasets = chart.config.data.datasets[0];
            var setsCount = datasets.data.length;
            break;
        case "bar":
        case "line":
            var datasets = chart.config.data.datasets;
            var setsCount = datasets.length;
            break;
    }

    //Calculate colors
    var chartColors = [];
    for (i = 0; i < setsCount; i++) {
        var gradientIndex = (i + 1) * (100 / (setsCount + 1)); //Find where to get a color from the gradient
        for (j = 0; j < gradientKeys.length; j++) {
            var gradientKey = gradientKeys[j];
            if (gradientIndex === +gradientKey) { //Exact match with a gradient key - just get that color
                chartColors[i] = 'rgba(' + gradient[gradientKey].toString() + ')';
                break;
            } else if (gradientIndex < +gradientKey) { //It's somewhere between this gradient key and the previous
                var prevKey = gradientKeys[j - 1];
                var gradientPartIndex = (gradientIndex - prevKey) / (gradientKey - prevKey); //Calculate where
                var color = [];
                for (k = 0; k < 4; k++) { //Loop through Red, Green, Blue and Alpha and calculate the correct color and opacity
                    color[k] = gradient[prevKey][k] - ((gradient[prevKey][k] - gradient[gradientKey][k]) * gradientPartIndex);
                    if (k < 3) color[k] = Math.round(color[k]);
                }
                chartColors[i] = 'rgba(' + color.toString() + ')';
                break;
            }
        }
    }

    //Copy colors to the chart
    for (i = 0; i < setsCount; i++) {
        switch (chartType) {
            case "pie":
            case "doughnut":
                if (!datasets.backgroundColor) datasets.backgroundColor = [];
                datasets.backgroundColor[i] = chartColors[i];
                if (!datasets.borderColor) datasets.borderColor = [];
                datasets.borderColor[i] = "rgba(255,255,255,1)";
                break;
            case "bar":
                datasets[i].backgroundColor = chartColors[i];
                datasets[i].borderColor = "rgba(255,255,255,0)";
                break;
            case "line":
                datasets[i].borderColor = chartColors[i];
                datasets[i].backgroundColor = "rgba(255,255,255,0)";
                break;
        }
    }

    //Update the chart to show the new colors
    chart.update();
}

doughnut();

这可能是这样的：

Answer 4

不要浪费时间创建一个随机数生成器。取而代之的是，选择一些鲜艳漂亮的颜色进行循环。

此函数采用任意大小，并使用pallet数组构建背景色数组。

function getColors(length){
    let pallet = ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"];
    let colors = [];

    for(let i = 0; i < length; i++) {
      colors.push(pallet[i % pallet.length]);
    }

    return colors;
  }

然后您可以通过调用此函数并以数据大小作为参数来设置背景色。

datasets:
[
  {
    data: data,
    backgroundColor: getColors(data.length)
  }
]

这样，您的颜色总是很漂亮，并且为每个数据元素分配了一个值。

如何将color family设置为chart.js中的饼图

4 个答案: