javascript - 如何在 pie amcharts 中只获取某些数据?

标签 javascript angular typescript pie-chart amcharts

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

最佳答案

如果您只想隐藏低于阈值的切片,请设置 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>

关于javascript - 如何在 pie amcharts 中只获取某些数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50408180/

相关文章:

forms - 设置初始值Angular 2 reactive formarray

javascript - ngFor 之后的 Angular 2 火灾事件

javascript - Bootstrap 3 的 TypeScript 类型定义

javascript - 如何在 Javascript/Typescript 中使用 Storyblok 电子邮件服务?

javascript - Typescript:代码看起来相同,但会产生错误

调用函数时,JavaScript 变量未在 onclick 按钮上定义

javascript - 如何在 angularjs 中隐藏和显示 HTML 元素?

node.js - 无法安装生成器-Angular2

javascript - 查询 UI 可拖动值检查

javascript - html5视频元素有什么bug?几个小时后它不会继续播放内容