Question

正如标题所述，我正在寻找一个空白的“模板”图表（我的意思是，网页将显示一个没有任何行的图表），我正在建立一个财务计算器工作。网页的基本设置顶部会有一个空白图表，下面有一个HTML表单来接受数据输入。用户输入数据并单击提交后，图表应填充该数据。

由此产生了两个问题。首先，它甚至可能吗？其次，如果有可能，我会将什么传递给$ .plot（）函数？以下是我到目前为止所做的工作：

<div id="main-content">
    <div id="chart" style="width:600px;height:300px;"></div>
    <script type="text/javascript">
        $(document).ready(function() {
            $.plot($("#chart"), [[null]]);
        });
    </script>
</div>

任何建议都将不胜感激！谢谢！

编辑：我忘了提这个。当我去查看此网页时，Firebug给出了以下错误消息：

未捕获的异常：绘图的尺寸无效，宽度= 928，高度= 0

编辑答案：似乎错误信息来自我使用div的width和height属性，而不是使用宽度和高度设置它们。修好后，它有效！此处显示的所有代码现在都能正常运行。

Answer 1

放弃空。如果你想要一个空的“盒子”传递没有数据数组：

$(document).ready(function() {
  $.plot($("#chart"), []);
});

如果您想要一个没有数据的“情节”，请传递一个空数据数组：

$(document).ready(function() {
  $.plot($("#chart"), [[]]);
});

enter image description here

运行代码：

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script data-require="flot@0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
</head>

<body>
  <div id="chart" style="width:200px; height:200px"></div>
  <script>
    $(document).ready(function() {
      $.plot($("#chart"), [
        []
      ]);
    });
  </script>
</body>

</html>

如何用Flot显示空白图

1 个答案: