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


    })

私は最終的に、パイの各スライスに次のような増分クラスを持たせたいと考えています: - スライス-1 - スライス-2 - スライス-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 に答える