2017-02-01 62 views
1

我正試圖降低融合donut2d圖表切片厚度。檢查下面的圖片,我已經手動減少了綠片的厚度,但我想要切實地爲所有片做。如何減少融合donut2d圖切片厚度?

  • 那麼有沒有任何json鍵爲donut2d圖切片厚度減少?
  • 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> 

回答

2

事實上圓環的內半徑可與屬性 「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>

+1

完美,謝謝 –