Kendo UI 条形图数据分组

Posted 2023-02-26

【中文标题】Kendo UI 条形图数据分组

【英文标题】：Kendo UI BarChart Data Grouping

【发布时间】：2012-11-17 07:50:58

【问题描述】：

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

在这个没有分组的例子中，它显示了 FamilyA 的多个列。 是否可以将其分组为一列并汇总值而不管数据量如何？

所以结果将显示一列 FamilyA 的值 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"
        
      );​

【问题讨论】：

我正在尝试创建一个包含大量图表的仪表板，为了提供这种终极响应能力，我认为最好创建一个包含所有数据的大 json 文件，但似乎这种方法不是可能的。然后可以在所有图表之间共享此文件，但由于每个图表的结构如此不同，我必须为每个图表创建一个 json 文件。

这可能对你有帮助jsfiddle.net/v8tsQ/42

这个问题是如果您在同一季度的同一公司的 json 中有另一个项目，这将显示为条形图上的附加列。如何将此总数添加到现有的 2011Q2 中，以便它仍然仅显示 1 列，总数为 1 + 145 = 146？ “CompanyId”：201，“GroupName”：“Constellation”，“SectionName”：“CCLF”，“FindingQuarter”：“2011Q2”，“DataElement”：“Total”，“DataValue”：“”，“Total”： 145，

【参考方案1】：

Kendo UI 图表不支持绑定到组聚合。至少现在还没有。

我的建议是：

移动聚合定义，以便按组计算：

group: 
    field: "ProductFamily",
    aggregates: [ 
        field: "Value",
        aggregate: "sum"
     ]
 

在更改处理程序中提取聚合值：

var view = products.view();
var families = $.map(view, function(v) 
    return v.value;
);
var values = $.map(view, function(v) 
    return v.aggregates.Value.sum;
);

手动绑定组和类别：

series: [ 
    type: "column",
    data: values
],
categoryAxis: 
    categories: families

工作演示可以在这里找到：http://jsbin.com/ofuduy/5/edit

我希望这会有所帮助。

【讨论】：

这太棒了。非常感谢！