在同一張圖表中爲所有系列使用單一顏色

Question

如何在單個圖表中爲所有系列設置相同顏色？我的圖表中有很多系列，並且可能不便於單獨設置每個系列的顏色。

比方說，我希望我的圖表系列全部爲red，我該怎麼做，而不必每次都明確設置series.color到red？

Answer 1

你可以通過Jeremy提到的方式，通過設置每個圖表的顏色選項。或者你可以按如下

Highcharts.setOptions({ 
    colors:['red','green','blue'] 
}); 

這種方法的好處是，你只需要調用一次此之前，創建任何圖表覆蓋默認的顏色排列。之後的所有圖表都將使用這些顏色，而不需要在每個圖表上設置此選項。大多數網站有一個common.js或一般加載任何其他自定義腳本之前類似的JavaScript文件，你只需要將此代碼添加到該文件，忘了顏色之後

更新
由於你希望所有系列相同的圖表中是單色的，你可以完全覆蓋的顏色陣列，使其具有隻有一種顏色

Highcharts.getOptions().colors = ['red']; 

此方法將離開導航（藍色迷你圖在底部Highstock ）是默認的藍色，這必須以與選項不同的方式重寫。

P.S.上述方法是不重寫默認選項的推薦的方式，正確的方法是做setOptions()，但是這將造成一個合併與現有的默認值，並因此陣列尺寸將超過1

替代地，你可以重寫getColor方法如下，總是返回你選擇的顏色。同樣的，你需要在你面前做這個調用圖的構造

Highcharts.Series.prototype.getColor=function(){ 
    this.color= '#f00'; 
} 

Setting default colors @ jsFiddle

Answer 2

您可以定義一個十六進制顏色數組，然後在圖表聲明中使用該數組。圖表對象中的所有系列都將從這組顏色中拉出。

如果您有多個圖表聲明，則可以使用相同的數組。

這裏的Highcharts樣本之一，自定義顏色的數組添加（run with jsfiddle）：

$(function() { 
    var myColors = [ 
     '#ff0000', 
     '#ff6600', 
     '#ffcc00' 
    ]; 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'bar' 
      }, 
      colors: myColors, 
      title: { 
       text: 'Stacked bar chart' 
      }, 
      xAxis: { 
       categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Total fruit consumption' 
       } 
      }, 
      legend: { 
       backgroundColor: '#FFFFFF', 
       reversed: true 
      }, 
      tooltip: { 
       formatter: function() { 
        return ''+ 
         this.series.name +': '+ this.y +''; 
       } 
      }, 
      plotOptions: { 
       series: { 
        stacking: 'normal' 
       } 
      }, 
       series: [{ 
       name: 'John', 
       data: [5, 3, 4, 7, 2] 
      }, { 
       name: 'Jane', 
       data: [2, 2, 3, 2, 1] 
      }, { 
       name: 'Joe', 
       data: [3, 4, 4, 2, 5] 
      }] 
     }); 
    }); 

}); 

希望這有助於！