Kendo UI BarChart数据分组

时间:2012-11-29 09:18:39

标签: datasource kendo-ui

不确定这是否可行。在我的例子中,我使用json作为源,但这可以是任何大小。在fiddle上的示例中,我将以共享方式使用此数据,仅绑定两列ProductFamily(xAxis)和Value(yAxis),但我希望能够使用聚合对列进行分组。

在没有分组的示例中,它显示了FamilyA的多个列。 是否可以将其分组为一列,无论数据量多少,都会聚合值?

因此,结果将显示FamilyA of Value 4850 + 4860 = 9710等的一列?

所有在线示例的问题在于每个类别的数据总是存在正确的数据。不确定这是否有意义?

http://jsfiddle.net/jqIndy/ZPUr4/3/

//Sample data (see fiddle for complete sample)
[{
        "Client":"",
        "Date":"2011-06-01",
        "ProductNumber":"5K190",
        "ProductName":"CABLE USB",
        "ProductFamily":"FamilyC",
        "Status":"OPEN",
        "Units":5000,
        "Value":5150.0,
        "ShippedToDestination":"CHINA"
 }]


var productDataSource = new kendo.data.DataSource({
  data: dr,
  //group: {
  //  field: "ProductFamily",
  //},
  sort: {
    field: "ProductFamily",
    dir: "asc"
  },
  //aggregate: [
  //      { field: "Value", aggregate: "sum" }
  //],
  //schema: {
  //  model: {
  //    fields: {
  //      ProductFamily: { type: "string" },
  //      Value: { type: "number" },
  //    }
  //  }
  //}
          })

 $("#product-family-chart").kendoChart({
        dataSource: productDataSource,
        //autoBind: false,
        title: {
          text: "Product Family (past 12 months)"
        },
        seriesDefaults: {
          overlay: {
            gradient: "none"
          },
          markers: {
            visible: false
          },
          majorTickSize: 0,
          opacity: .8
        },
        series: [{
          type: "column",
          field: "Value"
        }],
        valueAxis: {
          line: {
            visible: false
          },
          labels: {
            format: "${0}",
            skip: 2,
            step: 2,
            color: "#727f8e"
          }
        },
        categoryAxis: {
          field: "ProductFamily"
        },
        legend: {
          visible: false
        },
        tooltip: {
          visible: true,
          format: "Value: ${0:N0}"
        }
      });​

1 个答案:

答案 0 :(得分:2)

Kendo UI Chart不支持绑定到组聚合。至少还没有。

我的建议是:

  1. 移动聚合定义,因此按组计算:

    group: {
        field: "ProductFamily",
        aggregates: [ {
            field: "Value",
            aggregate: "sum"
         }]
     }
    
  2. 在更改处理程序中提取聚合值:

    var view = products.view();
    var families = $.map(view, function(v) {
        return v.value;
    });
    var values = $.map(view, function(v) {
        return v.aggregates.Value.sum;
    });
    
  3. 手动绑定组和类别:

    series: [ {
        type: "column",
        data: values
    }],
    categoryAxis: {
        categories: families
    }
    
  4. 可以在此处找到工作演示:http://jsbin.com/ofuduy/5/edit

    我希望这会有所帮助。