Question

我在角度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数据

Answer 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>

如何在饼图中仅获取某些数据？

1 个答案: