Highcharts - 增加一個類的名稱，以便餅圖切片可以在style.css中唯一地設置樣式

Question

我正在創建一個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/

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