establecer diferentes colores para cada columna en los gráficos altos

Necesito configurar dinámicamente diferentes colores para cada columna en el gráfico de gráficos altos. mi Highcharts GRPH es:establecer diferentes colores para cada columna en los gráficos altos

options = { 

     chart: { 

      renderTo: 'chart', 

      type: 'column', 

      width: 450 

     }, 

     title: { 

      text: 'A glance overview at your contest’s status' 

     }, 

     xAxis: { 

      categories: ['Approved Photos', 'Pending Approval Photos', 'Votes', 'Entrants'], 
      labels: { 
       //rotation: -45, 
       style: { 
        font: 'normal 9px Verdana, sans-serif, arial' 
       } 
      } 
     }, 

     yAxis: { 

      allowDecimals: false, 
      min: 0, 
      title: { 

       text: 'Amount' 
      } 
     }, 

     legend: { 
      enabled: false 
     }, 

     series: [] 
    }; 

    series = { 
     name: "Amount", 
     data: [], 
     dataLabels: { 
      enabled: true, 
      color: '#000000', 
      align: 'right', 
      x: -10, 
      y: 20, 
      formatter: function() { 
       return this.y; 
      }, 
      style: { 
       font: 'normal 13px Verdana, sans-serif' 
      } 
     } 
    };

Y puse los datos de esta manera:

  for (var i in Data) { 

     if (parseInt(Data[i]) != 0) { 

      series.data.push(parseInt(Data[i])); 
     } 
     else { 
      series.data.push(null); 
     } 
    } 

    options.series.push(series); 

    chart = new Highcharts.Chart(options);

¿Cómo puedo configurar diferentes colores para cada dato en este bucle?

Fuente

2011-10-12 user750487

Cuando se agrega el valor a la series.data también puede ajustar el color utilizando las opciones de punto, por ejemplo,

series.data.push({ y: parseInt(Data[i]), color: '#FF0000' });

Para más detalles acerca de las opciones de punto ven http://www.highcharts.com/ref/#point--color

Fuente

2011-10-12 11:04:02 escouser

Hola! Soy yo otra vez ... Cómo puedo establecer el ancho de columna por datos. Por ejemplo: si los datos son 23, quiero establecer el ancho de la columna 100px, y si los datos son 123, serán 110px. Necesito esta opción para los datos de putt en el medio de la columna. – user750487

Lo siento, no estoy seguro de cómo harías esto en Highcharts. – escouser

puede trazarOpciones-> serie-> ancho de línea para establecer el ancho. Pero, eso sería ancho fijo para todas las barras en el gráfico. Puede ser que puedas establecerlo usando el valor máximo. http://www.highcharts.com/ref/#plotOptions-series--lineWidth –

Aquí hay otra solución con la última versión de Highcharts (actualmente 3.0).

Establezca la opción colorByPoint en true y defina el color sequence que desee.

options = { 
    chart: {...}, 
    plotOptions: { 
     column: { 
      colorByPoint: true 
     } 
    }, 
    colors: [ 
     '#ff0000', 
     '#00ff00', 
     '#0000ff' 
    ] 
}

Aquí es un example basado en Highcharts Column with rotated labels demo

Fuente

2013-04-23 12:31:58

tenga en cuenta que esta solución funciona tanto en gráficos de barras como en columnas. Simplemente cambie 'columna' a 'barra' en el array plotOptions – Rooster

Precisamente lo que necesitaba y mucho más fácil de implementar que la respuesta aceptada. ¡Gracias! – keithxm23

Pruebe cualquiera de estos enfoques:

Enfoque 1:

Highcharts.setOptions({ colors: ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE'] });

Enfoque 2:

var colors = ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE', '#000']; 

$('#bar_chart').highcharts({ 
     chart: { 
      type: 'column'    
     }, 
     title: { 
      text: '' 
     }, 
     subtitle: { 
      text: '' 
     }, 
     xAxis: { 
      type: 'category' 
     }, 
     yAxis: { 
      title: { 
       text: '' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     plotOptions: { 
      series: { 
       borderWidth: 0, 
       dataLabels: { 
        enabled: false      
       } 
      } 
     },   

     series: [{ 
      name: '', 
      colorByPoint: true, 
      data: [{ 
       name: 'Blue', 
       y: 5.78, 
       color: colors[0] 

      }, { 
       name: 'Green', 
       y: 5.19, 
       color: colors[1] 

      }, { 
       name: 'Pink', 
       y: 32.11, 
       color: colors[2] 

      }, { 
       name: 'Yellow', 
       y: 10.04, 
       color: colors[3] 

      }, { 
       name: 'Purple', 
       y: 19.33, 
       color: colors[4] 

      }] 
     }] 
    });

Fuente

2017-10-27 12:43:42

establecer diferentes colores para cada columna en los gráficos altos

Respuesta

Cuestiones relacionadas