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

您好！我们正在尝试使用完全相同的颜色绘制这些图形：

我们有这个代码生成de图，但它不采用我们想要的自定义颜色。换句话说，我们尝试添加我们的自定义颜色代码，但它似乎没有采取它们。 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是一个供您参考的小提琴。

Answer 2

可以为图表设置颜色 - for all series。

使用for a series时，可以通过设置颜色color by point来覆盖每个系列。对于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>