Highcharts Cambiar color de barra según el valor

Question

Estoy usando Highcharts y me preguntaba si era posible tener los 3 primeros resultados en un gráfico de barras para tener una barra de color diferente al resto del gráfico. Estoy poblando el gráfico de un archivo CSV.

Aquí es mi javascript:

$(document).ready(function() { 

     var options = { 
      chart: { 
       renderTo: 'container', 
       defaultSeriesType: 'bar' 
      }, 
      title: { 
       text: 'Spiritual Gifts Results' 
      }, 
      colors: [ 
       '#3BBEE3' 
      ], 
      xAxis: { 
       categories: [] 
      }, 

      yAxis: { 
       title: { 
        text: 'Service' 
       } 
      }, 
      series: [] 
     }; 

     var data = document.getElementById("<%= hdn_Data.ClientID %>"); 
     // Split the lines 
     if (data.value != "") { 
      var lines = data.value.split('\n'); 

      // Iterate over the lines and add categories or series 
      $.each(lines, function(lineNo, line) { 
       var items = line.split(','); 
       // header line containes categories 
       if (lineNo == 0) { 
        $.each(items, function(itemNo, item) { 
         if (itemNo > 0) options.xAxis.categories.push(item); 
        }); 
       } 
       // the rest of the lines contain data with their name in the first position 
       else { 
        var series = { 
         data: [] 
        }; 
        $.each(items, function(itemNo, item) { 
         if (itemNo == 0) { 
          series.name = item; 
         } else { 
          series.data.push(parseFloat(item)); 
         } 
        }); 

        options.series.push(series); 

       } 

      }); 

      // Create the chart 
      var chart1 = new Highcharts.Chart(options); 
     } 
    }); 

Aquí está una muestra de CSV:

Categories,Administration,Evangelism,Mercy,Shepherding,Leadership,Wisdom,Teaching 
Total Points,11,5,4,4,3,2,1 

Así que en este ejemplo me gustaría que 'Administración', 'evangelismo', y 'Misericordia' tener un "color de barra azul" mientras que "Pastoreo", "Liderazgo", etc. tienen un "color de barra roja".

¿Esto es posible?

Aquí es fiddle

Answer 1

Basado en el comentario de OP, he golpeado mi respuesta anterior.

como lo están haciendo,

series.name = item; 

y

series.data.push(parseFloat(item)); 

Como sabio, que puede hacer,

series.color: '#f6f6f6' 

(en su bucle que puede cambiar de color basada en su condiciones)

Puede hacerlo,

$(document).ready(function() { 

    var options = { 
     chart: { 
      renderTo: 'container', 
      defaultSeriesType: 'bar' 
     }, 
     title: { 
      text: 'Spiritual Gifts Results' 
     }, 
     colors: [ 
      '#3BBEE3' 
      ], 
     xAxis: { 
      categories: [] 
     }, 

     yAxis: { 
      title: { 
       text: 'Service' 
      } 
     }, 
     series: [] 
    }; 

    var data = document.getElementById("hdn_Data"); 
    // Split the lines 
    if (data.value != "") { 
     var lines = data.value.split('\n'); 

     // Iterate over the lines and add categories or series 
     $.each(lines, function(lineNo, line) { 
      var items = line.split(','); 
      // header line containes categories 
      if (lineNo == 0) { 
       $.each(items, function(itemNo, item) { 
        if (itemNo > 0) options.xAxis.categories.push(item); 
       }); 
      } 
      // the rest of the lines contain data with their name in the first position 
      else { 
       var series = { 
        data: [] 
       }; 
       $.each(items, function(itemNo, item) { 
        var data = {}; 
        if (itemNo == 0) { 
         series.name = item; 
        } else { 
         data.y = parseFloat(item); 
         if (itemNo <= 3) { 
          data.color = 'Gray'; 
         } 
         else { 
          data.color = '#3BBEE3'; 
         } 
         series.data.push(data); 
        } 
       }); 
       options.series.push(series); 
       } 
      }); 

      // Create the chart 
      var chart1 = new Highcharts.Chart(options); 
     } 
    }); 

Fiddle

Consulte this, se puede dar data en 3 maneras. He usado el tercero.

Answer 2

Sí, En su ejecución empuje que debe ser capaz de establecer el color de dicho punto. No estoy muy familiarizado con push ya que usamos un objeto de datos precompilados que enviamos. Pero dentro de .NET establecemos el color (si es necesario) en un punto particular y luego enviamos el objeto de datos al gráfico.

Answer 3

Aquí es un ejemplo

data: [ 
    { y: 34.4, color: 'red'}, // this point is red 
    21.8,      // default blue 
    {y: 20.1, color: '#aaff99'}, // this will be greenish 
    20       // default blue 
]