Несколько групп в гистограмме Kendo Ui с накоплением

Я хочу создать гистограмму со стопроцентной шкалой, которая будет отображать соотношение длительности значения состояния, сгруппированное по устройству и типу состояния. Что-то вроде http://demos.telerik.com/kendo-ui/bar-charts/grouped-stacked100-bar.

Мне удалось сделать частичное решение, основанное на этом ответе, но у него есть большая проблема - я не могу сделать его 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>
Источник

1 ответ

Решение

Вы можете получить стопку 100%, установив stack.group и stack.type для каждой серии:

  //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);
      }

    }
  });

Обновлено ДЕМО

Источник
Другие вопросы по тегам