我想使用特定字段上的分组来渲染折线图

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 场地。上述数据的意思是在单个图表中应绘制两条线，一根用于事件类型 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
});