如何减少融合 donut2d 图表切片厚度？答案

【问题标题】：How to reduce fusion donut2d chart slice thickness?如何减少融合 donut2d 图表切片厚度？
【发布时间】：2017-02-02 14:48:01
【问题描述】：

我正在尝试减少融合 donut2d 图表切片的厚度。检查下图，我已经手动减少了绿色切片的厚度，但我想对所有切片进行务实的操作。

那么有没有 json key 用于 donut2d 图表切片厚度减少？
可以在 Fusionchart 中使用吗？如果是，请指导我。

<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var revenueChart = new FusionCharts({
        "type": "doughnut2d",
        "renderAt": "chartContainer",
        "width": '450',
        "height": '450',
        "dataFormat": "json",
        "dataSource":  {
          "chart": {
                "caption": "Split of Revenue by Product Categories",
                "subCaption": "Last year",
                "numberPrefix": "$",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "use3DLighting": "0",
                "showShadow": "0",
                "enableSmartLabels": "0",
                "startingAngle": "310",
                "showPlotBorder": "1",
                "showLabels": "0",
                "showPercentValues": "1",
                "showLegend": "1",
                "legendShadow": "30",
                "legendBorderAlpha": "0",
                "defaultCenterLabel": "Total revenue: $64.08K",
                "centerLabel": "Revenue from $label: $value",
                "centerLabelBold": "1",
                "showTooltip": "0",
                "decimals": "1",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0"
            },
         "data": [
                {
                    "label": "Food",
                    "value": "12"
                }, 
                {
                    "label": "Apparels",
                    "value": "10"
                }, 
                {
                    "label": "Electronics",
                    "value": "20"
                }, 
                {
                    "label": "Household",
                    "value": "8"
                },
                {
                    "label": "Test",
                    "value": "5"
                }
            ]
      }

  });
revenueChart.render();
})
</script>
</head>
<body>
  <div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>

【问题讨论】：

标签： javascript html fusioncharts

【解决方案1】：

其实Donut的内半径可以通过属性“doughnutRadius”来控制。

doughnutRadius : Number [-]
This attribute lets you explicitly set the inner radius of the chart. FusionCharts XT automatically calculates the best fit radius for the chart. This attribute is useful if you want to enforce one of your own values.

Range: In Pixels

这里有一个Sample 来解决您的问题。

如果您有任何进一步的疑虑，请告诉我。谢谢！

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'doughnut2d',
        renderAt: 'chart-container',
        width: '450',
        height: '450',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of Revenue by Product Categories",
                "subCaption": "Last year",
                "numberPrefix": "$",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "use3DLighting": "0",
                "showShadow": "0",
                "enableSmartLabels": "0",
                "startingAngle": "310",
                "showLabels": "0",
                "showPercentValues": "1",
                "showLegend": "1",
                "legendShadow": "0",
                "legendBorderAlpha": "0",
                "defaultCenterLabel": "Total revenue: $64.08K",
                "centerLabel": "Revenue from $label: $value",
                "centerLabelBold": "1",
                "showTooltip": "0",
                "decimals": "0",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "doughnutRadius": "100"
            },
            "data": [
                {
                    "label": "Food",
                    "value": "28504"
                }, 
                {
                    "label": "Apparels",
                    "value": "14633"
                }, 
                {
                    "label": "Electronics",
                    "value": "10507"
                }, 
                {
                    "label": "Household",
                    "value": "4910"
                }
            ]
        }
    }).render();
});

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!-- Doughnut chart example with: 
# Center label in 2D chart 
# Disabled tool-tips are disabled, but extended center label info on hover

-->
<div id="chart-container">FusionCharts will render here</div>

【讨论】：