jquery - 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/