Highcharts甜甜圈圖表沒有內餡餅？

我一直在尋找解決方案，用Highcharts庫生成最簡單的圓環圖。但是，所有Highcharts的例子都顯示了內部派和外部甜甜圈的圖表風格（參考：http://www.highcharts.com/demo/pie-donut）Highcharts甜甜圈圖表沒有內餡餅？

如何才能擺脫內部派，並保持外部甜甜圈，就像其他圖書館一樣？（類似於RGraph：http://www.rgraph.net/examples/donut.html）

謝謝。

來源

2012-07-26 Jonathan Chen

你只需要提供數據作爲兩個元素（鍵/值）數組的數組。指定innerSize以獲得甜甜圈樣式。

那麼您的參數將包含這樣的事情：

... 
data: [["Firefox",6],["MSIE",4],["Chrome",7]], 
innerSize: '20%', 
...

這裏有一個jsFiddle of a complete example。

來源

2012-07-26 22:35:31 andypaxo

謝謝+1，這個偉大的工程 – 2013-01-14 18:49:31

謝謝，這是簡單和聰明！ – 2013-02-01 23:38:50

謝謝。它幫助我很多！ – 2013-06-19 08:49:06

**I hope this example of highchat will solve your problum 

http://jsfiddle.net/e2qpa/3/ 

$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'pie' 
     }, 

     plotOptions: { 
      pie: { 
       borderColor: '#000000', 
       innerSize: '60%' 
      } 
     }, 
     series: [{ 
      data: [ 
       ['Firefox', 44.2], 
       ['IE7', 26.6], 
       ['IE6', 20], 
       ['Chrome', 3.1], 
       ['Other', 5.4] 
       ]}] 
    }, 
    // using 

    function(chart) { // on complete 

     var xpos = '50%'; 
     var ypos = '53%'; 
     var circleradius = 102; 

    // Render the circle 
    chart.renderer.circle(xpos, ypos, circleradius).attr({ 
     fill: '#ddd', 
    }).add(); 

    // Render the text 
    chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({ 
      width: circleradius*2, 
      color: '#4572A7', 
      fontSize: '16px', 
      textAlign: 'center' 
     }).attr({ 
      // why doesn't zIndex get the text in front of the chart? 
      zIndex: 999 
     }).add(); 
    }); 
});

來源

2012-12-07 05:51:27

這是最高的搜索結果，給出的答案對我無效。我需要對數據點的更多控制，而不僅僅是一組簡單的數組。我需要使用JSON對象來配置其他選項，如特定數據的顯式顏色。我通過一些研究發現，您根本不需要修改數據格式。爲了將餅圖製作成甜甜圈圖表，您只需在數據系列中設置一個大於0的innerSize值。

從highcharts文檔：

innerSize：內徑爲餡餅的尺寸。大於0的大小呈現甜甜圈圖表。可以是百分比或像素值。百分比與餅圖大小有關。像素值以整數形式給出。

所以，你可以得到一個簡單的圓環圖與像以下數據：

 series: [{ 
      innerSize: '30%', 
      data: [ 
       {name: 'Yellow Slice', y: 12, color: 'yellow'}, 
       {name: 'Red Slice', y: 10, color: 'red' }, 
       {name: 'Blue Slice', y: 33, color: 'blue'}, 
       {name: 'Green Slice', y: 20, color: 'green'} 
      ] 
     }]

JS Fiddle

來源

2017-02-26 20:29:52

Highcharts甜甜圈圖表沒有內餡餅？

回答

相關問題