如何減少FusionCharts餅圖周圍的填充量？

我想有一個餅圖填充一個正方形圖表區域，目前我無法使用該區域的面積超過50％，其周圍有很多灰色空間。我曾嘗試設置margin和spacing屬性，但它沒有區別。如何減少FusionCharts餅圖周圍的填充量？

有沒有辦法減少餅圖和灰色框之間的填充？

How do I remove all the grey space around this chart?

FusionCharts.ready(function() { 
 
    var demographicsChart = new FusionCharts({ 
 
    type: 'pie3d', 
 
    renderAt: 'chart-container', 
 
    width: '100%', 
 
    height: '100%', 
 
    dataFormat: 'json', 
 
    dataSource: { 
 
     chart: { 
 
     paletteColors: "#FFAE00,#1566EC,#82C309", 
 
     bgColor: "#ffffff", 
 
     use3DLighting: 1, 
 
     showShadow: 0, 
 
     enableSmartLabels: 0, 
 
     startingAngle: 90, 
 
     showLabels: 0, 
 
     showValues: 0, 
 
     showPercentValues: 0, 
 
     showLegend: 0, 
 
     pieSliceDepth: 20, 
 
     pieYScale: 70, 
 
     bgcolor: "EEEEEE,FFFFFF", 
 
     bgalpha: "100,100", 
 
     bgratio: "0,100", 
 
     bgangle: "90", 
 
     showBorder: 1, 
 
     borderColor: 1, 
 
     borderColor: "DDDDDD", 
 
     borderThickness: 1, 
 
     showToolTip: 0, 
 
     spacing: [0, 0, 0, 0], 
 
     margin: [0, 0, 0, 0], 
 
     animation: 0, 
 
     width: "100%", 
 
     height: "100%", 
 
     }, 
 
     "data": [{ 
 
     "label": "Not Started", 
 
     "value": 13 
 
     }, { 
 
     "label": "Complete", 
 
     "value": 9 
 
     }, { 
 
     "label": "In Progress", 
 
     "value": 33 
 
     }] 
 
    } 
 
    }); 
 
    demographicsChart.render(); 
 
});

body { 
 
    padding: 1em; 
 
} 
 
#chart-container { 
 
    width: 300px; 
 
    height: 300px; 
 
}

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script> 
 
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script> 
 
<div id="chart-container">FusionCharts will render here</div>

來源

2015-01-21 Andrew

默認情況下，FusionCharts的XT自動計算圖表的最適合的餡餅半徑。但是如果你想強制你自己的一個值，你可以使用屬性「pieRadius」。該值是代表圖表外半徑的數字。它在文檔http://docs.fusioncharts.com/tutorial-attr-pie3d.html中提到。

我已經創建了一個提高半徑的小提琴。讓我知道這是否有幫助。 http://jsfiddle.net/subramaniashiva/ZjyJT/7/

FusionCharts.ready(function() { 
var demographicsChart = new FusionCharts({ 
    type: 'pie3d', 
    renderAt: 'chart-container', 
    width: '100%', 
    height: '100%', 
    dataFormat: 'json', 
    dataSource: { 
     chart: { 
      paletteColors: "#FFAE00,#1566EC,#82C309", 
      bgColor: "#ffffff", 
      use3DLighting: 1, 
      showShadow: 0, 
      enableSmartLabels: 0, 
      startingAngle: 90, 
      showLabels: 0, 
      showValues: 0, 
      showPercentValues: 0, 
      showLegend: 0, 
      pieSliceDepth: 20, 
      pieYScale: 70, 
      bgcolor: "EEEEEE,FFFFFF", 
      bgalpha: "100,100", 
      bgratio: "0,100", 
      bgangle: "90", 
      showBorder: 1, 
      borderColor: "DDDDDD", 
      borderThickness: 1, 
      showToolTip: 0, 
      animation: 0, 
      width: "100%", 
      height: "100%", 
      pieRadius: 148 
     }, 
      "data": [{ 
      "label": "Not Started", 
       "value": 13 
     }, { 
      "label": "Complete", 
       "value": 9 
     }, { 
      "label": "In Progress", 
       "value": 33 
     }] 
    } 
}); 
demographicsChart.render(); 
});

來源

2015-01-22 07:39:35 siva

啊，這很好，謝謝。 – Andrew 2015-01-23 00:22:20

嘿，你能告訴我怎樣才能用量表來做同樣的事情？ – 2015-04-22 09:57:41

這似乎是隻有部分答案。如果要在圖表上顯示餅圖值，有兩個問題：

值不能在圖表內顯示。這有沒有辦法？和
在圖表外顯示的值在值和圖表之間有大量填充。有什麼方法可以減少這個空間嗎？

來源

2016-02-24 03:30:50 Steve

不支持在餅圖片內放置值。儘管可以通過labelDistance屬性中的負值強制執行此操作。但請記住，如果您旋轉餅圖，標籤將會被移位。它是一種局部破解。您應該查看Pie的[屬性]（http://www.fusioncharts.com/dev/chart-attributes.html?chart=pie2d）部分。你可以得到很多見解。 – pallabB 2016-02-24 07:34:07

如何減少FusionCharts餅圖周圍的填充量？

回答

相關問題