浮動圖：圖不反映對數據的更改

Question

我正在構建一個使用jQuery和flot庫的交互式圖表。

在以下示例中，用戶可以更改輸入框中的值，但圖表不反映更改。

HTML

<br/> 
<br/> 
<div id="placeholder" style="width:400px;height:300px;"></div> 
<input id="UpdatePointx" type="text"> 
<input id="UpdatePointy" type="text"> 
<input id="SetValue" value="Set Values" type="button"> 

的Javascript

var Point = { 
    label: "TEW", 
    points: { 
    show: true 
    }, 
    data: [ 
    [10, 5] 
    ] 
}; 
var Lines = { 
    label: "Line", 
    points: { 
    show: true 
    }, 
    data: [ 
    [0, 0], 
    [1, 1], 
    [2, 2], 
    [3, 3], 
    [4, 4], 
    [5, 5], 
    [6, 6], 
    [7, 7], 
    [8, 8], 
    [9, 9] 
    ] 
}; 

$("[id='SetValue']").click(function() { 
    alert("Set values in the input boxes"); 
    var mypt1 = Point.data[0][0]; 
    var mypt2 = Point.data[0][1]; 
    $('#UpdatePointx').val(mypt1.toString()); 
    $('#UpdatePointy').val(mypt2.toString()); 
}); 


$("[id='UpdatePointx']").change(function() { 
    alert("UpdatePointx"); 
    var pointx = $('#UpdatePointx').val(); 
    Point.data[0][0] = pointx; 
    alert(Point.data[0][0].toString()); 
    //$.plot; 
    plot.setData(Point); 
    plot.setupGrid(); 
    plot.draw(); 
}); 

$("[id='UpdatePointy']").change(function() { 
    alert("UpdatePointy"); 
    var pointy = $('#UpdatePointy').val(); 
    Point.data[0][1] = pointy; 
    alert(Point.data[0][1].toString()); 
    //$.plot; 
    plot.setData(Point); 
    plot.setupGrid(); 
    plot.draw(); 
}); 

$(function() { 

    var options = { 
    series: { 
     legend: { 
     show: true 
     }, 
     lines: { 
     show: true 
     }, 
    } 
    }; 

    var plot = $.plot($("#placeholder"), [Point, Lines], options); 
}); 

jsfiddle

Answer 1

1）您plot變量jQuery的domready中函數中定義，而不是在change()功能來訪問。你可以把它而不是一個全局變量：

plot = $.plot($("#placeholder"), [Point, Lines], options); 

2）當你必須給數據系列陣列就像在第一$.plot()調用change()功能使用plot.setData()：

plot.setData([Point, Lines]); 

更新小提琴：http://jsfiddle.net/6Lw1vkhe/49/