kendo ui 堆积条形图中的多重分组

Question

我想创建一个 100% 堆叠条形图，显示按设备和状态类型分组的状态值持续时间比率。类似于 http://demos.telerik.com/kendo-ui/bar-charts/grouped-stacked100-bar.

我设法制作了部分 solution based on ，但它有一个大问题 - 如果我使用系列的堆栈属性，我无法将其设为 100% 堆叠条。有人知道问题出在哪里吗？

另一个问题是我想做同样的事情，但要使用数据绑定。有可能这样做吗？不知道如何绑定多个系列同字段的数据？

代码：

    <!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title>Stacked and grouped Column Chart</title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.bootstrap.min.css" />

    <script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
    <div class="demo-section k-content">
        <div id="chart"></div>
    </div>
    <script>

      var monthly =  [
          {
            "statusType": "Status1",
            "statusValue": "status value 1",
            "device": "D2",
            "duration": 7
          },
          {
            "statusType": "Status1",
            "statusValue": "status value 2",
            "device": "D2",
            "duration": 13
          },
          {
            "statusType": "Status1",
            "statusValue": "status value 1",
            "device": "D1",
            "duration": 16
          },
          {
            "statusType": "Status1",
            "statusValue": "status value 2",
            "device": "D1",
            "duration": 4
          },
          {
            "statusType": "Status2",
            "statusValue": "status value 3",
            "device": "D1",
            "duration": 11
          },

          {
            "statusType": "Status2",
            "statusValue": "status value 4",
            "device": "D2",
            "duration": 9
          },
                  {
            "statusType": "Status2",
            "statusValue": "status value 3",
            "device": "D2",
            "duration": 16
          },

          {
            "statusType": "Status2",
            "statusValue": "status value 4",
            "device": "D1",
            "duration": 14
          },

      ];

      theseries = [];
      thesectors = [];

      var dataDS = new kendo.data.DataSource({
                        data: monthly,
            group: [              
              {field: "statusType"},
              {field: "statusValue"},
            ],
            sort: { field: "device", dir: "asc" }
        });


      //convert the data
      dataDS.fetch(function(){
        var view = dataDS.view();

        for (i = 0; i < view.length; i++) {            
          var statusType = view[i];
          for (p = 0; p < statusType.items.length; p++) { 
              var statusValue = statusType.items[p];

              var series = {};
              series.name = statusValue.value;
              series.stack = statusType.value;
              series.data = [];


              for (j=0; j<statusValue.items.length; j++){
                var data = statusValue.items[j];
                if (i==0 && p==0) {
                   thesectors.push(data.device);
                }
                series.field='duration';
                series.data.push(data)

              }
              theseries.push(series);
          }

        }
      });

        function createChart() {

          $("#chart").kendoChart({
               theme: "Fiori",
               legend:{
                    visible: true,
                    position:"bottom"
               },
               seriesDefaults: {
                    type: "bar",
                    stack: {
                        type: "100%"
                    }
                },series: theseries,
            categoryAxis: {
                   categories: thesectors,
                },


          });       

        }

        $(document).ready(createChart);
    </script>
</div>


</body>
</html>

Answer 1

您可以通过在每个系列上设置 stack.group 和 stack.type 来获得 100% 的堆栈：

  //convert the data
  dataDS.fetch(function(){
    var view = dataDS.view();

    for (i = 0; i < view.length; i++) {            
      var statusType = view[i];
      for (p = 0; p < statusType.items.length; p++) { 
          var statusValue = statusType.items[p];

          var series = {};
          series.name = statusType.value +":"+ statusValue.value;
          series.stack = {};
          series.stack.group = statusType.value;
          series.stack.type = "100%";
          series.data = [];


          for (j=0; j<statusValue.items.length; j++){
            var data = statusValue.items[j];
            if (i==0 && p==0) {
               thesectors.push(data.device);
            }
            series.field='duration';
            series.data.push(data)

          }
          theseries.push(series);
      }

    }
  });

已更新DEMO

kendo ui 堆积条形图中的多重分组

Multiple grouping in kendo ui stacked bar chart

telerik

bar-chart

kendo-ui

stacked-chart

kendo-observable