如何仅获取饼图amcharts中的某些数据？答案

【问题标题】：How to get only certain data in pie amcharts?如何仅获取饼图amcharts中的某些数据？
【发布时间】：2018-05-18 09:32:46
【问题描述】：

我在角度 2 中使用 Amcharts。我正在显示一个饼图，并且数据以百分比显示。但是我想根据用户选择的百分比显示数据。就像用户输入 50，我想显示 50% 以上的数据。有人可以帮忙吗？

以下是我的代码示例。

this.supplierChart = this.AmCharts.makeChart("suppchartdiv", {
   "hideCredits":true,
   "title": 'Supplier Share',
   "type": "pie",
   "theme": "none",
   "dataProvider": supp_data,
   "labelText": "",
   "valueField": "quantity",
   "titleField": "Supplier",
   "balloon":{
   "fixedPosition":true
  },
  "export": {
    "enabled": true
  }
});

这里的 supp_data 是一些用于图表输入的 JSON 数据

【问题讨论】：

只过滤 supp_data 并渲染图表
@ShivajiVarma 过滤数据会导致重新分配新数据。因此，价值观正在发生变化。我不希望这种情况发生。我们能避免这种情况吗？即使在过滤后我也想显示原始百分比

标签： javascript angular typescript pie-chart amcharts

【解决方案1】：

如果您想简单地隐藏低于阈值的切片，请在图表中设置 alphaField，然后遍历图表的 chartData 数组并检查 percents 属性并有选择地将切片的 alphaField 属性设置为如果它低于用户的阈值，则为 0。例如：

  var thresholdValue = /* get value from user somewhere */
  if (!thresholdValue) {
    chart.dataProvider.forEach(function(dataItem) {
      dataItem[chart.alphaField] = 1;
    })
  }
  else {
    chart.chartData.forEach(function(dataItem, idx) {
      if (dataItem.percents <= thresholdValue) {
        dataItem.dataContext[chart.alphaField] = 0;
        // or
        // chart.dataProvider[idx][chart.alphaField] = 0;
      }
    })
  }
  chart.validateData(); //update chart

如果您使用的是 angular 插件，您可能会将此逻辑包装在 updateChart 回调中。

Vanilla JS 演示如下：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [{
    "country": "Lithuania",
    "litres": 501.9
  }, {
    "country": "Czech Republic",
    "litres": 301.9
  }, {
    "country": "Ireland",
    "litres": 201.1
  }, {
    "country": "Germany",
    "litres": 165.8
  }, {
    "country": "Australia",
    "litres": 139.9
  }, {
    "country": "Austria",
    "litres": 128.3
  }, {
    "country": "UK",
    "litres": 99
  }, {
    "country": "Belgium",
    "litres": 60
  }, {
    "country": "The Netherlands",
    "litres": 50
  }],
  "alphaField": "alpha",
  "valueField": "litres",
  "titleField": "country",
  "balloon": {
    "fixedPosition": true
  }
});

document.getElementById("update").addEventListener('click', function() {
  var thresholdValue = +document.getElementById('percent').value;
  if (!thresholdValue) {
    chart.dataProvider.forEach(function(dataItem) {
      dataItem[chart.alphaField] = 1;
    })
  }
  else {
    chart.chartData.forEach(function(dataItem, idx) {
      if (dataItem.percents <= thresholdValue) {
        dataItem.dataContext[chart.alphaField] = 0;
        // or
        // chart.dataProvider[idx][chart.alphaField] = 0;
      }
      else {
        dataItem.dataContext[chart.alphaField] = 1;
      }
    })
  }
  chart.validateData(); 
});

#chartdiv {
  width: 100%;
  height: 300px;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/pie.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
<label>Filter percent value: <input type="text" id="percent"></label><button id="update">Update</button>

【讨论】：

您的解决方案存在一个问题。如果多次给出该值，则图表显示不同。能说说怎么解决吗？
我假设您的意思是如果后续值小于第一个值，它不会取消隐藏隐藏点？我在演示中添加了一个 else 子句。如果这没有帮助，您能否通过解释这些步骤来澄清问题所在。
我通过添加一个 else 子句让它工作了......很抱歉我忘了在那之后删除我的评论。