如何减少融合donut2d图表切片厚度?

时间:2017-02-01 08:51:31

标签: javascript html fusioncharts

我正在尝试减少融合donut2d图表切片厚度。检查下面的图像,我已经减少了绿色切片的厚度,但我想用实际的方法为所有切片做。

  • 那么donut2d图表切片厚度是否有任何json键减少?
  • 可以在Fusionchart中使用吗?如果是,那么请指导我。

enter image description here

<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>

1 个答案:

答案 0 :(得分:3)

实际上,甜甜圈的内半径可以用属性&#34; doughnutRadius&#34;来控制。

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();
});

以下是解决问题的This answer

如果您有任何进一步的顾虑,请与我们联系。 谢谢!

&#13;
&#13;
<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>
&#13;
For i = 1 To rowcounter
For j = 1 To 5


ActiveWorkbook.Sheets(1).Cells(i + totalrows, j).Value = pole(i, j)


Next j

For j = 6 To 9
ActiveWorkbook.Sheets(1).Cells(i + totalrows, j).Value = CDbl(pole(i, j))
Next j

Next i
&#13;
&#13;
&#13;