Come creare un grafico a torta per aggregare l'origine dati?

Question

Utilizzando Kendo UI Complete for ASP.NET MVC, versione: 2013,3 1119 (Nov 20, 2013) ...

Se ho questo pezzo di codice:

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

ottengo questo grafico:

Come si può vedere - Stato 10 e 20 hanno un valore di 1 e Stato 200 un valore di 2.

Grande, ma quello che voglio veramente è esattamente la stessa cosa in un grafico a torta (quindi, un grafico con 3 fette di torta, 2 delle quali sono esattamente della stessa dimensione e una che è 2 volte più grande del resto).

pertanto pensato a me, tutto quello che devo fare è solo impostato type: "pie" in questo modo:

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

Ma che ha prodotto questo grafico:

Si può vedere che Stato 200 viene ripetuto e il valore determina la dimensione delle fette.

Quindi, ecco la mia domanda:

Come si crea un grafico a torta che sembra l'immagine qui sotto, ma che è legato all'origine dati nel primo frammento di codice di cui sopra?

Per inciso, la ragione per cui non voglio cambiare la fonte dei dati è che desidero condividere con una griglia.

Answer 1

Quello che si sta tentando di fare qui è raggruppare un DataSource condiviso e farlo influenzare solo un widget. Inoltre, l'interfaccia utente di Kendo restituirà un oggetto raggruppato quando lo si raggruppa. Il grafico a torta non è interessato a questi oggetti, ma piuttosto al conteggio degli oggetti contenuti in ciascuno di questi oggetti di gruppo. Abbiamo solo bisogno di ottenere i dati nel formato giusto.

Così hai il tuo DataSource originale (che ho estratto dal momento che è condiviso con un altro widget). Quando tale DataSource viene modificata, si desidera popolare una seconda, una che è possibile raggruppare senza influire sulla griglia.

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

Il secondo DataSource (ChartData) è raggruppato, e quando cambia, si popola un array, costruendo oggetti che il grafico a torta può effettivamente comprendere.

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

E poi basta vincolare il proprio grafico a torta per tale matrice

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

esempio di lavoro: http://jsbin.com/EKuxORA/1/edit