How to make a Pie Chart Aggregate the Data Source?

二次信任 提交于 2019-12-06 02:53:40

问题


Using Kendo UI Complete for ASP.NET MVC, version: 2013.3 1119 (Nov 20, 2013)...

If I have this bit of code:

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

I get this chart:

As you can see - Status 10 and 20 have got a value of 1 and Status 200 a value of 2.

Great, but what I actually want is exactly the same thing in a pie chart (so, a chart with 3 pie slices, 2 of which are exactly the same size and one that is 2 times as big as the rest).

I therefore thought to myself, all I need to do is just set type: "pie" like so:

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

But that produced this chart:

You can see that Status 200 is repeated and the value is determining the size of the slices.

So, here is my question:

How can I create a pie chart that looks like the picture below but which is bound to the data source in the first code snippet above?

Incidentally, the reason I do not want to change the data source is that I wish to share it with a grid.


回答1:


What you are trying to do here is to group a shared DataSource and have it only affect one widget. Furthermore, Kendo UI will return a grouped object when you group it. The Pie chart is not interested in these objects, but rather the count of the items that each of these group objects contains. We just need to get the data in the right format.

So you have your original DataSource (which I have extracted since it's shared with another widget). When that DataSource changes, you want to populate a second one - one that you can group without affecting the grid.

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

The second DataSource (chartData) is grouped, and when it changes, it populates an array, constructing objects that the pie chart can actually understand.

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

And then just bind your pie chart to that array

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

Working example: http://jsbin.com/EKuxORA/1/edit



来源:https://stackoverflow.com/questions/20214645/how-to-make-a-pie-chart-aggregate-the-data-source

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!