2014-04-28 83 views
0

我有一個三維餅圖使用highchart插件,我希望把邊界中的每個部分,所以我把以下內容:如何在3d餅圖高圖上設置邊界?

borderWidth: 4, 
borderColor: "red" 

plotOptions: pie:。但恐怕這些部分的邊框顏色與填充的顏色相同。

有什麼辦法可以做到這一點?我不介意邊界是否是白色,但我需要區分這些部分。

這裏是一個的jsfiddle在那裏你可以嘗試:http://jsfiddle.net/qRvn2/

JS

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'pie', 

      options3d: { 
       enabled: true, 
       alpha: 45, 
       beta: 0 
      } 
     }, 
     title: { 
      text: 'Browser market shares at a specific website, 2014' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       depth: 35, 
       borderWidth: 4, 
       borderColor: "red", 
       dataLabels: { 
        enabled: true, 
        format: '{point.name}' 
       } 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: [ 
       ['Firefox', 45.0], 
       ['IE',  26.8], 
       { 
        name: 'Chrome', 
        y: 12.8, 
        sliced: true, 
        selected: true 
       }, 
       ['Safari', 8.5], 
       ['Opera',  6.2], 
       ['Others', 0.7] 
      ] 
     }] 
    }); 
}); 

HTML

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/highcharts-3d.js"></script> 

<div id="container" style="height: 400px"></div> 

回答

0

我想你可以遍歷點的圖表被初始化之後並設置筆畫屬性

$.each(chart.series[0].data, function(i, point) { 
     point.graphic.attr({ 
      stroke: '#000000' 
     }); 
    }); 

檢查小提琴:http://jsfiddle.net/qRvn2/3/

UPDATE:

這裏有一個問題,我看到懸停在事件發生後重繪他們回來。也許如果你可以在這樣的事件上添加監聽器並將它們重新繪製回你的風格。需要思考....

+0

安德烈你權不工作,只在不工作的第一time..after工作 –