Extjs Ext Flot动态更改图表值

我正在使用Ext flot在我的应用程序上绘制图表。我想用ajax请求或按钮更新图表数据。我无法更新值。有人有主意吗

var graphDataArr = [{ label: 'My Graph', data: myDataArray, color: '#46F252', hoverable: false, clickable: false }];

new Ext.Window({
    header      : false,
    layout      : 'anchor',
    height      : 200,
    width       : 750,
    baseCls     : 'ext_panel_header_bar',
    items       : [ {
        xtype       : 'flot',
        id          : 'flotGraph',
        cls         : 'x-panel-body',
        series      : graphDataArr,
        xaxis       : {
            min : xMin,
            max : xMax
        },
        yaxis       : {
            min : yMin,
            max : yMax
        },
        tooltip     : false,
        anchor      : '98% 99%'
    } ]
}).show();

---

Ext Flot API文档说明：

setData( Array Series ) : void

You can use this to reset the data used. Note that axis scaling, ticks, legend etc. will not be recomputed (use setupGrid() to do that). You'll probably want to call draw() afterwards. 

You can use this function to speed up redrawing a plot if you know that the axes won't change. Put in the new data with setData(newdata) and call draw() afterwards, and you're good to go.

您可以在按钮处理程序中执行以下操作（其中，

dataArray

是您的新数据数组）：

---

如果您已经以Json/property格式从web应用程序发送了记录，那么您只需创建JavaScript，就可以在button/submit按钮上调用它

    function createCharts() {

    var queryString = $('#mainForm').formSerialize();
    var url_String = "runChartData.action" + '?'+queryString+'&selectedModule=Line';// URL to call ajax

    $.ajax({ 
          type: "post",
          dataType: "json",
          url: url_String,
          async : true,
          success: function(data){ 

                chartData = data;

                        createChart(data); // the Method you have Created As I have created Bellow


        }, error: function(data){
            $('#chartDiv').empty(); //empty chart Div to recreate it.

        }
     });
}


createChart(var myDataArray){

$('#chartDiv').empty(); // reset to Create New Chart with new Data

var graphDataArr = [{ label: 'My Graph', data: myDataArray, color: '#46F252', hoverable: false, clickable: false }];

new Ext.Window({
    header      : false,
    layout      : 'anchor',
    height      : 200,
    width       : 750,
    baseCls     : 'ext_panel_header_bar',
    items       : [ {
        xtype       : 'flot',
        id          : 'flotGraph',
        cls         : 'x-panel-body',
        series      : graphDataArr,
        xaxis       : {
            min : xMin,
            max : xMax
        },
        yaxis       : {
            min : yMin,
            max : yMax
        },
        tooltip     : false,
        anchor      : '98% 99%'
    } ]
}).show();

}

---

/*数据数组格式必须如下*/dataArrayGraph=[{标签：“我的图形”，数据：dataArray，颜色：'#46F252'，可悬停：false，可点击：false}]
    function createCharts() {

    var queryString = $('#mainForm').formSerialize();
    var url_String = "runChartData.action" + '?'+queryString+'&selectedModule=Line';// URL to call ajax

    $.ajax({ 
          type: "post",
          dataType: "json",
          url: url_String,
          async : true,
          success: function(data){ 

                chartData = data;

                        createChart(data); // the Method you have Created As I have created Bellow


        }, error: function(data){
            $('#chartDiv').empty(); //empty chart Div to recreate it.

        }
     });
}


createChart(var myDataArray){

$('#chartDiv').empty(); // reset to Create New Chart with new Data

var graphDataArr = [{ label: 'My Graph', data: myDataArray, color: '#46F252', hoverable: false, clickable: false }];

new Ext.Window({
    header      : false,
    layout      : 'anchor',
    height      : 200,
    width       : 750,
    baseCls     : 'ext_panel_header_bar',
    items       : [ {
        xtype       : 'flot',
        id          : 'flotGraph',
        cls         : 'x-panel-body',
        series      : graphDataArr,
        xaxis       : {
            min : xMin,
            max : xMax
        },
        yaxis       : {
            min : yMin,
            max : yMax
        },
        tooltip     : false,
        anchor      : '98% 99%'
    } ]
}).show();

}