融合图显示了甜甜圈图中的中心标签的百分比

Question

使用Fusion Charts脚本，我很容易将图表标签显示为百分比。但是，我需要在标签上显示值，并在甜甜圈图表的中心显示百分比。

Fusion Charts API似乎没有涵盖此选项。看来$ value和$标签是唯一可用的变量。

可以做到吗？

，如果我看上去我缺少明显的东西，则是设置的一些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();

Answer 1

我通过通过FusionCharts.js源代码扫描来偶然发现了答案。值为$百分比。

所需的一切都是设置" CenterLabel"：" $ percentValue

"centerLabel" : "$percentValue

此值设置在fusionCharts.js

Answer 2

您可以使用$百分位值以百分比显示值

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