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

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是您的新数据数组）：

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

}

Ext Flot动态更改图表值

2 个答案: