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自定义颜色

回答

相关问题