剣道UI - JSON配列の縦棒グラフ

Question

私の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の場合、競合相手は競争相手A &競争相手Bである。また、いくつかの日付は競合他社を持っていません。一部には2つまたは1つがあります。つまり、縦棒グラフでは、縦列数は日付によって異なります。

は、私は同じように下のグラフのシリーズのために色を設定したい

を更新しました。

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のが、伝説が緑色に変化していません。 &どのように私は他の競合他社に異なる色合いで青を設定することができますか？

ご意見をいただければ幸いです。

は私があなたにJSONを変換して、competitorNameにグループ化使用するあなたに

Answer 1

ありがとうございます。あなたはより単純な配列になります：

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

、あなたは剣道データソースのグループ化機能を使用します。私は本当に期待通りに動作し

DEMO