Сгруппированная и сложенная столбцовая диаграмма
У меня есть сервис, возвращающий JSON, как:
{
"data": [
{
"portfolio": "Portfolio 01",
"REGN_NME": "Africa/Middle E",
"Regn_Group": "Emerging",
"sector": "Sector 08",
"exposure": 0.109977544284
},
{
"portfolio": "Portfolio 01",
"REGN_NME": "Americas",
"Regn_Group": "Frontier",
"sector": "Sector 06",
"exposure": 1.78919403995e-09
},
...
]}
Я пытаюсь создать сгруппированную и сложенную диаграмму столбца. Мне нужно сгруппировать по "портфелю", стек по "Regn_Group" и агрегировать "экспозиции".
Я могу получить график либо в стек, либо в группу, но не в оба.
Вот что у меня так далеко
<script id="toolTipTemplate" type="text/x-kendo-tmpl">
#= series.name # - #= kendo.toString(value || 0,'p2') #
</script>
<script type="text/javascript">
$(function() {
$("#chart1").kendoChart({
title: {text: "Portfolio Sector Exposure"},
dataSource: {
transport: {
read: {
url:"exposure2.json"
}
},
schema: {
data: "data"
},
group: [{
field: "portfolio"
}],
stack: "Regn_Group"
},
legend:{
position:"bottom"
},
series: [{
type: "column",
field: "exposure",
categoryField: "sector",
aggregate: "sum"
}],
tooltip: {
visible: true,
template: $("#toolTipTemplate").html(),
}
});
});
</script>
1 ответ
Решение
Согласно документации, функция агрегирования предназначена только для рядов дат: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart.
Для укладки:
Попробуйте добавить stack: true в свойствах ряда диаграммы:
series: [{
type: "column",
name: "#= group.value #",
field: "exposure",
stack: true
}],
ОБНОВЛЕНИЕ ОТ КОММЕНТАРИЙ:
Вы можете преобразовать данные, используя группировку объекта источника данных и его событие извлечения, чтобы построить отдельные серии и стеки:
theseries = [];
thesectors = [];
var dataDS = new kendo.data.DataSource({
data: monthly, //the raw JSON Data
group: [
{field: "portfolio"},
{field: "Regn_Group"},
],
sort: { field: "sector", dir: "asc" }
});
//convert the data
dataDS.fetch(function(){
var view = dataDS.view();
for (i = 0; i < view.length; i++) {
var portfolio = view[i];
for (p = 0; p < portfolio.items.length; p++) {
var regn = portfolio.items[p];
var series = {};
series.name = regn.value;
series.stack = portfolio.value;
series.data = [];
for (j=0; j<regn.items.length; j++){
var data = regn.items[j];
if (i==0 && p==0) {
thesectors.push(data.sector);
}
series.data.push(data.exposure)
}
theseries.push(series);
}
}
});
Обновлено ДЕМО