Question

我正在创建一个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'
                      ]
});


    })

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

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

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

Answer 1

设置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>';
    }
}

Highcharts - 增加类名，以便在style.css中对饼图切片进行唯一样式设置

1 个答案: