如何减少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饼图周围的填充量？

回答

相关问题