为 fusioncharts 多级饼图的最后一层添加标签

Question

我正在尝试为类别的最后一级生成标签...

这就是我要找的...

为您创建JsFiddle

var Cdata={"data":[{"label":"2010","value":"702600","color":"#FF8B3C","category":[{"label":"Public","value":"340394","color":"#FF8B3C","category":[{"label":"Single","value":"91787","color":"#FF8B3C","category":null},{"label":"Married","value":"85787","color":"#FF8B3C","category":null},{"label":"Divorced","value":"77464","color":"#FF8B3C","category":null},{"label":"Widow","value":"85356","color":"#FF8B3C","category":null}]},{"label":"Private","value":"362206","color":"#FF8B3C","category":[{"label":"Single","value":"102443","color":"#FF8B3C","category":null},{"label":"Married","value":"77220","color":"#FF8B3C","category":null},{"label":"Divorced","value":"85393","color":"#FF8B3C","category":null},{"label":"Widow","value":"97150","color":"#FF8B3C","category":null}]}]},{"label":"2011","value":"746880","color":"#A5AC0F","category":[{"label":"Public","value":"358315","color":"#A5AC0F","category":[{"label":"Single","value":"86968","color":"#A5AC0F","category":null},{"label":"Married","value":"92456","color":"#A5AC0F","category":null},{"label":"Divorced","value":"83679","color":"#A5AC0F","category":null},{"label":"Widow","value":"95212","color":"#A5AC0F","category":null}]},{"label":"Private","value":"388565","color":"#A5AC0F","category":[{"label":"Single","value":"100185","color":"#A5AC0F","category":null},{"label":"Married","value":"94838","color":"#A5AC0F","category":null},{"label":"Divorced","value":"96399","color":"#A5AC0F","category":null},{"label":"Widow","value":"97143","color":"#A5AC0F","category":null}]}]},{"label":"2012","value":"789482","color":"#83E0FF","category":[{"label":"Public","value":"383454","color":"#83E0FF","category":[{"label":"Single","value":"104390","color":"#83E0FF","category":null},{"label":"Married","value":"89375","color":"#83E0FF","category":null},{"label":"Divorced","value":"96117","color":"#83E0FF","category":null},{"label":"Widow","value":"93572","color":"#83E0FF","category":null}]},{"label":"Private","value":"406028","color":"#83E0FF","category":[{"label":"Single","value":"99938","color":"#83E0FF","category":null},{"label":"Married","value":"93399","color":"#83E0FF","category":null},{"label":"Divorced","value":"115378","color":"#83E0FF","category":null},{"label":"Widow","value":"97313","color":"#83E0FF","category":null}]}]},{"label":"2013","value":"705560","color":"#ff9999","category":[{"label":"Public","value":"354781","color":"#ff9999","category":[{"label":"Single","value":"98333","color":"#ff9999","category":null},{"label":"Married","value":"87342","color":"#ff9999","category":null},{"label":"Divorced","value":"77118","color":"#ff9999","category":null},{"label":"Widow","value":"91988","color":"#ff9999","category":null}]},{"label":"Private","value":"350779","color":"#ff9999","category":[{"label":"Single","value":"102129","color":"#ff9999","category":null},{"label":"Married","value":"79801","color":"#ff9999","category":null},{"label":"Divorced","value":"81731","color":"#ff9999","category":null},{"label":"Widow","value":"87118","color":"#ff9999","category":null}]}]},{"label":"2014","value":"738714","color":"#e580ff","category":[{"label":"Public","value":"350028","color":"#e580ff","category":[{"label":"Single","value":"69093","color":"#e580ff","category":null},{"label":"Married","value":"100824","color":"#e580ff","category":null},{"label":"Divorced","value":"89057","color":"#e580ff","category":null},{"label":"Widow","value":"91054","color":"#e580ff","category":null}]},{"label":"Private","value":"388686","color":"#e580ff","category":[{"label":"Single","value":"92575","color":"#e580ff","category":null},{"label":"Married","value":"105411","color":"#e580ff","category":null},{"label":"Divorced","value":"86773","color":"#e580ff","category":null},{"label":"Widow","value":"103927","color":"#e580ff","category":null}]}]},{"label":"2015","value":"726130","color":"#9999ff","category":[{"label":"Public","value":"348346","color":"#9999ff","category":[{"label":"Single","value":"84893","color":"#9999ff","category":null},{"label":"Married","value":"92005","color":"#9999ff","category":null},{"label":"Divorced","value":"81349","color":"#9999ff","category":null},{"label":"Widow","value":"90099","color":"#9999ff","category":null}]},{"label":"Private","value":"377784","color":"#9999ff","category":[{"label":"Single","value":"88107","color":"#9999ff","category":null},{"label":"Married","value":"94300","color":"#9999ff","category":null},{"label":"Divorced","value":"101897","color":"#9999ff","category":null},{"label":"Widow","value":"93480","color":"#9999ff","category":null}]}]}]};
FusionCharts.ready(function () {
    var topProductsChart = new FusionCharts({
        type: 'multilevelpie',
        renderAt: 'chart-container',
        id : "myChart",
        width: '500',
        height: '500',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of Top Products Sold",
                "subCaption": "Last Quarter",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "baseFontColor" : "#333333",
                "baseFont" : "Helvetica Neue,Arial",   
                "basefontsize": "9",
                "subcaptionFontBold": "0",
                "bgColor" : "#ffffff",
                "canvasBgColor" : "#ffffff",
                "showBorder" : "0",
                "showShadow" : "0",
                "showCanvasBorder": "0",
                "pieFillAlpha": "60",
                "pieBorderThickness": "2",
                "hoverFillColor": "#cccccc",
                "pieBorderColor": "#ffffff",
                "useHoverColor": "1",
                "showValuesInTooltip": "1",
                "showPercentInTooltip": "0",
                "numberPrefix": "$",
                "plotTooltext": "$label, $$valueK, $percentValue"
            },
            "category": Cdata.data
        }
    });

    topProductsChart.render();
});

建议我们如何为最后一层画线。

Answer 1

您可以使用FusionCharts提供的标注功能为外圈画线并添加标签值。查看 this link to know more 关于注释的信息。

您可以在此更新的JSFiddle 中查看实现示例。

这是上面 JSFiddle 中用于注释的代码：

"annotations": {
    "groups": [{
      "items": [{
          "id": "line1",
          "type": "line",
          "x": "$chartCenterX + 205",
          "y": "$chartCenterY - 50",
          "toX": "$chartCenterX + 240",
          "toY": "$chartCenterY - 80",
        },
        {
          "id": "linelabel1",
          "type": "text",
          "x": "$chartCenterX + 245",
          "y": "$chartCenterY - 88",
          "text": "22.76%",
          "fontSize": "11"
        }
      ]
    }]
 }