仅使用 amCharts 饼图中的 5 个较高值？

Question

我的数据调用可能有很多我想忽略的小元素（百分比），我只需要 amCharts 饼图中的前 5 个。

这可以用 amCharts 完成吗？还是我应该先处理数据？

请看我的 [jsfiddle][1]

[1]: http://jsfiddle.net/pbarros/xznxbnc7/3/

谢谢

Answer 1

您可以使用 hideLabelsPercent property to set a threshold for the lowest allowed percentage you want a label for. If you want to do this dynamically, you can set this in the init event by finding the 5th largest percents value in the chart's chartData array 并将其用作您的 hideLabelsPercent 阈值。我已经更新了您的 handleInit 方法来执行此操作：

function handleInit(e) {
  if (e.chart.chartData.length > 5) {
    //sort the copy of the chartData array from largest to smallest
    //if your data is pre-sorted, then you can skip this step
    var sortedData = e.chart.chartData.slice().sort(function(lhs, rhs) {
      return rhs.percents - lhs.percents;
    });

    //set the threshold equal to the 5th largest slice's percents value so that the rest are hidden
    e.chart.hideLabelsPercent = sortedData[4].percents;

    //redraw the chart
    e.chart.validateNow();
  }
}

已更新 fiddle：http://jsfiddle.net/xznxbnc7/9/

编辑因为我看错了问题

如果您只想显示数据集中的前五个切片，您可以在后端进行过滤或使用 init 方法对 dataProvider 进行排序和修改，使其仅包含前五个切片。

function handleInit(e) {
  if (e.chart.chartData.length > 5) {
    //sort the copy of the chartData array from largest to smallest
    //if your data is pre-sorted, then you can skip this step
    var sortedData = e.chart.dataProvider.slice().sort(function(lhs, rhs) {
      return rhs[e.chart.valueField] - lhs[e.chart.valueField];
    });

    //only put in the top 5.
    e.chart.dataProvider = sortedData.slice(0, 5);

    // redraw the chart
    e.chart.validateData();
  }
}

Fiddle: http://jsfiddle.net/g3cchyjg/1

仅使用 amCharts 饼图中的 5 个较高值？

Use only the 5 higher values in amCharts pie?

json

amcharts