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

问题描述 投票：0回答：2

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

  • 那么是否有用于 donut2d 图表切片厚度减少的 json 键？
  • 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
2个回答
3
投票

实际上 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

这是解决您问题的示例。

如果您还有任何疑问，请告诉我。 谢谢！

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>

0
投票

要自定义圆环图的内半径，请设置 donutRadius 属性的值（以百分比为单位）

{
      "chart": {
        "doughnutRadius": "80"
      }
    }

要了解有关此功能的更多信息，请参阅 - https://www.fusioncharts.com/dev/chart-guide/standard-charts/pie-and-doughnut-charts#set-the-radius-as-a-percent -价值

请参阅演示小提琴 - https://jsfiddle.net/c24e59hm/1/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.