Ext Flot动态更改图表值

Question

我正在使用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(); 

Answer 1

分机海军报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是新的数据排列）：

var chart = Ext.getCmp('flotGraph');  
chart.setData(dataArray); 
chart.setupGrid(); 
chart.draw(); 

Answer 2

，如果你有送从JSON/Proper格式的Web应用程序记录，然后您可以简单地创建JavaScript，您可以通过按钮/提交按钮来调用。

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(); 

}