如何将color family设置为chart.js中的饼图
我正在尝试使用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.
Luc*_*ano 10
我创造了一个简单的颜色系列,有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上的代码.
我希望这个能帮上忙 :)
您可以循环思考您的pieData数组并为颜色值设置随机值.
您可以使用"rgb(230,0,0)"之类的值设置此值,并随机生成红色绿色蓝色整数值.
像这样的东西:
r = Math.floor(Math.random() * 200);
g = Math.floor(Math.random() * 200);
b = Math.floor(Math.random() * 200);
color = 'rgb(' + r + ', ' + g + ', ' + b + ')';
请参阅此处的jsfiddle示例,其中包含随机值和随机颜色.(运行几次以了解它如何使用不同的数据集显示.)
或者你可以定义一组预定义的颜色,然后使用它.请注意,包含超过50个项目的饼图不是非常可重复的.所以50的默认列表可能没问题.
不要浪费时间创建随机生成器。相反，选择一些明亮漂亮的颜色进行循环。
该函数采用任意大小并使用该数组构建背景颜色数组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 - 1)]);
}
return colors;
}
console.log(getColors(10));然后，您可以通过调用此函数来设置背景颜色，并将数据大小作为参数传递。
datasets:
[
{
data: data,
backgroundColor: getColors(data.length)
}
]
这样你的颜色总是很漂亮，并且每个数据元素都被分配了一个值。
首先，那里有很多色盲人。这是一篇有关图表和色盲的好文章： 为数据可视化找到合适的调色板
这使用Chart.js 2.4.0
我正在从这样的渐变计算不同的颜色：
这给出了很好的凝聚力外观。我已经从上面的链接中借用了调色板。我只测试了甜甜圈图，条形图和折线图，但是添加其他类型应该很容易。您也可以轻松制作自己的渐变。
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();
这将给出以下内容：
