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

Estoy utilizando guiones agudos para hacer un gráfico circular pero tengo problemas para cargar un conjunto de colores personalizado para mi gráfico.¿Cómo puedo cambiar los colores de mi gráfico circular Highcharts?

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 trabaja con este código, sino que sólo utiliza la paleta de colores por defecto.

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

Fuente

2012-04-04 Sreenath Plakkat

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

Mira el siguiente ejemplo http://jsfiddle.net/8QufV/

Fuente

2012-04-09 14:30:05

Lo he intentado pero, el color de mi leyenda cambia pero el color del gráfico circular no cambia. – Rohitesh

creo que lo que hay que hacer es configurar los colores utilizando el tema en lugar de setOptions de la siguiente manera:

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

Fuente

2012-04-04 13:35:22 Linger

Si va a [Pie Chart Demo] (http://www.highcharts.com/demo/pie-basic/grid) y luego hace clic en 'Ver tema visual', verá cómo manipular todo el tema. – Linger

hola El color de Todd no cambia utilizando el código anterior. Todavía muestra los colores predeterminados del gráfico circular –

Highcharts.setOptions({ 
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326',  '#6AF9C4'] 
});

Fuente

2013-07-30 18:12:01 min2bro

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

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

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

Fuente

2016-08-05 16:59:21

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 utilizas la versión v5.0.4 o superior.

Fuente

2016-11-25 11:23:55 bugovicsb

Highcharts.Color (Highcharts.getOptions(). Colores [0]). SetOpacity (0.5) .get ('RGBA')]

En altas tablas de colores incorporadas que tenemos. Entonces necesita cambiar la ruta del color [0] o [1] ........ [6]

Fuente

2017-02-10 12:51:06 Kondal

Para aquellos de ustedes que prefieren para inicializar el color en las configuraciones, se puede simplemente poner los colores en la parte plotOptions del objeto de configuración de este modo:

..., 
plotOptions: { 
    pie: { 
    colors: [ 
    '#50B432', 
    '#ED561B', 
    '#DDDF00', 
    '#24CBE5', 
    '#64E572', 
    '#FF9655', 
    '#FFF263', 
    '#6AF9C4' 
    ], 
    allowPointSelect: true, 
    cursor: 'pointer', 
    dataLabels: { 
    enabled: false 
    }, 
    showInLegend: true 
} 
}, 
...

Fuente

2017-05-01 00:00:43

Para responder a la pregunta de Diseño Web @Loko https://stackoverflow.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 como:
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4'] 
Pero ¿qué # 333, # CB2326, etc. cambiar realmente? 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 here. Aunque útiles, no describen qué cambia un color específico en realidad. A continuación está mi mejor descripción.

El puntal de colores proporciona a Highcharts los colores que desea que recorra la tabla. Por ejemplo, si tiene el siguiente accesorio de color.

colors: ['blue', 'green']

Sus rebanadas de pastel se alternan entre azul y verde. Cambiando azul a rojo tus colores se alternarán entre rojo y verde. Pruébelo con los siguientes fiddle

Al expandir la lista de colores aumenta el número de colores antes de repetir.

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

Se repiten los colores si hay más de 4 sectores en el conjunto de datos.

Fuente

2017-09-26 19:28:05 BJax

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

Respuesta

Cuestiones relacionadas