Question

我遇到了来自extjs4的line chart示例所呈现的结果的问题列是正确渲染但线不是，在图片中注意我需要有4而它在0 x点绘制时第二个绘图应该是5当它在2中绘制时： enter image description here 这是我的代码：

 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'
            }
        }]
    }

});

Answer 1

在您的轴定义中尝试更改

fields: ['data1'],

到

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

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

值在extjs的折线图中没有正确呈现？

1 个答案: