个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 11:42:55 25 4
gpt4 key购买 nike

我正在尝试减少融合 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>

最佳答案

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

关于javascript - 如何减少融合 donut2d 图表切片厚度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41975466/

25 4 0
文章推荐： swift - MKMarkerAnnotationView 标题未绘制在 MKSnapShot 图像上
文章推荐： java - 避免缓存失败的操作
文章推荐： swift - SpriteKit - 暂停输入
文章推荐： swift - 禁用应用程序包中的右键单击
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com