flot.js:自定义图例

Question

如何在flot.pie.js上自定义图例？

我有以下代码：

var options = { 
            series: { 
                pie: {
                    show: true
                },
                legend: {
                    show: true,
                    label: {
                        show: true,
                        formatter: function(label, series){
                            return '<div style="font-size:8pt;text-align:center;padding:2px;">' + label + ' ' + Math.round(series.percent)+'%</div>';
                        }
                    }
                }
            }
        }; 

这是不起作用的，我想我是在编造传说部分...我想要的是显示图例上的值。我该怎么做呢？

Answer 1

只需将数据值添加到您的系列标签。您没有显示数据，所以假设您的数据是这样的：

var data = [
    {
    label: "Good",
    data: 10},
{
    label: "Bad",
    data: 30 },
{
    label: "Ugly",
    data: 90},
];

然后，您可以使用此代码将数据值附加到每个标签：

for (var i=0;i<data.length;i++){
    data[i].label+=' ('+data[i].data+')'
}

下面是它的外观：http://jsfiddle.net/ryleyb/p8fzS/

Answer 2

这对我来说很有效：

function legendFormatter(label, series) {
    return '<div ' + 
           'style="font-size:8pt;text-align:center;padding:2px;">' +
           label + ' ' + Math.round(series.percent)+'%</div>';
};

var options = { 
    series: { 
        pie: {
            show: true
        },
    },
    legend: {
        show: true,
        labelFormatter: legendFormatter
    }
};

工作示例链接：http://jsfiddle.net/Rnusy/322/