flot.js：自定义图例

如何自定义flot.pie.js上的图例？flot.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>'; 
         } 
        } 
       } 
      } 
     };

那不是工作，虽然，我认为我做了传说中的一部分......我想是显示在图例中的值。我怎样才能做到这一点？

来源

2013-02-15 luqita

对不起，大约4年后回应，..但上述问题的问题是在上面的代码'formatter'应该是'labelFormatter'。虽然接受的答案是正确的（从某种程度上来说，它操纵数据进行格式化），但另一个未被接受的答案似乎是最佳解决方案....您可以在问题中提及这个问题（对于像我这样的人在这个问题上绊倒）？谢谢！ – Arcanyx 2017-03-31 05:33:17

只需将数据值添加到您的系列标签。你没有显示你的数据，所以可想而知，你的数据是这样的：

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/

来源

2013-02-15 20:34:20 Ryley

这个工作对我来说：

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/

来源

2015-05-24 19:32:55

Thanks.Works也适合我。 – NotForFun 2016-03-12 15:50:05

flot.js：自定义图例

回答

相关问题