Werte, die nicht korrekt in Zeilendiagramm in extJs gerendert werden?

Question

Ich habe Probleme mit dem Ergebnis, das von wiedergegeben wird Liniendiagramm Beispiel aus extjs4 Die Spalten werden korrekt gerendert, aber die Zeile ist nicht, beachten Sie auf dem Bild, wie ich 4 haben muss, während sie im 0 x Punkte auch das zweite Diagramm zu sehen sein soll, wenn es in 2 Zeichnen in 2 zeichnet:Hier ist mein 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'
            }
        }]
    }

});

Answer 1

Versuchen Sie in Ihrer Achsendefinition zu ändern

fields: ['data1'],

zu

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

Stellen Sie außerdem sicher, dass die Daten in das Feld Data2 eine tatsächliche Ganzzahl sind. ExtJs lesen es möglicherweise als Zeichenfolge und kann damit nicht mit einem Wert auf der linken Achse übereinstimmen.