Je veux rendre la ligne graphique à l'aide de regroupement sur un champ en particulier

Question

Actuellement, je suis rendu unique de la ligne graphique à l'aide de données json qui est comme suit :

{"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}

Je suis de traçage graphique startOpen contre intervalNo.Maintenant, je veux tracer le graphique à l'aide de regroupement sur eventType champ.Moyens pour les données ci-dessus deux lignes doivent être tracées dans le graphique unique, un pour eventType A et un autre pour le type d' B.

Apprécier votre toute sorte d'aide.Merci :)

Mon code actuel pour le graphique :

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

Afin de tracer plusieurs lignes de largeur différentes valeurs de x, vous devez utiliser plusieurs séries de lignes.La valeur des points avec la valeur de undefined sera ignoré, c'est qu'ils ne seront pas attirés dans le graphique.

Voici comment adapter vos données, par exemple pour le faire (lesviolon):

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