分组和堆叠柱形图 [英] Grouped and Stacked Column Chart

问题描述

我有一个返回JSON的服务，

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
    },
    ...
]}

我正在尝试生成分组和堆叠的柱状图.我需要按投资组合"分组，按"Regn_Group"堆叠，然后汇总曝光".

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>

推荐答案

根据文档，聚合函数仅适用于Date系列: http://docs.telerik.com /kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.aggregate

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

对于堆叠:

尝试添加堆栈:在图表的系列属性中为true:

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

这篇关于分组和堆叠柱形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！