javascript - Flot 库中的饼图 - 如何按降序排列图例？

Question

我一直在使用 Flot js 库来创建饼图。但我无法弄清楚如何根据我正在计算的可变百分比按降序排列图表中的图例。这是我的代码。

legend: {
     show: true,
     noColumns: 1,
     labelFormatter: function(label, series) {
          var percent = Math.round(series.percent);
          var number= series.data[0][1]; 
          return("<div class=servicePieLabel val="+percent+"><span class=labelTitle>"+label+"</span><span class=labelPercent>"+ percent + '%</span></div>');
     }
 },

Answer 1

flot 确实提供了一个 sorted图例的属性。您可以将其设置为用于排序的自定义函数，但 flot 仅将项目的标签和颜色传递给它(而不是数据)，因此它最终对您的需要不是很有用。

如果不指定该函数，flot 将按系列项目顺序绘制。我对您的建议是简单地将您的数据预分类为正确的顺序。

给定的数据如下:

var d_pie = [
    { label: "Series1",  data: 10},
    { label: "Series2",  data: 30},
    { label: "Series3",  data: 110},
    { label: "Series4",  data: 70},
    { label: "Series5",  data: 80},
    { label: "Series6",  data: 20}
];

按数据值降序排序:

 d_pie.sort(function(a, b){
    return a.data < b.data ? 1 : -1;
 });

这是一个例子 fiddle .