highcharts: dynamically define colors in pie chart

问题:

I'm trying to dynamically define color for each seria depending of their type. Below is my code which doesn't work but showing what I'm trying to do. I would like to define colour for certain type eg:

if type = 'IS' then color =  '#FFCACA'

I cannot expect that ret will have all types so I need to know which types are returned in ret and then asociate color to certain type.

How to do that?

this is code since data received:

success: function (ret) {


    $(function () {
        var chart;
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'divPie_' + id,
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: true,
                    width: 350,
                    height: 350
                },
                title: {
                    text: refrigname
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                    percentageDecimals: 1
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Current selection',
                    color: (function () {
                            switch (ret.type) {
                                case 'AB': return '#C6F9D2'; 
                                case 'BC': return '#CCCCB3'; 
                                case 'CL': return '#CECEFF'; 
                                case 'CI': return '#FFCAFF'; 
                                case 'HB': return '#D0CCCD'; 
                                case 'ON': return '#FFCC99'; 
                                case 'PM': return '#FFCBB9'; 
                                case 'SR': return '#EAEC93'; 
                                case 'TS': return '#D7FBE6'; 
                                case 'IS': return '#FFCACA'; 
                                case 'FREE': return '#00FF00'; 
                            }
                    }),
                    data: (function () {
                        var arr = [];
                        $(ret).each(function () {
                            var labelname = "";
                            switch (this.type) {
                                case "AB": labelname = "Antibodies"; break;
                                case "BC": labelname = "Bacteria"; break;
                                case "CL": labelname = "Cell lines"; break;
                                case "CI": labelname = "Custom items"; break;
                                case "HB": labelname = "Hybridoma"; break;
                                case "ON": labelname = "Oligonucleotides"; break;
                                case "PM": labelname = "Plasmids"; break;
                                case "SR": labelname = "siRNA"; break;
                                case "TS": labelname = "Tissue samples"; break;
                                case "IS": labelname = "Isolates"; break;
                                case "FREE": labelname = "Free space"; break;
                            }
                            arr.push([labelname, this.cnt]);
                        })
                        return arr;
                    })()
                }]
            });
        });
    });


}

回答1:

For a pie chart you have to set the slice color inside data.
And you have to use the point name and not serie type, serie type will always be "pie".

For this you can use javascript object notation to store which color each serie will have.
It's fastar than use a switch.

var getColor = {
    'AB': '#C6F9D2',
    'BC': '#CCCCB3',
    'CL': '#CECEFF', 
    'CI': '#FFCAFF', 
    'HB': '#D0CCCD', 
    'ON': '#FFCC99', 
    'PM': '#FFCBB9', 
    'SR': '#EAEC93', 
    'TS': '#D7FBE6', 
    'IS': '#FFCACA', 
    'FREE': '#00FF00'
};

series: [{
    type: 'pie',
    name: 'Current selection',
    data: [
        {
            name: 'AB',
            y: 45.0,
            color: getColor['AB']
        }, {
            name: 'BC',
            y: 26.8,
            color: getColor['BC']
        }, {
            name: 'CL',
            y: 12.8,
            sliced: true,
            selected: true,
            color: getColor['CL']
        }, {
            name: 'CI',
            y: 8.5,
            color: getColor['CI']
        }, {
            name: 'HB',
            y: 6.2,
            color: getColor['HB']
        }, {
            name: 'ON',
            y: 0.7,
            color: getColor['ON']
        }
    ]
}]

You can see it working here.

回答2:

The return statement you have there is returning from the function being passed to the each function, not the color function. Also, there's no need to use a switch case for this in JavaScript.

EDIT: Try something like this

series: [{
    type: 'pie',
    name: 'Current selection',
    color: {
        'AB': '#C6F9D2',
        'BC': '#CCCCB3',
        'CL': '#CECEFF',
        'CI': '#FFCAFF',
        'HB': '#D0CCCD',
        'ON': '#FFCC99',
        'PM': '#FFCBB9',
        'SR': '#EAEC93',
        'TS': '#D7FBE6',
        'IS': '#FFCACA',
        'FREE': '#00FF00'
    }[this.type]
}]

It's not really clear from your code what ret is, so I'm not sure the above code works, but it should give you a rough idea of how it can be done.

回答3:

Why not set the color property when you push the data series to the chart? Without seeing what you are using to build your series object I can only provide some psuedo-code:

for each seriesItem in seriesList (
     set highcharts.series[seriesItem].name = seriesList[seriesItem].seriesTitle
     set highcharts.series[seriesItem].data = seriesList[seriesItem].data
     set highcharts.series[seriesItem].Note = seriesList[seriesItem].extraInfo
     set highcharts.series[seriesItem].color = switch (seriesList[seriesItem].type) {
                                case 'AB': return '#C6F9D2'; 
                                case 'BC': return '#CCCCB3'; 
                                case 'CL': return '#CECEFF'; 
                                case 'CI': return '#FFCAFF'; 
                                case 'HB': return '#D0CCCD'; 
                                case 'ON': return '#FFCC99'; 
                                case 'PM': return '#FFCBB9'; 
                                case 'SR': return '#EAEC93'; 
                                case 'TS': return '#D7FBE6'; 
                                case 'IS': return '#FFCACA'; 
                                case 'FREE': return '#00FF00'; 
                            }
     )

Essentially you preprocess the data series elements. See this question for explicit formatting. You can set the color property of a series - you do not have to depend on the default HighCharts color list or a custom color list as described in another answer. Note that the color property is not listed in the HighCharts API reference but you can use it.

回答4:

I use Highcharts without giving any color property as it is using their own library for auto select color. Use below, hope it will work for u

series: [{
type: 'pie',
name: 'Current selection',
data: [
       ['Name_1',  537],
       ['Name_2',  181],
       ['Name_3',  156]
]
}]

we can set highchart custom color by setOption function

Highcharts.setOptions({
  colors: ['#F64A16', '#0ECDFD', '#FFF000']
});