如何使用输入数据加载新的extjs图表

How to use the input data to load the new extjs chart?

本文关键字:extjs 图表 加载 何使用 输入 数据      更新时间:2023-09-26

我从xml文件加载了输入数据。然后用户从下拉列表中选择值。我使用选定的值来重新加载图表。每次用户重新选择该选项时,都会重新加载图表。这是extjs 4。

如何使用新选择的值重新加载图表的新代理url,并更新图表以反映新选择?谢谢

Ext.define('Column',{
            extend: 'Ext.data.Model',
            fields: [
                     'data1','Data2']
        });
var store = Ext.create('Ext.data.Store', {
            model: 'Column',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url:'/data.xml',
                reader:{
                    type:'xml',
                    record: 'result'
                }
            }
        });
var store2 = Ext.create('Ext.data.Store', {
            model: 'Column',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url:'/data2.xml?selectvalue=',
                reader:{
                    type:'xml',
                    record: 'result'
                }
            }
        });
var mychart = Ext.create('Ext.chart.Chart', {
        width: 400,
        height: 200,
        renderTo: 'ChartsDiv',
        store: store2,
        axes: [{
            type: 'gauge',
            position: 'gauge',
            minimum: 0,
            maximum: 100,
            steps: 10,
            margin: 20
        }], 
        series: [{
            type: 'gauge',
            field: 'data2',
            donut: 40,
            colorSet: ['#843525', '#ddd']
        }]
    });
var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
            store: store,
            displayField: 'data1',
            valueField: 'data1' ,
            width: 250,
            labelWidth: 120,
            fieldLabel: 'select a value',
            renderTo: 'simpleCombo',
            queryMode: 'local',
            typeAhead: true,
            listeners:{
            change: function(combo,records){
                var selectedValue= simpleCombo.getValue();
                Ext.Msg.alert(selectedValue);   
            }
        });

如果我正确理解你的问题,你想根据对组合框的更改来更改store2的URL吗?

change: function(combo, records){
    var selectedValue = combo.getValue();
    store2.proxy.url = "/data2.xml?selectvalue=" + selectedValue;
    // Load the store with a callback function to redraw the chart
    store2.load(function(records, operation, success){
        if(success){
            chart.redraw();
        }
    });
}