Hacemos una verificación completa cada secciones de nuestra página web con el objetivo de enseñarte siempre información certera y certera.
Solución:
He creado una familia de colores simple con 15 colores diferentes.
No se eligen al azar. En cambio, los colores se han elegido para maximizar la diferencia entre los colores cercanos.
Aún puede crear el gráfico con menos de 15 puntos de datos y no se generará ninguna advertencia.
Aquí está el código:
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"
);
Este es el html:
Si quieres jugar con él, aquí está el código en jsfiddle.
Espero que esto sea de ayuda 🙂
Podrías hacer un bucle con tu pieData array y establezca valores aleatorios para el valor del color.
Puede configurar este con un valor como “rgb (230,0,0)” y generar los valores enteros rojo, verde, azul al azar.
Algo como esto :
r = Math.floor(Math.random() * 200);
g = Math.floor(Math.random() * 200);
b = Math.floor(Math.random() * 200);
color = 'rgb(' + r + ', ' + g + ', ' + b + ')';
Vea un ejemplo de jsfiddle aquí, con valores aleatorios y colores aleatorios. (Ejecútelo varias veces para tener una idea de cómo se muestra con diferentes conjuntos de datos).
O de lo contrario, podría definir un array de colores predefinidos y utilícelo. Tenga en cuenta que un gráfico circular con más de 50 elementos no es muy legible. Entonces, una lista predeterminada de 50 podría estar bien.
En primer lugar, hay muchas personas daltónicas. Aquí hay un buen artículo sobre gráficos y daltonismo: Encontrar las paletas de colores adecuadas para visualizaciones de datos
Esto usa Chart.js 2.4.0
Estoy calculando los diferentes colores de un degradado como este:
Esto le da un bonito aspecto cohesivo. He tomado prestadas las paletas del enlace de arriba. Solo he probado con gráficos de anillos, barras y líneas, pero debería ser bastante fácil agregar otros tipos. También puede crear fácilmente sus propios degradados.
Puedes encontrar un jsfiddle aquí.
HTML:
Palettes borrowed from:
Finding the Right Color Palettes for Data Visualizations
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();
Esto daría algo como esto:
Nos puedes añadir valor a nuestra información dando tu veteranía en las aclaraciones.