如何更改我的高圖餅圖的顏色？

我正在使用highcharts製作一個餅圖，但我無法加載自定義顏色集爲我的圖表。如何更改我的高圖餅圖的顏色？

這裏是我的代碼：

 <script type="text/javascript"> 
    $(function() { 
    Highcharts.setOptions({ 
    colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',  '#6AF9C4'] 
    }); 
    return new Highcharts.Chart({ 


     chart: { 
      renderTo: 'trailpiechart', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      backgroundColor: "#f8f8f8", 
      margin: [20, 20, 20, 20] 
     }, 


     credits: { 
      enabled: false 
     }, 

     title: { 
      text: caption 
     }, 
     tooltip: { 
      formatter: function() { 
       return this.y + ' links'; 
      } 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: false 
       }, 
       showInLegend: true 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      floating: false, 
      borderRadius: 0, 
      borderWidth: 0 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: data 
     }] 
    }); 
    }); 
</script>

我的餅圖可與此代碼，但它僅使用默認的調色板。

如何指定自定義顏色集？

來源

2012-04-04 Sreenath Plakkat

Highcharts.setOptions({ 
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] 
});

請看下面的例子 http://jsfiddle.net/8QufV/

來源

2012-04-09 14:30:05

我試過這個，但是，我的傳奇色彩正在改變，但餅圖顏色並沒有改變。 – Rohitesh 2017-09-08 10:14:13

我認爲你需要做的是設置使用的主題，而不是setOptions顏色什麼如下：

Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', 
          '#64E572', '#FF9655', '#FFF263', '#6AF9C4']});

來源

2012-04-04 13:35:22 Linger

如果你去[餅圖演示]（http://www.highcharts.com/demo/pie-basic/grid），然後點擊'查看視覺主題'，你會看到如何操縱整個主題。 – Linger 2012-04-04 13:41:51

嗨託德顏色不改變使用你的上述代碼.still它顯示餅圖的默認顏色 – 2012-04-05 05:34:04

Highcharts.setOptions({ 
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326',  '#6AF9C4'] 
});

來源

2013-07-30 18:12:01 min2bro

是否有一個網頁這就是說每個「顏色」對應什麼？所有的答案在這裏顯示是這樣的：

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']

但什麼＃333，＃CB2326，等真正改變？很明顯，我可以改變它們，看看有什麼變化，但是可以在某處找到這個參考。

來源

2016-08-05 16:59:21

我有同樣的問題。在highcharts.css中有一個名爲「默認顏色」的部分。刪除本節後，我可以使用自定義顏色。無論如何，如果你使用V5.0.4或更高版本，我想你不需要highcharts.css。

來源

2016-11-25 11:23:55 bugovicsb

Highcharts.Color（Highcharts.getOptions（）。顏色[0]）。setOpacity（0.5）獲得（ 'RGBA'）]

在高圖表內置顏色我們有。所以你需要改變顏色的路徑[0]或[1] ........ [6]

來源

2017-02-10 12:51:06 Kondal

對於那些你喜歡初始化在configs的顏色，你可以簡單地把色彩的配置對象的plotOptions部分，像這樣：

..., 
plotOptions: { 
    pie: { 
    colors: [ 
    '#50B432', 
    '#ED561B', 
    '#DDDF00', 
    '#24CBE5', 
    '#64E572', 
    '#FF9655', 
    '#FFF263', 
    '#6AF9C4' 
    ], 
    allowPointSelect: true, 
    cursor: 'pointer', 
    dataLabels: { 
    enabled: false 
    }, 
    showInLegend: true 
} 
}, 
...

來源

2017-05-01 00:00:43

要回答@Loko網頁設計的問題https://stackoverflow.com/a/38794379/7475250

是否有一個網頁說明每個「顏色」對應的內容？這裏的所有答案都顯示如下：
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4'] 
但是＃333，＃CB2326等實際上會發生什麼變化？很明顯，我可以只是改變它們，看看有什麼變化，但它很高興有這個參考可用的地方。

顏色文檔可用here。儘管有幫助，但它們沒有描述實際改變某種特定顏色的方式。以下是我最好的描述。

顏色prop給Highcharts您希望圖表循環通過的顏色。例如，如果你有以下顏色道具。

colors: ['blue', 'green']

你的餡餅切片會在藍色和綠色之間交替。然後將藍色變爲紅色，然後您的顏色會在紅色和綠色之間切換。用以下方法測試fiddle

展開顏色列表可增加重複前的顏色數量。

colors: ['blue', 'green', 'yellow']

如果超過4個切片在您的數據集中，會重複顏色。

來源

2017-09-26 19:28:05 BJax

如何更改我的高圖餅圖的顏色？

回答

相關問題