2012-05-25 2 views
11

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.Highcharts Cambiar color de barra según el valor

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

Respuesta

12

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.

+0

Gracias, esto parece cambiar el color, pero parece cambiar el color de cada elemento en el gráfico, incluso si lo envolví en un condicional, parece cambiar el color de cada barra en el gráfico de barras. Lo que quiero es cambiar el color de las barras para las 3 categorías principales. – mint

+0

Actualice su código aquí y también muestre un enlace de violín, para que pueda verificar – Jashwant

+0

Aquí hay un enlace de violín: http://jsfiddle.net/vP2rM/6/ (avíseme si funcionó, nunca antes había manipulado) – mint

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.

+0

estoy usando la versión javascript ... no sabe dónde esta funcionalidad sería que los js uno, pero voy a hurgar y ver. Gracias por alguna dirección. – mint

11

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 
]        
+0

Esto es En realidad, el enfoque más limpio, ya que el ejemplo del OP tiene preocupaciones de análisis de estructura de datos mezcladas con el formateo de los puntos de datos. Probablemente, una mezcla de formateador personalizado con lógica simple y formateo previo de datos como este es ideal. – method

Cuestiones relacionadas