特定のフィールドでグループ化を使用して折れ線グラフをレンダリングしたい
質問
現在、私は次のようなjsonデータを使用して単一折れ線グラフをレンダリングしています :
{"eventType":"A","startOpen":"0","asOfDate":"21-OCT-13","intervalNo":0},
{"eventType":"A","startOpen":"47","asOfDate":"21-OCT-13","intervalNo":1},
{"eventType":"A","startOpen":"60","asOfDate":"21-OCT-13","intervalNo":2},
{"eventType":"B","startOpen":"79","asOfDate":"21-OCT-13","intervalNo":4},
{"eventType":"B","startOpen":"90","asOfDate":"21-OCT-13","intervalNo":6}
私はグラフをプロットしています startOpen
に対して intervalNo
.今、私はグループ化を使用してグラフをプロットしたい eventType
フィールド。上記のデータのための手段二つの線は、単一のチャートで描画する必要があります,eventTypeのためのもの A
そしてeventTypeのための別のもの B
.
あなたのあらゆる種類の助けに感謝します。ありがとうございました:)
チャートの私の現在のコード :
Ext.define("TestBug.view.TrendsChart", {
extend: "Ext.chart.Chart",
alias: "widget.trendschart",
store: "Trends",
style: 'background:#fff',
animate: true,
shadow: true,
groupField:'eventType',
legend: {position: 'right'},
axes: [
{
type: "numeric",
position: "left",
fields: "intervalNo",
title:"Interval No",
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
},
{
type: "numeric",
position: "bottom",
fields: "startOpen",
title: 'Start Open'
}
],
series: [
{
type: "line",
axis: "left",
xField: "startOpen",
yField: "intervalNo",
gField:'eventType',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
});
解決
複数の線幅の異なるx値をプロットするには、複数の線系列を使用する必要があります。の値を持つ値ポイント undefined
スキップされます、つまり、チャートには描画されません。
これを行うためにサンプルデータを適応させる方法は次のとおりです(フィドル):
Ext.define("TestBug.view.TrendsChart", {
extend: "Ext.chart.Chart",
alias: "widget.trendschart",
store: {
fields: [
'eventType',
{name: 'startOpen', type: 'int'},
'asOfDate',
'intervalA',
'intervalB'
]
,data: [
{"eventType":"A","startOpen":"0","intervalA":0,"intervalB":undefined},
{"eventType":"A","startOpen":"47","intervalA":1,"intervalB":undefined},
{"eventType":"A","startOpen":"35","intervalA":undefined,"intervalB":2},
{"eventType":"B","startOpen":"79","intervalA":undefined,"intervalB":4},
{"eventType":"B","startOpen":"90","intervalA":undefined,"intervalB":6}
]
},
style: 'background:#fff',
animate: true,
shadow: true,
groupField: 'eventType',
legend: {
position: 'right'
},
axes: [{
type: "numeric",
position: "left",
fields: ["intervalA", "intervalB"],
title: "Interval No",
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
},{
type: "numeric",
position: "bottom",
fields: "startOpen",
title: 'Start Open'
}],
series: [{
type: "line",
axis: "left",
xField: "startOpen",
yField: "intervalA",
title: "A"
},{
type: "line",
axis: 'left',
xField: 'startOpen',
yField: 'intervalB',
title: "B"
}]
});
Ext.widget('trendschart', {
renderTo: Ext.getBody()
,width: 600
,height: 300
});
所属していません StackOverflow