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：自定義圖例

回答

相關問題