Question

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

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

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>

Answer 1

默认情况下，FusionCharts XT会自动计算图表的最佳拟合饼半径。但是如果你想强制执行一个自己的值，你可以使用属性＆＃34; pieRadius＆＃34;。该值是一个数字，表示图表的外半径。这里的文档中提到了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();
});

Answer 2

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

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

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

2 个答案: