Как получить только определенные данные в круговых счетах? - PullRequest
Новая
       49

Как получить только определенные данные в круговых счетах?

0 голосов
/ 18 мая 2018

Я использую Amcharts в угловых 2. Я показываю круговую диаграмму, и данные отображаются в процентах.Однако я хочу отображать данные в соответствии с выбранным пользователем процентом.Как пользователь вводит 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 для ввода диаграммы

1 Ответ

0 голосов
/ 18 мая 2018

Если вы хотите просто скрыть срезы, которые находятся ниже порогового значения, установите 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

Если вы используете угловой плагин, вы, вероятно, можете обернуть эту логику внутри обратного вызова 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>
...