HighCharts：是否可以自定義各個系列的顏色？

我正在使用HighCharts作爲折線圖報告。在這個特定的報告中，我被要求定製每個系列的顏色。該系列將永遠保持不變。因此，例如：HighCharts：是否可以自定義各個系列的顏色？

約翰系列：藍虛線瑪麗系列：紅色實線

有誰知道如何做到這一點？

2011-04-20 Tjaart

選項可以爲每個系列單獨設置。

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container' 
    }, 
    xAxis: { 
     type: 'datetime' 
    }, 

    series: [{ 
     name: 'John', 
     color: '#0066FF', 
     dashStyle: 'ShortDash', 
     data: [ 
      [Date.UTC(2010, 0, 1), 29.9], 
      [Date.UTC(2010, 2, 1), 71.5], 
      [Date.UTC(2010, 3, 1), 106.4] 
     ] 
    },{ 
     name: 'Mary', 
     color: '#FF0000', 
     data: [ 
      [Date.UTC(2010, 0, 1), 60.9], 
      [Date.UTC(2010, 1, 1), 40.5], 
      [Date.UTC(2010, 2, 1), 90.0], 
      [Date.UTC(2010, 3, 1), 80.4] 
     ] 
    }] 
});

JsFiddle Example

來源

2011-04-20 20:47:16

感謝這個！參考文檔似乎只能爲所有系列設置選項。我認爲這很奇怪，但是這很清楚。 – 2012-01-09 09:38:23

你可以使該顏色有條件嗎？想知道是否可以通過格式化程序獲取顏色。 – tsquillario 2012-04-16 19:43:18

真棒@EricC！保存我的一天.. – 2015-07-17 09:10:04

如果你讀了API here，你會看到下面的文字。

甲級

實際系列附加到該圖表。除了下面列出的成員之外，該特定類型圖的plotOptions的任何成員都可以單獨添加到系列中。例如，即使在plotOptions.series中指定了一般lineWidth，也可以爲每個系列指定個人lineWidth。

因此，你可以添加任何從plotOptions。

演示：

series: [{ 
    name: 'serie1', 
    data: [0,1,2,3,4,5,6,7,8,9], 
    color: '#FFFF00', 
    lineWidth: 4, 
    id: 'serie1', 
    step: true 
}]

Working demo

來源

2013-02-15 04:22:13

HighCharts：是否可以自定義各個系列的顏色？

回答

相關問題