Highcharts Zmień kolor paska na podstawie wartości

Question

Używam Highcharts i zastanawiałem się, czy możliwe było posiadanie pierwszych 3 wyników w formie wykresu słupkowego, aby mieć inny pasek koloru niż reszta wykresu? Wypełniam wykres z pliku CSV.

Oto mój 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); 
     } 
    }); 

Oto próbka CSV:

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

Więc w tym przykładzie chciałbym dla 'administracja', 'ewangelizacja' i 'Mercy' mieć "niebieski pasek koloru", podczas gdy "Pasterz", "Przywództwo" itp. mają "czerwony kolor paska".

Czy to możliwe?

Oto fiddle

Answer 1

Na podstawie komentarza PO uderzyłem w moją poprzednią odpowiedź.

Jak robisz,

series.name = item; 

i

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

Jak mądry, można to zrobić,

series.color: '#f6f6f6' 

(w pętli można zmienić kolor na podstawie listy warunki)

można zrobić,

$(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

Patrz this, można dać data na 3 sposoby. Użyłem trzeciego.

Answer 2

Tak, w Twoim wykonaniu Push powinieneś być w stanie ustawić kolor dla tego punktu. Nie znam się zbyt dobrze na push, ponieważ używamy prekompilowanego obiektu danych, który wysyłamy. Wewnątrz naszego .NET ustawiamy kolor (jeśli jest to konieczne) w określonym punkcie, a następnie wysyłamy obiekt danych do wykresu.

Answer 3

Oto przykład

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 
]