Множественная группировка в кендо ui сложенная гистограмма

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

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

источник

2016-06-13 Athina

Вы можете получить стек 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); 
     } 

    } 
    });

Обновлено DEMO

источник

2016-06-13 13:45:15 ezanker

TNX:) Я не знаю, почему серийные номера по умолчанию не работают. Вы знаете, как сделать то же самое, но с привязкой dataSource? Это то, что мне нужно сделать. – Athina

@Athina, что вы подразумеваете под привязкой datasource? – ezanker

Использование MVV следующим образом: http://demos.telerik.com/kendo-ui/bar-charts/mvvm – Athina

Множественная группировка в кендо ui сложенная гистограмма

ответ

Смежные вопросы