2017-04-25 11 views
0

私はこのJSON形式でデータを得た:私は剣道積み上げ棒グラフのためにこのデータを使用剣道積み上げ棒グラフカテゴリ

var demoData = [{ 
    Name: 'Category_1', 
    Total: 100, 
    Items: [{ 
     Name: 'Sub_Category_1_1', 
     Total: 50 
     }] 
    },{ 
    Name: 'Category_2', 
    Total: 20, 
    Items: [{ 
     Name: 'Sub_Category_2_1', 
     Total: 15 
     },{ 
     Name: 'Sub_Category_2_2', 
     Total: 45 
    }] 
}]; 

を、しかし、最初に私はフラットなリストを取得する解析:

for (var i = 0; i < data.length; i++) { 
    for (var j = 0; j < data[i].Items.length; j++) { 
     dataArray.push({ 
      name: data[i].Items[j].Name, 
      stack: data[i].Name, 
      data: [data[i].Items[j].Total] 
     }); 
    } 
} 

をしかし、すべてが機能しますが、バーの下にカテゴリ名を表示したいと思います。 catsが配列['Category_1', 'Category_2', ....]ここで私は

categoryAxis: { 
    categories: catNames 
} 

を追加するときしかし、すべてのレンダリングバーが「Category_1」と「Category_2」というカテゴリを取得し、など上記の一切の棒を持っていないことが起こります。

カテゴリ名を正しく表示するには、どのように剣道図を設定する必要がありますか?

私はdataSourceにデータを供給し、seriesの代わりに内部をグルーピングしてみましたが、同様の結果が得られました。

kendo dojo example

+0

codepenまたはDOJOを作成できますか? – ezanker

+0

剣道道場はポストの終わりです –

+0

私は今それを見ます。どうすればいいですか:https://codepen.io/ezanker/pen/vmyyzN – ezanker

答えて

1

まず、あなたのデータはやや不正確に見える、あなたのサブカテゴリーを繰り返したいです。各カテゴリは、すべてのサブカテゴリーのEXが含まれている必要があります

var demoData = [{ 
Name: 'Category_1', 
Total: 100, 
Items: [{ 
    Name: 'Sub_Category_1', 
    Total: 50 
},{ 
    Name: 'Sub_Category_2', 
    Total: 45 
},{ 
    Name: 'Sub_Category_3', 
    Total: 5 
},{ 
    Name: 'Sub_Category_4', 
    Total: null 
}] 
},{ 
Name: 'Category_2', 
Total: 20, 
Items: [{ 
    Name: 'Sub_Category_1', 
    Total: 15 
},{ 
    Name: 'Sub_Category_2', 
    Total: 45 
},{ 
    Name: 'Sub_Category_3', 
    Total: null 
},{ 
    Name: 'Sub_Category_4', 
    Total: null 
}] 
},.... 

あなたはまた、データソースを設定することにより、グループにあなたのデータを必要とする:

var ds = new kendo.data.DataSource({ 
data: parsedData.seriesArray, 
    group: { 
    field: "name", 
    }, 
    sort: [ 
    { field: "stack", dir: "asc" }, 
    { field: "name", dir: "asc" }, 
    ] 
}); 

今セットアップあなたのシリーズとれるCategoryAxis:

dataSource: ds, 
series: [{ 
    field: "data", 
    stack: true, 
}], 
categoryAxis: { 
    field: "stack", 
}, 

最後に、serialArrayの配列に "data"フィールドを追加しないでください。

data: data[i].Items[j].Total 

dojo example

関連する問題