[Javascript] ¿Cómo puedo cambiar los colores de mi gráfico circular Highcharts?


Answers

Creo que lo que debes hacer es configurar los colores usando el tema en lugar de setOptions de la siguiente manera:

Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', 
                             '#64E572', '#FF9655', '#FFF263', '#6AF9C4']});
Question

Estoy usando gráficos altos para hacer un gráfico circular, pero tengo problemas para cargar un conjunto de colores personalizado para mi gráfico.

Aquí está mi código:

     <script type="text/javascript">
     $(function () {
     Highcharts.setOptions({
     colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',      '#6AF9C4']
    });
    return new Highcharts.Chart({


        chart: {
            renderTo: 'trailpiechart',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor: "#f8f8f8",
            margin: [20, 20, 20, 20]
        },


        credits: {
            enabled: false
        },

        title: {
            text: caption
        },
        tooltip: {
            formatter: function () {
                return this.y + ' links';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        legend: {
            layout: 'vertical',
            floating: false,
            borderRadius: 0,
            borderWidth: 0
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: data
        }]
    });
    });
</script>

Mi gráfico circular funciona con este código, pero solo usa el palet de colores predeterminado.

¿Cómo se especifica un conjunto de colores personalizado?




Para responder la pregunta de @Loko Web Design https://.com/a/38794379/7475250

¿Hay una página web que dice a qué corresponde cada uno de los "colores"? Todas las respuestas aquí muestran algo así como:

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']

¿Pero qué cambian # 333, # CB2326, etc. en realidad? Obviamente puedo simplemente cambiarlos y ver qué cambios, pero sería bueno tener esta referencia disponible en alguna parte.

Los documentos de color están disponibles aquí . Aunque útiles, no describen qué cambia un color específico en realidad. A continuación está mi mejor descripción.

El puntal de colores le da a Highcharts los colores que le gustaría que recorra la tabla. Por ejemplo, si tiene el siguiente accesorio de color.

colors: ['blue', 'green']

Sus sectores de tarta se alternaría entre azul y verde. Cambiando azul a rojo tus colores se alternarán entre rojo y verde. Pruébalo con el siguiente violín

Expandir la lista de colores aumenta la cantidad de colores antes de repetir.

colors: ['blue', 'green', 'yellow']

Repetiría los colores si hay más de 4 sectores en su conjunto de datos.




Yo tuve el mismo problema. En highcharts.css hay una sección llamada "Colores predeterminados". Después de eliminar esta sección, podría usar colores personalizados. De todos modos, supongo que no necesitas Highcharts.css si usas la versión v5.0.4 o superior.




¿Hay una página web que dice a qué corresponde cada uno de los "colores"? Todas las respuestas aquí muestran algo así como:

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']

¿Pero qué cambian # 333, # CB2326, etc. en realidad? Obviamente puedo simplemente cambiarlos y ver qué cambios, pero sería bueno tener esta referencia disponible en alguna parte.




Links