2013-01-25 221 views
2

是有可能重繪餅圖(highcharts.com),在橢圓形的形狀,如該圖所示enter image description here重繪餅圖中橢圓形狀highcharts

以及在右側的陰影樣的東西。

我想這顯示代碼

// Radialize the colors 
      Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) { 
       return { 
        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 }, 
        stops: [ 
         [0, color], 
         [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken 
        ] 
       }; 
      }); 

但沒有太大的變化,這裏是的jsfiddle http://jsfiddle.net/jhAD8/

請看看,

回答

0

更新:支持3D圖表。要獲得您正在查找的圖表,您可以在3D餅圖中設置β角旋轉。演示:http://jsfiddle.net/41004emr/

$(function() { 
 
    $('#container').highcharts({ 
 
     chart: { 
 
      type: 'pie', 
 
      options3d: { 
 
       enabled: true, 
 
       alpha: 0, 
 
       beta: 45 
 
      } 
 
     }, 
 
     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, 
 
       dataLabels: { 
 
        enabled: true, 
 
        format: '{point.name}' 
 
       } 
 
      } 
 
     }, 
 
     series: [{ 
 
      type: 'pie', 
 
      name: 'Browser share', 
 
      data: [ 
 
       ['Firefox', 45.0], 
 
       ['IE', 26.8], 
 
       ['Chrome',12.8], 
 
       ['Safari', 8.5], 
 
       ['Opera', 6.2], 
 
       ['Others', 0.7] 
 
      ] 
 
     }] 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts-3d.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

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