jquery 融合图表在圆环图中将百分比显示为中心标签

jhkqcmku  于 2023-05-28  发布在  jQuery
关注(0)|答案(2)|浏览(197)

使用Fusion Charts脚本,我可以轻松地将图表标签显示为百分比。但是,我需要在标签上显示值,并在环形图的中心显示百分比。
Fusion Charts API似乎不包含此选项。$value和$label是唯一可用的变量。
有可能做到这一点吗?
下面是一些jquery的设置,如果它看起来像我错过了一些明显的东西:

$.each(jsonDataPoints, function (index, obj) {
        var hoverText = obj.label + " (" + obj.value + ")";
        //obj.toolText = hoverText; //This sets the text to display when a pie chart is hovered.
        //obj.displayValue = hoverText; //This sets the chart labels.
        obj.displayValue = obj.value; //This sets the chart labels.
        obj.centerLabel = obj.percentValue;//percentValue is not an object. Just a guess
    });

    var doughnutChart = new FusionCharts({
        type: 'doughnut2D',
        renderAt: containerId,
        registerWithJS: '1',
        dataFormat: 'json',
        "width": "100%",
        "height": "100%",
        dataSource: {
            "chart": {
                "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": "...",
                "centerLabel": "$value",
                "centerLabelBold": "1",
                "showTooltip": "1",
                "decimals": "0",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "useDataPlotColorForLabels": "1",
                "labelDistance": "-20",
                "baseFontSize": "13",
            },
            "data": jsonDataPoints
        }
    });

    doughnutChart.render();
bnl4lu3b

bnl4lu3b1#

通过浏览fusioncharts.js源代码,我偶然发现了这个问题的答案。值为$percentValue。
所有需要做的就是设置“centerLabel”:“$percentValue

"centerLabel" : "$percentValue

此值在fusioncharts.js的“_parseValues”函数中设置

wd2eg0qa

wd2eg0qa2#

可以使用$percentValue以百分比形式显示值

{
  "chart": {
    "defaultCenterLabel": "Total revenue: $60K",
    "centerLabel": "$percentValue"
  }
}

参考代码-

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'doughnut2d',
    renderAt: 'chart-container',
    width: '550',
    height: '450',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Split of Revenue by Product Categories",
        "subCaption": "Last year",
        "numberPrefix": "$",
        "bgColor": "#ffffff",
        "startingAngle": "310",
        "showLegend": "1",
        
        // Configure centerlabel in percentage
        "defaultCenterLabel": "Total revenue: $64.08K",
        "centerLabel": "$percentValue",
        "centerLabelBold": "1",
        "showTooltip": "0",
        "labelFontColor": "#ffffff",
        "decimals": "0",
        "theme": "fusion",
        "valuePosition": "inside",
        "minAngleForValue": "75",
        "enablesmartLabel": "0"

      },
      "data": [{
          "label": "Food",
          "value": "28504"
        },
        {
          "label": "Apparels",
          "value": "14633"
        },
        {
          "label": "Electronics",
          "value": "10507"
        },
        {
          "label": "Household",
          "value": "4910"
        }
      ]
    }
  }).render();
});

JSFiddle

相关问题