Highcharts自定義顏色

$(function() { 
 
    var chart = new Highcharts.Chart({ 
 
     chart: { 
 
      renderTo: 'emmisions2015', 
 
      type: 'pie' 
 
     }, 
 
     title: { 
 
      text: '' 
 
     }, 
 
     plotOptions: { 
 
      pie: { 
 
       innerSize: '60%' 
 
      } 
 
     }, 
 
     series: [{ 
 
      data: [ 
 
       ['Direct Emissions', 5], 
 
       ['Purchased Electricity', 15], 
 
       ['Transport', 40] 
 
       ]}] 
 
    }, 
 
    // using 
 
             
 
    function(chart) { // on complete 
 
     
 
     var xpos = '50%'; 
 
     var ypos = '53%'; 
 
     var circleradius = 102; 
 
    
 
    // Render the circle 
 
    chart.renderer.circle(xpos, ypos, circleradius).attr({ 
 
     fill: '#fff', 
 
    }).add(); 
 

 
    // Render the text 
 
    chart.renderer.text('2015', 370, 225).css({ 
 
      width: circleradius*2, 
 
      color: '#87868a', 
 
      fontSize: '23px', 
 
      textAlign: 'center' 
 
     }).attr({ 
 
      // why doesn't zIndex get the text in front of the chart? 
 
      zIndex: 999 
 
     }).add(); 
 
    }); 
 
});

您好！我們嘗試使用完全相同的顏色來繪製這些圖表：

我們有這段代碼可以生成de圖，但它不會採用我們想要的自定義顏色。換句話說，我們嘗試添加我們的自定義顏色代碼，但似乎並沒有採用它們。 TIA爲您提供幫助/想法。

來源

2017-08-28 Bastcri

非常感謝最後我們管理！ – Bastcri

只需將顏色調色板作爲數組傳遞，即可簡單地預先設置顏色集合或覆蓋現有顏色。

這裏是Highcharts

colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce','#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a']

從圖像默認的顏色，我可以說這些都是顏色你想

'#51b5ce', '#89c733', '#54a329'

現在只需將其添加到圖表

colors: ['#51b5ce', '#89c733', '#54a329','#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],

這將爲你工作。 Here是一個jsfiddle供您參考。

來源

2017-08-28 10:41:57 Strikers

可以爲圖表設置顏色 - for all series。

當使用color by point時，通過設置顏色for a series可以覆蓋每個系列。對於pie類型系列colorByPoint默認設置爲true。

$(function() { 
 
    var chart = new Highcharts.Chart({ 
 
     chart: { 
 
      renderTo: 'emmisions2015', 
 
      type: 'pie' 
 
     }, 
 
     title: { 
 
      text: '' 
 
     }, 
 
     plotOptions: { 
 
      pie: { 
 
       innerSize: '60%' 
 
      } 
 
     }, 
 
     series: [{ 
 
      colors: ['#f0f','#ff0','#0ff'], 
 
      data: [ 
 
       ['Direct Emissions', 5], 
 
       ['Purchased Electricity', 15], 
 
       ['Transport', 40] 
 
      ] 
 
     }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 

 
<div id="emmisions2015"></div>

來源

2017-08-28 10:53:51

感謝您的幫助！有很多方法可以實現這一點。我們終於成功了！ – Bastcri

Highcharts自定義顏色

回答

相關問題