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.setData()函数中使用change()时，您必须提供一系列数据系列，就像在第一次$.plot()调用中一样：

plot.setData([Point, Lines]);

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

图表：图表不反映数据的变化

1 个答案: