问题
I have a service returning JSON like:
{
"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
},
...
]}
I'm trying to generate a grouped and stacked column chart. I need to group by the "portfolio", stack by "Regn_Group", and aggregate "exposure".
I can get the chart to either stack, or group, but not both.
Here is what I have so far
<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:
According to the documentation, the aggregate function is only for Date Series: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.aggregate
For the stacking:
Try adding the stack: true in the series properties of the chart:
series: [{
type: "column",
name: "#= group.value #",
field: "exposure",
stack: true
}],
UPDATE FROM COMMENTS:
You can transform the data using the datasource object grouping and its fetch event to build individual series and stacks:
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);
}
}
});
Updated DEMO
来源:https://stackoverflow.com/questions/31858447/grouped-and-stacked-column-chart