javascript - 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 和竞争者B。而且有些日期没有竞争对手。有的有两个或一个。这意味着，在柱形图中，柱系列计数随日期而变化。

已更新

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

CompetitorC - 绿色(每次 CompetitorC 都应为绿色) 其他所有竞争对手 - 不同色调的蓝色

我想将图表主题设置为“返回”。我尝试遵循。

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'
          }]

然后我的图表将颜色绿色设置为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 #"
  },
});

这是一个道场演示:

<强> DEMO