특정 필드에서 그룹화를 사용하여 줄 차트를 렌더링하고 싶습니다.
문제
현재 다음과 같은 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
값이있는 값 점수가 건너 뜁니다. 즉, 차트에서 그려지지 않을 것입니다.
여기서 예제 데이터를 적용하는 방법은 해당 수행 ( 바이올린 )을 다음과 같습니다.
제휴하지 않습니다 StackOverflow