특정 필드에서 그룹화를 사용하여 줄 차트를 렌더링하고 싶습니다.

Question

현재 다음과 같은 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
        }
    }
]
});

.

Answer 1

여러 줄의 폭이 다른 x 값을 플롯하려면 여러 줄 시리즈를 사용해야합니다.undefined 값이있는 값 점수가 건너 뜁니다. 즉, 차트에서 그려지지 않을 것입니다.

여기서 예제 데이터를 적용하는 방법은 해당 수행 ( 바이올린 )을 다음과 같습니다.