如何制作饼图聚合数据源？

Question

使用Kendo UI Complete for ASP.NET MVC,版本:2013.3,1119(2013年11月20日)...

如果我有这段代码:

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

我得到这个图表:

如您所见 - 状态10和20的值为1,状态200的值为2.

太棒了,但我真正想要的是在饼图中完全相同的东西(所以,一个包含3个饼图的图表,其中2个是完全相同的尺寸,另一个是其余的2倍).

因此,我想,我需要做的就是type: "pie"这样设置:

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

但是这产生了这个图表:

您可以看到状态200重复,并且值正在确定切片的大小.

所以,这是我的问题:

如何创建一个如下图所示但在上面第一个代码片段中绑定到数据源的饼图？

顺便说一句,我不想​​更改数据源的原因是我希望与网格共享它.

Answer 1

您在这里要做的是对共享的DataSource进行分组,并使其仅影响一个小部件.此外,Kendo UI将在您对其进行分组时返回分组对象.饼图对这些对象不感兴趣,而是对每个组对象包含的项的计数.我们只需要以正确的格式获取数据.

所以你有原始的DataSource(我已经提取了它,因为它与另一个小部件共享).当该DataSource更改时,您希望填充第二个 - 您可以在不影响网格的情况下对其进行分组.

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

第二个DataSource(chartData)被分组,当它发生变化时,它会填充一个数组,构建饼图可以实际理解的对象.

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

然后将您的饼图绑定到该数组

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

工作示例:http://jsbin.com/EKuxORA/1/edit