0

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

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

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


    })

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

我有点让这个工作，但只有当图表调整大小时。我试图在加载事件中触发我的自定义函数，但没有任何反应。

我的小提琴：http: //jsfiddle.net/6PbbR/262/

4

1 回答 1

2

将 colorSlices() 设置为加载函数对我来说效果很好。

http://jsfiddle.net/6PbbR/274/ 

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

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

http://jsfiddle.net/6PbbR/280/

dataLabels: {
    formatter: function() {
        return '<span class="slice slice-'+(this.point.x+1)+'">' + 
        Highcharts.numberFormat(this.percentage,1,".",",") +' %</span>';
    }
}
于 2013-03-26T06:17:00.170 回答