これが可能かどうかわかりません。私の例では、ソースとしてjsonを使用していますが、これはどんなサイズでもかまいません。 fiddleの私の例では、ProductFamily(xAxis)とValue(yAxis)の2つの列をバインドするだけで、このデータを共有する方法で使用しますが、集計を使用して列をグループ化できるようにしたいと考えています。剣道UI BarChartデータのグループ化
グループ化されていないこの例では、FamilyAの列が複数表示されています。 これを1列にグループ化し、データの量に関係なく値を集計できますか?
したがって、値4850 + 4860 = 9710のFamilyAの結果が1つの列に表示されますか?
オンラインのすべての例に関する問題は、各カテゴリに常に正しい量のデータがあることです。これが意味をなさないかどうかわからない?
http://jsfiddle.net/jqIndy/ZPUr4/3/
//Sample data (see fiddle for complete sample)
[{
"Client":"",
"Date":"2011-06-01",
"ProductNumber":"5K190",
"ProductName":"CABLE USB",
"ProductFamily":"FamilyC",
"Status":"OPEN",
"Units":5000,
"Value":5150.0,
"ShippedToDestination":"CHINA"
}]
var productDataSource = new kendo.data.DataSource({
data: dr,
//group: {
// field: "ProductFamily",
//},
sort: {
field: "ProductFamily",
dir: "asc"
},
//aggregate: [
// { field: "Value", aggregate: "sum" }
//],
//schema: {
// model: {
// fields: {
// ProductFamily: { type: "string" },
// Value: { type: "number" },
// }
// }
//}
})
$("#product-family-chart").kendoChart({
dataSource: productDataSource,
//autoBind: false,
title: {
text: "Product Family (past 12 months)"
},
seriesDefaults: {
overlay: {
gradient: "none"
},
markers: {
visible: false
},
majorTickSize: 0,
opacity: .8
},
series: [{
type: "column",
field: "Value"
}],
valueAxis: {
line: {
visible: false
},
labels: {
format: "${0}",
skip: 2,
step: 2,
color: "#727f8e"
}
},
categoryAxis: {
field: "ProductFamily"
},
legend: {
visible: false
},
tooltip: {
visible: true,
format: "Value: ${0:N0}"
}
});
私はかなりのグラフを含むダッシュボードを作成しようとしています。この究極の応答性を与えるために、すべてのデータを含む1つの大きなjsonファイルを作成することをお勧めしますが、このアプローチは不可能です。このファイルはすべてのグラフ間で共有できますが、各グラフの構造が非常に異なるため、グラフごとに1つのjsonファイルを作成する必要があります。 – jqIndy
これはあなたを助けるかもしれないhttp://jsfiddle.net/v8tsQ/42/ – SimonGates
この1つの問題は、同じ四半期の同じ会社のjsonに別のアイテムがある場合、これはバーに追加の列として表示されますチャート。この合計を既存の2011Q2に追加するには、1 + 145 = 146の合計で1つの列しか表示されないようにするにはどうすればよいですか? { "たCompanyId":201、 "GROUPNAME": "コンステレーション"、 "セクション名": "CCLF"、 "FindingQuarter": "2011Q2"、 "定義するDataElement": "トータル"、 "DataValueは" : ""、 "合計":145 }、 – jqIndy