Multiple Gruppierung in Kendo ui gestapelt Balkendiagramm

Ich möchte ein 100% gestapeltes Balkendiagramm erstellen, das Statuswert Dauerverhältnis nach Gerät und Status Typ gruppiert zeigt. So etwas wie http://demos.telerik.com/kendo-ui/bar-charts/grouped-stacked100-bar.Multiple Gruppierung in Kendo ui gestapelt Balkendiagramm

Ich schaffte es, eine teilweise solution basierend auf this answer zu machen, aber es hat ein großes Problem - ich kann es nicht 100% gestapelten Bar machen, wenn ich Stack-Eigenschaft der Serie verwenden. Weiß jemand, was das Problem ist?

Das andere Problem ist, dass ich das gleiche tun möchte, aber mit der Datenbindung. Ist es möglich, das zu tun? Ich weiß nicht, wie man mehrere Reihen mit der gleichen Felddatenbindung hat?

Der Code:

<!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>

Quelle

2016-06-13 Athina

Sie können die 100% Stapel erhalten, indem stack.group und stack.type auf jede Serie Einstellung:

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

    } 
    });

Aktualisiert DEMO

Quelle

2016-06-13 13:45:15 ezanker

Tnx:) Ich weiß nicht, warum Serienstandards nicht funktionieren. Wissen Sie, wie Sie das gleiche tun, aber mit der DataSource-Bindung? Das muss ich tun. – Athina

@Athina, was meinst du mit Datenquellenbindung? – ezanker

Verwenden MVV wie folgt: http://demos.telerik.com/kendo-ui/bar-charts/mvvm – Athina

Multiple Gruppierung in Kendo ui gestapelt Balkendiagramm

Antwort

Verwandte Themen