代码之家 › 专栏 › 技术社区 › Andrew

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

fusioncharts

2

Andrew · 技术社区 · 11 年前

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

2 回复 | 直到 11 年前

1

2

Siva 11 年前

默认情况下,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

0

Steve 10 年前

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

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