Jak utworzyć wykres kołowy agregować źródło danych?

Question

Korzystanie Kendo UI Complete for ASP.NET MVC, wersja: 2013,3 1119 (20 listopada 2013) ...

Jeśli mam ten kawałek kodu:

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

otrzymuję ten wykres:

Jak widać - Status 10 i 20 ma wartość 1, a Stan 200 wartość 2.

Świetnie, ale to, czego tak naprawdę chcę, to dokładnie to samo na wykresie kołowym (tak, wykres z 3 wycinkami, z których 2 mają dokładnie taki sam rozmiar i taki, który jest 2 razy większy niż reszta).

więc pomyślałem sobie, wszystko co musisz zrobić, to po prostu ustawić type: "pie" tak:

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

Ale produkowany ten wykres:

Widać, że status 200 powtarza się, a wartość określa rozmiar plasterków.

Tak, tu jest moje pytanie:

Jak mogę utworzyć wykres kołowy, który wygląda tak jak na obrazku poniżej, ale który jest związany ze źródłem danych w pierwszym fragmencie kodu powyżej?

Nawiasem mówiąc, powodem nie chcę, aby zmienić źródło danych jest to, że pragnę podzielić się z siatki.

Answer 1

To, co próbujesz tutaj zrobić, to zgrupować udostępniony obiekt DataSource i mieć wpływ tylko na jeden widżet. Ponadto, Kendo UI zwróci zgrupowany obiekt, gdy go zgrupujesz. Wykres kołowy nie jest zainteresowany tymi obiektami, ale raczej liczbą elementów, które zawiera każdy z tych obiektów grupowych. Musimy tylko uzyskać dane we właściwym formacie.

Masz więc swoje oryginalne źródło danych (które wyodrębniłem, ponieważ jest udostępniane innym widgetom). Po zmianie tego źródła danych należy wypełnić drugi - taki, który można grupować bez wpływu na siatkę.

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

Drugi DataSource (ChartData) są pogrupowane, a gdy to się nie zmieni, to wypełnia tablicę, budowy obiektów, że wykres kołowy może rzeczywiście zrozumieć.

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

A potem po prostu związać swój wykres kołowy na tej tablicy

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

przykład robocza: http://jsbin.com/EKuxORA/1/edit