Saltar al contenido

Cómo configurar la familia de colores en un gráfico circular en chart.js

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:


ingrese la descripción de la imagen aquí

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:

ingrese la descripción de la imagen aquí

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:

ingrese la descripción de la imagen aquí

Nos puedes añadir valor a nuestra información dando tu veteranía en las aclaraciones.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4.5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *