Jquery Highcharts-增加一个类名，以便piechart切片可以在style.css中唯一地设置样式

我正在创建一个HighCharts饼图，并希望对每个切片进行更精细的样式控制——我希望浅色切片具有深色数据标签，反之亦然

因此，我希望能够使用style.css文件设置切片的样式。我在dataLabels设置中插入了一个类名（slice），外加一个自定义函数，用于循环遍历我的所有切片，并为它们提供唯一的类：

function colorSlices(chart) {
                var count = 1;
                $(".slice").each(function(){
                    $(this).addClass("slice-"+count);
                    count++;
                });
};

var chart;
    $(document).ready(function() {

        // Build the chart
        chart = new Highcharts.Chart({
            credits: { enabled: false },
            chart: {
                renderTo: 'container',
                exporting: { enabled: false },                
                events: {
                    redraw: function(event) {
                        colorSlices();
                    }
                },
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                shadow: true
                    },
            tooltip: {
                pointFormat: '',
                percentageDecimals: 1
            },
            legend: {
            useHTML: true,
            align: 'right',
            verticalAlign: 'middle',
            itemWidth: 260,
            borderColor: '#fff',
            width: 260,
            labelFormatter: function() {
                return '<div class="legend-item">' + this.name +'</div>';
                }
            },
            title: {
                text: ""
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    size:'100%',
                    cursor: 'pointer',
                    showInLegend: true,
                    shadow: true,
                    dataLabels: {
                        enabled: true,
                        distance: -40,
                        useHTML: true,
                        style: {
                                width: '100px'
                                },
                        color: '#fff',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<span class="slice">' + Highcharts.numberFormat(this.percentage,1,".",",") +' %</span>';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                 name: 'Income Investments',
                data: [
                    ['Other Industries',     19.3],
                    ['Media',   16.0],                                   
                    ['Materials',   13.6],
                    ['Software & Services', 10.2],
                    ['Retailing',    7.9],
                    ['Capital Goods',     6.5],
                    ['Healthcare Equipment & Services',     6.0],
                    ['Insurance',     5.7],
                    ['Technology Hardware & Equipment',     5.4],
                    ['Consumer Services',     4.8],
                    ['Telecommunication Services',     4.7]                    
                ]
            }],

        colors: [
                    '#132f55',
                    '#4d6d8a',
                    '#7f95aa',
                    '#b2bfcb',
                    '#d1dae2',
                    '#e5eaef',
                    '#7f7f7f',
                    '#9e9e9e',
                    '#c9c9c9',
                    '#bcbdc0',
                    '#eeefef'
                      ]
});


    })

函数颜色切片（图表）{
var计数=1；
$（“.slice”）.each（函数（）{
$（this.addClass（“切片-”+计数）；
计数++；
});
};
var图；
$（文档）.ready（函数（）{
//绘制图表
图表=新的高点图表。图表({
信用证：{已启用：错误}，
图表：{
renderTo:'容器'，
正在导出：{enabled:false}，
活动：{
重画：函数（事件）{
彩色切片（）；
}
},
plotBackgroundColor:null，
plotBorderWidth:null，
影子：错，
影子：对
},
工具提示：{
点格式：“”，
百分比小数：1
},
图例：{
是的，
对齐：“右”，
垂直排列：'中间'，
项目宽度：260，
边框颜色：“#fff”，
宽度：260，
labelFormatter:function（）{
返回“”+this.name+“”；
}
},
标题：{
案文：“”
},
打印选项：{
馅饼：{
allowPointSelect:true，
大小：'100%'，
光标：“指针”，
showInLegend：是的，
影子：没错，
数据标签：{
启用：对，
距离：-40，
是的，
风格：{
宽度：“100px”
},
颜色：“#fff”，
连接器颜色：'#000000'，
格式化程序：函数（）{
返回“”+Highcharts.numberFormat（此.percentage，1、“.”、“、”+“%”）；
}
}
}
},
系列：[{
键入“pie”，
名称：“收入投资”，
数据：[
[“其他行业”，19.3]，
[“媒体”，16.0]，
[“材料”，13.6]，
[《软件与服务》，10.2]，
[Retailing'，7.9]，
[“资本货物”，6.5]，
[《医疗设备与服务》，6.0]，
[“保险”，5.7]，
[“技术硬件和设备”，5.4]，
[“消费者服务”，4.8]，
[“电信服务”，4.7]
]
}],
颜色：[
"132f55",，
"4d6d8a",，
"7f95aa",，
"b2bfcb",，
#d12",，
"e5eaef",，
"7f7f7f",，
#9e9e9e",，
"c9c9c9",，
"bcbdc0",，
"eeefef"
]
});
})

我最终希望饼图中的每个部分都有增量类，如： -切片-1 -切片-2 -切片-3

我已经开始工作了，但只有当图表调整大小时。我试图在load事件中触发我的自定义函数，但什么也没发生

我的小提琴：

设置colorSlices（）作为加载函数对我来说很好

您还可以在格式化程序中使用这个.point.x来分配类。我相信这将完成同样的事情，并减轻对这些活动的需求

数据标签：{
格式化程序：函数（）{
返回“”+
Highcharts.numberFormat（此.percentage，1，“.”，“，”+“%”；
}
}

非常感谢——我自己已经做到了这一点，但是IE8中的效果不起作用，这让我抓狂。我注意到在我的重画事件之后，我丢失了“加载：彩色切片”。现在工作完美了！

events: {
    redraw: function(event) {
        colorSlices();
    },
    load: colorSlices
}

dataLabels: {
    formatter: function() {
        return '<span class="slice slice-'+(this.point.x+1)+'">' + 
        Highcharts.numberFormat(this.percentage,1,".",",") +' %</span>';
    }
}