值在extjs的折线图中无法正确呈现？ [英] values not correctly rendered in line chart in extjs?

问题描述

我对 extjs4
中的折线图示例，列已正确渲染，但折线未正确显示，请注意图片中我如何需要4，而其在0 xpoint中绘制，第二个图应该是5当其绘制2：

是我的代码：

I'm having trouble with result rendered by line chart example from extjs4 the columns are rendered correctly but the line is not, notice in the picture how i need to have 4 while its drawed in the 0 xpoint also the second plot is supposed to be 5 when its draw in 2: here is my code:

 panel3 = Ext.create('widget.panel', {

    width: 600,
    height: 200,
    frame: false,
    renderTo: 'line',
    layout: 'fit',
    items: {
        xtype: 'chart',
        animate: false,
        store: storeline,
        insetPadding: 20,
        gradients: [{
            angle: 90,
            id: 'bar-gradient',
            stops: {
                0: {
                    color: '#99BBE8'//C12283
                },
                70: {
                    color: '#77AECE'
                },
                100: {
                    color: '#77AECE'
                }
            }
        }],
        axes: [{
            type: 'Numeric',
            minimum: 0,
            maximum: 10,
            position: 'left',
            fields: ['data1'],
            title: false,
            grid: true,
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0'),
                font: '10px Arial'
            }
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: false,
            grid: true,
            label: {
                font: '11px Arial',
                rotate: {
                    degrees: 300
                }
            }
        }],
        series: [{
            type: 'column',
            axis: 'left',
            xField: 'name',
            yField: 'data1',
                display: 'over',
            style: {
                fill: 'url(#bar-gradient)',
                'stroke-width': 30
            }  ,
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 20,
                fill: '#38FFFF',
                stroke: '#38B8BF'
            }
        },
        {
            type: 'line',
            axis: 'left',
            xField: 'name',
            yField: 'data2',
            tips: {
                trackMouse: true,
                width: 110,
                height: 25,
                //baseCls: 'customtip', //bodyStyle: 'background:#6cc; ',
                renderer: function (storeItem, item) {
                    this.setTitle(storeItem.get('name') + ' : ' + storeItem.get('data2'));
                }
            },
            style: {
                fill: '#18428E',
                stroke: '#18428E',
                'stroke-width': 3
            },
            markerConfig: {
                type: 'circle',
                size: 5,
                radius: 5,
                'stroke-width': 0,
                fill: '#18428E',
                stroke: '#18428E'
            }
        }]
    }

});

推荐答案

在您的轴定义中尝试更改

In your axis definition try changing

fields: ['data1'],

至

fields: ['data1', 'data2'],

还要验证加载到data2字段中的数据是实际整数。 ExtJs可能正在将其读取为字符串，因此无法与左轴上的值匹配。

Also verify that the data being loaded into the data2 field is an actual integer. ExtJs might be reading it as a string and therefore is unable to match it with a value on the left axis.

这篇关于值在extjs的折线图中无法正确呈现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！