Highcharts更改欄背景顏色根據類別值

Question

我使用Highcharts並想知道是否有可能將每個系列組中的頂部欄作爲不同顏色，然後將每個組系列的第二個作爲默認背景顏色。

我不能使用顏色數組，因爲正在重新加載數據的方式產生問題。所以我認爲唯一的方法就是使用Javascript，我可以獲得每個類別的價值，但不知道如何更改attr顏色。我有一個的jsfiddle http://jsfiddle.net/KrTbz/13/

這裏是我的javascript：

 function custom() { 


      var chart; 
      $(function() { 
       chart = new Highcharts.Chart({ 
        chart: { 
         renderTo: 'container', 
         type: 'bar', 
         backgroundColor: 'transparent', 
        }, 
        title: { 
         text: null 
        }, 
        subtitle: { 
         text: null 
        }, 
        xAxis: { 
         tickLength: 0, 
         lineWidth: 0, 
         categories: ['RED', 
            'BLUE', 
            'PINK', 
            'ORANGE'], 
         title: { 
          text: null 
         }, 
         labels: { 
          color: 'orange', 
          x: 5, 
          useHTML: true, 
          formatter: function() { 
           console.log(this); 
           return { 
            'RED': '1ST BAR IS RED', 
            'BLUE': '1ST BAR IS BLUE', 
            'PINK': '1ST BAR IS PINK', 
            'ORANGE': '1ST BAR IS ORANGE' 
           }[this.value]; 
          } 

         } 
        }, 
        yAxis: { 
         max: 100, 
         min: 0, 
         gridLineWidth: 0, 
         title: { 
          text: null 
         }, 
         labels: { 
          enabled: false, 
         } 
        }, 
        tooltip: { 
         enabled: false 
        }, 
        plotOptions: { 
         bar: { 
          dataLabels: { 
           enabled: true, 
           color: '#f60' 
          }, 
          borderWidth: 0, 
          borderRadius: 3 
         } 
        }, 
        legend: { 
         enabled: false 
        }, 
        credits: { 
         enabled: false 
        }, 

     //SERIES AND DATA ARRAY FORMAT NEEDS TO STAY THIS WAY     
        series: [{ 
         color: 'silver', //DEFAULT COLOR OF SECOND BAR ON EACH GROUP 
         name: 'Previous', 
         shadow: false, 
         data : [10, 20, 40, 50] 
          }, { 
         color: 'silver', //DEFAULT COLOR OF SECOND BAR ON EACH GROUP 
         name: 'Current', 
         shadow: false, 
         data : [50, 30, 20, 10] 
          }] 
       }); //Highcharts.Chart ends 
      }); //function ends 
     } 

     custom();​ 

Answer 1

我想你想要這樣的：

data: [{ 
      y: 50, 
      color: 'red'}, 
     { 
      y: 30, 
      color: 'blue'}, 
     { 
      y: 20, 
      color: 'pink'}, 
     { 
      y: 10, 
      color: 'orange'}] 

Jsfiddle