Highchartsカスタムカラー

Question

$(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(); 
 
    }); 
 
});

こんにちは！

私たちはグラフを生成するが、私たちが望むカスタムカラーをとらないこのコードを持っています。言い換えれば、私たちはカスタムカラーコードを追加しようとしますが、それらを取るようには見えません。あなたの助けやアイデアのためのTIA。

Answer 1

カラーパレットを配列として渡すだけで、色のセットを追加したり、既存の色を上書きしたりすることができます。ここで

は、画像から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です。

Answer 2

図表の色は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>