fusioncharts - 如何减少 FusionCharts 饼图周围的填充？

Question

我想让饼图填充方形图表区域，目前我无法让它使用超过 ~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>

Answer 1

默认情况下，FusionCharts XT 自动计算图表的最佳拟合饼图半径。但如果您想强制执行自己的值之一，可以使用属性“pieRadius”。该值是一个数字，表示图表的外半径。这里的文档中提到了它 http://docs.fusioncharts.com/tutorial-attr-pie3d.html .

我为你制作了一把半径更大的 fiddle 。让我知道这是否有帮助。 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();
});