如何减少 FusionCharts 饼图周围的填充？答案

【问题标题】：How do I reduce the padding around a FusionCharts pie chart?如何减少 FusionCharts 饼图周围的填充？
【发布时间】：2016-02-24 11:30:50
【问题描述】：

我想让一个饼图填充一个方形图表区域，目前我无法让它使用超过 ~50% 的区域，它周围有很多灰色空间。我试过设置margin 和spacing 属性，但没有区别。

有没有办法减少饼图和灰色框之间的填充？

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>

【问题讨论】：

标签： fusioncharts

【解决方案1】：

默认情况下，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();
});

【讨论】：

嘿，你能告诉我如何用仪表图做同样的事情吗？

【解决方案2】：

这似乎只是部分答案。如果要在图表上显示饼图值，有两个问题：

值无法在图表内显示。没有办法吗？和
显示在图表外的值在值和图表之间有大量的填充。有什么方法可以减少这个空间吗？

【讨论】：

不支持将值放在饼图切片中。虽然您可以通过 labelDistance 属性中的负值强制它。但请记住，如果您旋转饼图，标签将会移位。它是一种部分破解。您应该查找 Pie 的 attribute 部分。您可以获得很多见解。