19

我正在尝试根据每个系列的类型动态定义颜色。下面是我的代码，它不起作用，但显示了我正在尝试做的事情。我想为某些类型定义颜色，例如：

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

我不能指望 ret 会有所有类型，所以我需要知道在 ret 中返回了哪些类型，然后将颜色与某种类型相关联。

怎么做？

这是收到数据后的代码：

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


}
4

4 回答 4

41

对于饼图，您必须在内部设置切片颜色data。
而且您必须使用点name而不是意式类型，意式类型将始终是"pie".

为此，您可以使用 javascript 对象表示法来存储每个系列将具有的颜色。
它比使用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']
        }
    ]
}]

你可以看到它在这里工作。

于 2012-12-14T16:37:33.080 回答
0

您在那里的return语句是从传递给each函数的函数返回的，而不是颜色函数。此外，在 JavaScript 中不需要为此使用 switch case。

编辑：尝试这样的事情

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]
}]

从您的代码中并不清楚它是什么ret，所以我不确定上面的代码是否有效，但它应该让您大致了解它是如何完成的。

于 2012-12-14T08:56:27.427 回答
0

为什么在将数据系列推送到图表时不设置颜色属性？在没有看到您用于构建系列对象的情况下，我只能提供一些伪代码：

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

本质上，您预处理数据系列元素。有关显式格式，请参阅此问题。您可以设置color系列的属性 - 您不必依赖默认的 HighCharts 颜色列表或自定义颜色列表，如另一个答案中所述。请注意，该color属性未在 HighCharts API参考中列出，但您可以使用它。

于 2012-12-14T13:57:51.897 回答
-1

我使用 Highcharts 没有提供任何颜色属性，因为它使用自己的库来自动选择颜色。在下面使用，希望它对你有用

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

我们可以通过设置 highchart 自定义颜色setOption function

Highcharts.setOptions({
  colors: ['#F64A16', '#0ECDFD', '#FFF000']
});
于 2012-12-14T10:12:46.973 回答