jquery - jqPlot 在饼图上显示百分比和值

Question

我正在使用 jqPlot 和 jqplot.PieRenderer 来尝试显示饼图。在我想展示的标签上value (percent)。文档说您可以传递dataLabel一个标签类型数组(source)，但是，将%d%%(for percent) 和%d(for value) 放入dataLabelFormatString选项中最终不会显示任何内容。

这里有什么想法吗？

{ 
    seriesDefaults: {
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: {
            showDataLabels: true,
            dataLabels: ['value', 'percent'],
            dataLabelFormatString: "%d %d%%",
            sliceMargin: 4,
            fill: false
        }
    }, 
    legend: { show:true, location: 'e' }
}

Answer 1

我阅读这些文档的方式略有不同。它是选项“值”、“百分比”、“标签”或标签数组。不是一系列选项。要执行您想要的操作，您需要将数据标签创建为真正的标签数组。

例如：

data = [
    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
];

var total = 0;
$(data).map(function(){total += this[1];})

myLabels = $.makeArray($(data).map(function(){return this[1] + " " + Math.round(this[1]/total * 100) + "%";}));

请参阅此处的示例小提琴。

Answer 2

采用

 formatter: function(label, series){
                        return '<div style="font-size:14pt;text-align:center;padding:2px;color:white;">'+Math.round(series.percent)+"%<br/>" + series.data[0][1] +'</div>';
                    },