Kendo UI - 来自 JSON 数组的柱形图

Question

在我的 AngularJS 应用程序中，我使用 Kendo UI 创建图表。我有一个 JSON 数组，如下所示。

        [
          {
          "date": "2016-06-24",
          "competitor": []
       },
          {
          "date": "2016-06-23",
          "competitor": []
       },
          {
          "date": "2016-06-22",
          "competitor": []
       },
          {
          "date": "2016-06-21",
          "competitor": []
       },
          {
          "date": "2016-06-20",
          "competitor": [
            {
                "price": 1223,
                "competitorName": "competitorA"
             },
                      {
                "price": 1222,
                "competitorName": "competitorB"
             }
          ]
       },
          {
          "date": "2016-06-19",
          "competitor": []
       },
          {
          "date": "2016-06-18",
          "competitor": []
       },
          {
          "date": "2016-06-17",
          "competitor": []
       },
          {
          "date": "2016-06-16",
          "competitor": []
       },
          {
          "date": "2016-06-15",
          "competitor": []
       },
          {
          "date": "2016-06-14",
          "competitor": []
       },
          {
          "date": "2016-06-13",
          "competitor": []
       },
          {
          "date": "2016-06-12",
          "competitor": []
       },
          {
          "date": "2016-06-11",
          "competitor": []
       },
          {
          "date": "2016-06-10",
          "competitor": []
       },
          {
          "date": "2016-06-09",
          "competitor":       [
                      {
                "price": 1345,
                "competitorName": "competitorA"
             },
                      {
                "price": 1604,
                "competitorName": "competitorC"
             }
          ]
       },
          {
          "date": "2016-06-08",
          "competitor": []
       },
          {
          "date": "2016-06-07",
          "competitor": []
       },
          {
          "date": "2016-06-06",
          "competitor": []
       },
          {
          "date": "2016-06-05",
          "competitor": []
       },
          {
          "date": "2016-06-04",
          "competitor": [
            {
                "price": 1343,
                "competitorName": "competitorB"
             },
                      {
                "price": 1604,
                "competitorName": "competitorC"
             }
          ]
       },
          {
          "date": "2016-06-03",
          "competitor": []
       },
          {
          "date": "2016-06-02",
          "competitor": []
       },
          {
          "date": "2016-06-01",
          "competitor": []
       },
          {
          "date": "2016-05-31",
          "competitor": []
       },
          {
          "date": "2016-05-30",
          "competitor": []
       },
          {
          "date": "2016-05-29",
          "competitor": [
               {
                "price": 1370,
                "competitorName": "competitorD"
             }
          ]
       },
          {
          "date": "2016-05-28",
          "competitor": []
       },
          {
          "date": "2016-05-27",
          "competitor": []
       },
          {
          "date": "2016-05-26",
          "competitor": []
       }
    ]

我想为这些数据创建一个柱形图。图表应按日期分类。问题是，竞争对手的日期因日期而异。例如，对于日期 2016-06-20，竞争对手是 competitorA 和 competitorB。还有一些日期没有竞争对手。有些有两个或一个。这意味着，在柱形图中，柱形系列计数随日期变化。

已更新

我只想为图表系列设置颜色，如下所示。

CompetitorC - Green（每次 CompetitorC 都应该是绿色）其他所有参赛者 - 深浅不一的蓝色

并且我想将图表主题设置为 "back"。我试过关注

var transData = [];
for (var i=0; i<data.length; i++){        
var date =  data[i].date;
if (data[i].competitor.length > 0){
  for (var j=0; j<data[i].competitor.length; j++){
    var obj = {}
    obj.date = date;
    obj.competitorName = data[i].competitor[j].competitorName;
    obj.price =  data[i].competitor[j].price;
    if(obj.competitorName==='CompetitorC') {
        obj.color = 'green';
    }
    transData.push(obj);            
  }          
} else {
  var obj = {}
  obj.date = date;
  obj.competitorName = "";
  obj.price = "";
  transData.push(obj);
}        
}

那么图表中：

series: [{
              field: 'price',
              categoryField: "date",
              name: "#= group.value #",
              colorField: 'color'
          }]

然后我的图表将颜色 green 设置为 competitorC 但图例没有变为绿色。我该如何解决它以及如何将蓝色设置为与其他竞争对手不同的色调？

如有任何建议，我们将不胜感激。

谢谢

Answer 1

我会 JSON 改造你，然后在 competitorName 上使用分组。你最终得到一个更简单的数组：

[
  { date: "", competitorName: "", "price: ""},
  ...
]

如果在同一日期存在不止一名参赛者，则日期将重复。

  var transData = [];
  for (var i=0; i<data.length; i++){        
    var date =  data[i].date;
    if (data[i].competitor.length > 0){
      for (var j=0; j<data[i].competitor.length; j++){
        var obj = {}
        obj.date = date;
        obj.competitorName = data[i].competitor[j].competitorName;
        obj.price =  data[i].competitor[j].price;
        transData.push(obj);            
      }          
    } else {
      var obj = {}
      obj.date = date;
      obj.competitorName = "";
      obj.price = "";
      transData.push(obj);
    }        
  }

转换日期后，您可以使用 kendo 数据源的分组功能：

$("#chart").kendoChart({
 theme: "material",
 dataSource: {
      data: transData,
      group:{field: 'competitorName'}, 
      sort: {field: "date", dir: "asc"},
      schema: {
          model: {
              fields: {
                  date: {
                      type: "date"
                  }
              }
          }
      }
  },
  legend: { visible: true, position: "bottom" },
  seriesDefaults: {type: 'column',},
  series: [{
      field: 'price',
      categoryField: "date",
      name: "#= group.value #"
  }],
  tooltip: {
    visible: true,
    template: "#= series.name #<br />#= kendo.toString(category, 'yyyy-MM-dd') # = #= value #"
  },
});

这是道场演示：

Kendo UI - 来自 JSON 数组的柱形图

Kendo UI - column chart from JSON array

javascript

charts

kendo-ui

angularjs

kendo-chart

DEMO