array de colores en highcharts

pilucho · #1 (**permalink**) 08/10/2020, 17:35

Hola Gracias por leer mi Post, tengo el siguiente problema este es un codigo de highcharts.
me gustaria mostrar los colores en cada cadena que traigo desde un DB.

si escribo un color en la cadena principal toda las barras me dan un solo color.
la idea es que sea diferentes colores. mas abajo hay un ejemplo en JS
{
color: 'COLOR',
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}

Codigo original

NOTA:
se podria usar el CSS que trae el mismo codigo AQUI y no es la idea

si me gustaria que quede algo similar a estos colores y no los que estan por defecto

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
    <head>
 
        <title>Highcharts</title>
 
        <style type="text/css">
.highcharts-figure, .highcharts-data-table table {
    min-width: 310px; 
    max-width: 800px;
    margin: 1em auto;
}
 
#container {
    height: 400px;
}
 
.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}
 
        </style>
    </head>
    <body>
<script src="././highcharts.js"></script>
 
 
 
    <div id="container"></div>
 
 
 
<script type="text/javascript">
Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Source: Wiki</a>'
    },
    xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 80,
        floating: true,
        borderWidth: 1,
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
        shadow: true
    },
 
    series: [{
        name: 'Year 1800',
        data: [107, 31, 635, 203, 2]
    }, {
        name: 'Year 1900',
        data: [133, 156, 947, 408, 6]
    }, {
        name: 'Year 2000',
        data: [814, 841, 3714, 727, 31]
    }, {
        name: 'Year 2016',
        data: [1216, 1001, 4436, 738, 40]
    }]
});
        </script>
    </body>
</html>

la idea es que muestre el color en la cadena que, vaya apareciendo, sin tener que escribir en cada uno de ellos

Código Javascript:

Ver original/*
        como ejemplo
        color: ['PRIMER COLOR', 'SEGUNDO COLOR', 'TERCER COLOR', 'CUARTO COLOR'],
*/
 
        series: [{
            color: 'PRIMER COLOR',// aqui trae el primer color 
            name: 'Year 1800',
            data: [207, 31, 635, 203, 2]
        }, {
            color: 'SEGUNDO COLOR',
            name: 'Year 1900',
            data: [133, 156, 947, 408, 6]
        }, {
            color: 'TERCER COLOR',
            name: 'Year 2000',
            data: [814, 841, 3714, 727, 31]
        }, {
            color: 'CUARTO COLOR',
            name: 'Year 2016',
            data: [1216, 1001, 4436, 738, 40]
        }]
    });