2012-03-04 100 views
0

我想弄清楚如何使用創建一些邏輯,這些邏輯將爲我的高圖形應用不同的調色板,具體取決於圖形中有多少個系列。根據系列的數量使用不同的顏色 - Highcharts

例如,假設我想,如果有圖有4條線使用這個調色板:

colors: ['#000', '#333', '#666', #999] 

,但我想用這個調色板中,如果有圖有2行:

colors: ['#000', '#666'] 

如何我可以在Highcharts中實現這種有條件着色嗎?也許這些可能有所幫助:

  • 我可以使用函數作爲colors屬性的值嗎?
  • 如何獲得圖表中的系列數?

回答

1

jsfiddle關閉了自動櫃員機,但我相信像下面這樣的東西應該可以工作,我改編自高樓網站上的basic line demo

var chart; 
var options={ 
     chart: { 
      renderTo: 'container', 
      type: 'line', 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
     }, { 
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
     }, { 
      name: 'Berlin', 
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
     }, { 
      name: 'London', 
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
     }] 
}; 
$(document).ready(function() { 
    loadChart(); 
}); 

function loadChart(){ 
    var colors=[]; 
    var seriesCount=option.series.length; 
    if(seriesCount == 2){ 
     colors=['#000', '#666']; 
    }else if(seriesCount == 3){ 
     colors=['#000', '#333', '#666']; 
    }else if(seriesCount == 4){ 
     colors=['#000', '#333', '#666', #999]; 
    } 
    for(var i=0;i<seriesCount;i++){ 
     options.series[i].color=colors[i]; 
    } 
    chart= new Highcharts.Chart(options); 
} 
相關問題