5

使用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"
    }]            
});

但这产生了这张图表：

饼图 - 不好

您可以看到 Status 200 重复，并且该值正在确定切片的大小。

所以，这是我的问题：

如何创建一个看起来像下图但绑定到上面第一个代码片段中的数据源的饼图？

饼图 - 好

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

4

1 回答 1

6

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

所以你有你的原始数据源（我已经提取了它，因为它与另一个小部件共享）。当该 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

于 2014-02-04T01:03:30.837 回答