Question

有没有办法可以更改此饼图代码中的颜色？如果没有，是否有一些我可以添加的代码可以让我为每个切片选择特定的颜色（最好是RGB或十六进制）？

谢谢！

爪哇：

$(function () {
// Create the chart
$('#container').highcharts({
    credits: {
        enabled: false
    },
    chart: {
plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Green Up Amount Recycled'
    },
    subtitle: {
        text: 'Click the Recycled Materials slice for more information.'
    },
   plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },
    series: [{
        name: "Materials",
        colorByPoint: true,
        data: [{
            name: "Landfill - 45,821 lbs",
            y: 23.73,
        }, {
            name: "Recycled Materials - 147,276 lbs",
            y: 76.27,
            drilldown: "Recycled Materials"
        }]
    }],
    drilldown: {
        series: [{
            name: "Recycled Materials",
            id: "Recycled Materials",
            data: [
                ["Tent Frames and Chairs - 6,400 lbs", 4.35],
                ["Aluminum Cans - 28,950 lbs", 19.66],
                ["Plastic PET Bottles - 36,420 lbs", 24.73],
                ["Glass - 40,950 lbs", 27.8],
                ["Cardboard - 30,000 lbs", 20.37],
                ["Solo Cups - 4,556 lbs", 3.09],
            ]
        }]
    }
});
});

HTML：

    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script src="http://code.highcharts.com/modules/data.js"></script>
    <script src="http://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 500px; max-width: 500px; height: 500px; margin: 0 auto"></div>

Answer 1

是的，你可以！

添加要在plotOptions：pie对象中显示的颜色的属性数组。

 plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true,
                colors: ['#00e500', '#004400']
            },

        },

你可以看到它在这里工作的一个例子： http://jsfiddle.net/jbs01j7k/

您可以在此处查看更多样式和其他选项： http://api.highcharts.com/highcharts#plotOptions.pie.colors

Javascript饼图颜色

1 个答案: