如何获取在 AmChart 饼图中分组的数据
How do I get which data is being grouped in AmChart pie
我使用的是条形图,您可以在饼图中显示 select 的内容。饼图有 "groupPercent": 5,
,我无法更改它。 问题是,当我 select te "Other" 切片时,它在条形图中显示了所有数据。
- 我可以只显示 "Other" 切片中包含的内容吗?
- 我可以获取 JSon 类型或类似类型的数据吗?
我认为解决方案就在 pullOutSlice 侦听器附近:
chart.addListener("pullOutSlice", function (event) {
if (event.dataItem.dataContext.data != undefined) {
var skus = event.dataItem.dataContext.data;
谢谢!
一些代码:
var chart = AmCharts.makeChart("resellersalespiechart", {
"type": "pie",
"theme": "light",
"dataProvider": chartData,
"valueField": "qty",
"titleField": "reseller",
"labelText": "[[title]]: [[value]]",
"pullOutOnlyOne": true,
"groupPercent": 5,
"groupedTitle": "Otros",
"legend": {
"position": "bottom",
"marginRight": 20,
"autoMargins": false
}
});
// create column chart
var chart2 = AmCharts.makeChart("resellersalesbarchart", {
"type": "serial",
"theme": "light",
"pathToImages": "/lib/3/images/",
"autoMargins": false,
"marginLeft": 30,
"marginRight": 8,
"marginTop": 10,
"marginBottom": 26,
"titles": [{
"text": "Todos los resellers"
}],
"dataProvider": collectiveData,
"startDuration": 1,
"graphs": [{
"title": "projects",
"type": "column",
"fillAlphas": 0.8,
"valueField": "qty",
"balloonText": "[[category]]: <b>[[value]]</b>"
}],
"categoryField": "sku",
"categoryAxis": {
"gridPosition": "start",
"autoGridCount": false,
"gridCount": 12,
"labelFunction": function (valueText, serialDataItem, categoryAxis) {
return valueText;
},
"fontSize": 9
},
"valueAxes": [{
"integersOnly": true,
"fontSize": 9,
"labelFunction": function (value, valueText, valueAxis) {
if (value >= 1000) {
return (value / 1000) + "K";
} else {
return valueText;
}
}
}]
});
chart.addListener("pullInSlice", function (event) {
if (event.dataItem.dataContext.skus != undefined) {
chart1BarData = collectiveData;
chart1BarTitle = "Todos los resellers"
chart2.dataProvider = collectiveData;
chart2.titles[0].text = "Todos los resellers";
chart2.validateData();
chart2.animateAgain();
}
});
图表示例:
Image of the different views of charts
似乎没有直接的方法可以做到这一点。您需要遍历 dataProvider 并聚合其计算百分比值低于 groupPercent 阈值的元素,然后将每个元素的子数组聚合到条形图的 dataProvider 数组中。例如:
if (event.dataItem.dataContext.skus != undefined) {
chart1BarData = collectiveData;
chart1BarTitle = "Todos los resellers"
chart2.dataProvider = collectiveData;
chart2.titles[0].text = "Todos los resellers";
chart2.validateData();
chart2.animateAgain();
}
else {
var sum = event.chart.chartData.reduce(function(accumulator, dataElement) {
return accumulator + dataElement.value;
}, 0);
var groupedElements = [];
event.chart.dataProvider.forEach(function(dataElement) {
if ((dataElement[event.chart.valueField] / sum) * 100 < event.chart.groupPercent) {
groupedElements.push(dataElement);
}
});
//aggregate/build chart dataProvider and assign to chart2 here
}
我使用的是条形图,您可以在饼图中显示 select 的内容。饼图有 "groupPercent": 5,
,我无法更改它。 问题是,当我 select te "Other" 切片时,它在条形图中显示了所有数据。
- 我可以只显示 "Other" 切片中包含的内容吗?
- 我可以获取 JSon 类型或类似类型的数据吗?
我认为解决方案就在 pullOutSlice 侦听器附近:
chart.addListener("pullOutSlice", function (event) {
if (event.dataItem.dataContext.data != undefined) {
var skus = event.dataItem.dataContext.data;
谢谢!
一些代码:
var chart = AmCharts.makeChart("resellersalespiechart", {
"type": "pie",
"theme": "light",
"dataProvider": chartData,
"valueField": "qty",
"titleField": "reseller",
"labelText": "[[title]]: [[value]]",
"pullOutOnlyOne": true,
"groupPercent": 5,
"groupedTitle": "Otros",
"legend": {
"position": "bottom",
"marginRight": 20,
"autoMargins": false
}
});
// create column chart
var chart2 = AmCharts.makeChart("resellersalesbarchart", {
"type": "serial",
"theme": "light",
"pathToImages": "/lib/3/images/",
"autoMargins": false,
"marginLeft": 30,
"marginRight": 8,
"marginTop": 10,
"marginBottom": 26,
"titles": [{
"text": "Todos los resellers"
}],
"dataProvider": collectiveData,
"startDuration": 1,
"graphs": [{
"title": "projects",
"type": "column",
"fillAlphas": 0.8,
"valueField": "qty",
"balloonText": "[[category]]: <b>[[value]]</b>"
}],
"categoryField": "sku",
"categoryAxis": {
"gridPosition": "start",
"autoGridCount": false,
"gridCount": 12,
"labelFunction": function (valueText, serialDataItem, categoryAxis) {
return valueText;
},
"fontSize": 9
},
"valueAxes": [{
"integersOnly": true,
"fontSize": 9,
"labelFunction": function (value, valueText, valueAxis) {
if (value >= 1000) {
return (value / 1000) + "K";
} else {
return valueText;
}
}
}]
});
chart.addListener("pullInSlice", function (event) {
if (event.dataItem.dataContext.skus != undefined) {
chart1BarData = collectiveData;
chart1BarTitle = "Todos los resellers"
chart2.dataProvider = collectiveData;
chart2.titles[0].text = "Todos los resellers";
chart2.validateData();
chart2.animateAgain();
}
});
图表示例: Image of the different views of charts
似乎没有直接的方法可以做到这一点。您需要遍历 dataProvider 并聚合其计算百分比值低于 groupPercent 阈值的元素,然后将每个元素的子数组聚合到条形图的 dataProvider 数组中。例如:
if (event.dataItem.dataContext.skus != undefined) {
chart1BarData = collectiveData;
chart1BarTitle = "Todos los resellers"
chart2.dataProvider = collectiveData;
chart2.titles[0].text = "Todos los resellers";
chart2.validateData();
chart2.animateAgain();
}
else {
var sum = event.chart.chartData.reduce(function(accumulator, dataElement) {
return accumulator + dataElement.value;
}, 0);
var groupedElements = [];
event.chart.dataProvider.forEach(function(dataElement) {
if ((dataElement[event.chart.valueField] / sum) * 100 < event.chart.groupPercent) {
groupedElements.push(dataElement);
}
});
//aggregate/build chart dataProvider and assign to chart2 here
}