简体   繁体   中英

Javascript Pie Chart Colors

Is there a way I can change the colors in this pie chart code? If not, is there some code I can add that would allow me to choose specific colors (preferably RGB or hex) for each slice of the pie?

JSFiddle: http://jsfiddle.net/hdbmuwa2/

Thanks!

Java:

$(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>

Yes you can!

Add a attribute array of the colors you want to displayed in the plotOptions:pie object.

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

        },

You can see an example of it working here: http://jsfiddle.net/jbs01j7k/

You can see more of the styling and other options here: http://api.highcharts.com/highcharts#plotOptions.pie.colors

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM