extjs4 chart怎么动态增加维度？

0 0

extjs4 chart怎么动态增加维度？0

创建一个line类型的chart，刚加载的时候显示一条折线，当点击第一个按钮，chart显示两条折线，点击第二个按钮显示三条折线。能这么实现吗？求解答啊！

function getStore(fields){
var store = Ext.create('Ext.data.JsonStore', {
fields: fields,
data: [
{ 'name': 'metric one', 'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 },
{ 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 },
{ 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 },
{ 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 23 },
{ 'name': 'metric five', 'data1': 4, 'data2': 4, 'data3': 36, 'data4': 13, 'data5': 33 }
]
});
return store;
}

Ext.onReady(function() {
var fields=['name', 'data1', 'data2'];
var store=getStore(fields);

var vField=fields[0];
var hFields=[];
for ( var i = 1; i < fields.length; i++) {
    hFields.push(fields[i]);
}
var hFieldStore=[];
for ( var j = 0; j < hFields.length; j++) {
    hFieldStore.push({
        type: 'line',
        highlight: {
            size: 7,
            radius: 7
        },
        axis: 'left',
        xField: vField,
        yField: hFields[j],
        markerConfig: {
            type: 'cross',
            size: 4,
            radius: 4,
            'stroke-width': 0
        }
    });
}

var chart=Ext.create('Ext.chart.Chart', {
    id:'myChart',
    width: 500,
    height: 300,
    animate: true,
    store: store,
    axes: [
        {
            type: 'Numeric',
            position: 'left',
            fields: hFields,
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Sample Values',
            grid: true,
            minimum: 0
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: vField,
            title: 'Sample Metrics'
        }
    ],
    series: hFieldStore
});
var button=Ext.create('Ext.Button', {
    text: 'Click me',
    handler: function() {
         fields=['name', 'data1', 'data2','data3'];
         store=getStore(fields);

         vField=fields[0];
         hFields=[];
        for ( var i = 1; i < fields.length; i++) {
            hFields.push(fields[i]);
        }
        Ext.getCmp('myChart').series.clear();
        //hFieldStore=[];
        for ( var j = 0; j < hFields.length; j++) {
            var newSeries=Ext.create('Ext.chart.series.Series',{
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: vField,
                yField: hFields[j],
                markerConfig: {
                    type: 'cross',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            });
            Ext.getCmp('myChart').series.add(newSeries);
        }
        Ext.getCmp('myChart').bindStore(store);
        Ext.getCmp('myChart').redraw();
    }
});

var panel = Ext.create('Ext.panel.Panel', {
    bodyPadding: 5, // Don't want content to crunch against the borders
    width: 800,
    height:500,
    title: 'Filters',
    items: chart,
    renderTo: 'panel',
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        items: button
    }]
});
});
我写了这么写代码，报了这么个错TypeError: a.drawSeries is not a function，求解答啊