Как получить только определенные данные в круговых диаграммах?
Я использую Amcharts в angular 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 для ввода диаграммы
@ShivajiVarma В результате фильтрации данных происходит перераспределение новых данных. Значит, ценности меняются. Я не хочу, чтобы это случилось. Можем ли мы этого избежать? Я хочу показать исходные проценты даже после фильтрации
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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 ... Мне очень жаль, что я забыл удалить свой комментарий после этого.
просто отфильтруйте supp_data и визуализируйте диаграмму