Wie wird ein Kreisdiagramm erstellt? Zusammenfassen der Datenquelle?

Question

Kendo UI Complete for ASP.NET MVC verwenden, Version: 2.013,3 1119 (20. November 2013) ...

Wenn ich dieses Stück Code haben:

$("#status-chart").kendoChart({ 
    dataSource: { 
     data: [ 
      {Status: 10}, 
      {Status: 20}, 
      {Status: 200}, 
      {Status: 200} 
     ] 
    },     
    series: [{ 
     field: 'Status', 
     categoryField: "Status", 
     aggregate: 'count' 
    }]    
}); 

ich diese Grafik:

Wie Sie sehen können - Status 10 und 20 haben einen Wert von 1 und Status 200 einen Wert von 2.

Großartig, aber Was ich eigentlich will, ist genau das Gleiche in einem Tortendiagramm (also ein Diagramm mit 3 Tortenschnitten, von denen 2 genau die gleiche Größe haben und eine, die 2 mal so groß wie der Rest ist).

Ich dachte deshalb mir, alles, was ich tun müssen, ist festgelegt nur type: "pie" wie so:

$("#status-chart").kendoChart({ 
    dataSource: { 
     data: [ 
      {Status: 10}, 
      {Status: 20}, 
      {Status: 200}, 
      {Status: 200} 
     ] 
    },     
    series: [{ 
     field: 'Status', 
     categoryField: "Status", 
     aggregate: 'count', 
     type: "pie" 
    }]    
}); 

Aber das erzeugt dieses Diagramm:

Sie als Status sehen können 200 wird wiederholt und der Wert bestimmt die Größe der Slices.

So, hier ist meine Frage:

Wie kann ich ein Kreisdiagramm erstellen, die unter, aber wie das Bild aussieht, die oben in dem ersten Code-Schnipsel an die Datenquelle gebunden ist?

Übrigens ist der Grund, warum ich nicht wollen, um die Datenquelle zu ändern, ist, dass ich wünschte, es zu teilen mit einem Gitter.

Answer 1

Sie versuchen, eine gemeinsame DataSource zu gruppieren und nur ein Widget zu beeinflussen. Darüber hinaus gibt Kendo UI ein gruppiertes Objekt zurück, wenn Sie es gruppieren. Das Kreisdiagramm interessiert sich nicht für diese Objekte, sondern für die Anzahl der Elemente, die jedes dieser Gruppenobjekte enthält. Wir müssen nur die Daten im richtigen Format erhalten.

Sie haben also Ihre ursprüngliche DataSource (die ich extrahiert habe, da sie mit einem anderen Widget geteilt wird). Wenn sich diese DataSource ändert, möchten Sie eine zweite hinzufügen, die Sie gruppieren können, ohne das Raster zu beeinflussen.

var ds = new kendo.data.DataSource({ 
    data: [ 
    {Status: 10}, 
    {Status: 20}, 
    {Status: 200}, 
    {Status: 200} 
    ], 
    change: function() { 
    chartData.data(this.data()); 
    } 
}); 

Die zweite Datasource (Chartdata) gruppiert, und wenn sie sich ändert, füllt es ein Array, den Bau Objekte, die das Kreisdiagramm tatsächlich verstehen können.

var groupedData = []; 

// populate the grouped data array by grouping this datasource 
// and then populating an plain array 
var chartData = new kendo.data.DataSource({ 
    group: { field: 'Status' }, 
    change: function() { 
    groupedData = []; 
    $.each(this.view(), function() { 
     groupedData.push({ field: this.value, value: this.items.length }); 
    }); 
    } 
}); 

Und dann binden nur Ihr Kreisdiagramm zu diesem Array

$("#status-chart").kendoChart({ 
    dataSource: groupedData, 
    series: [{ 
    type: 'pie', 
    field: 'value', 
    categoryField: 'field' 
    }]    
}); 

Beispiel Arbeiten: http://jsbin.com/EKuxORA/1/edit