特定のフィールドでグループ化を使用して折れ線グラフをレンダリングしたい

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 スキップされます、つまり、チャートには描画されません。

これを行うためにサンプルデータを適応させる方法は次のとおりです（フィドル):

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
});