Javascript 剑道UI-JSON数组中的柱状图

在我的AngularJS应用程序中，我使用剑道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。还有一些日期没有竞争对手。有些人有两个或一个。这意味着，在柱状图中，列序列计数是按日期变化的

已更新

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

        [
          {
          "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": []
       }
    ]  

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);
}        
}

然后我的图表将颜色设置为绿色，但图例并没有变为绿色。我如何修复它&我如何将不同色调的蓝色设置为其他竞争对手

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

---

谢谢

我会将您转换为JSON so，然后在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);
    }        
  }

var transData=[]；
对于（变量i=0；i 0）{
对于（var j=0；jj）来说，我真的很期待。非常感谢。请检查我在更新标题下编辑的问题？@Rose18，您设置的是单个点的颜色，而不是系列，因此图例不知道。请尝试以下操作：
$("#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 #"
  },
});