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的价值点将被跳过，即不会在图表中绘制。

以下是如何调整您的示例数据（fiddle）：

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

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

1 个答案: