javascript - 如何用 Flot 显示空白图形

标签 javascript html graph flot

正如标题所述,我希望为我正在构建的金融计算器显示一个空白的"template"图表(我的意思是网页将显示一个没有任何线条的图表)工作。网页的基本设置将在顶部有一个空白图表,下面有一个 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 给我这个错误信息:

uncaught exception: Invalid dimensions for plot, width = 928, height = 0

编辑答案: 错误消息似乎是我使用 div 的宽度和高度属性发出的,而不是使用宽度和高度来设置它们的样式。修复后,它可以工作!此处显示的所有代码现在都可以正常工作。

最佳答案

只需放弃 null。如果您想要一个空的“框”,则不传递任何数据数组:

$(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>

关于javascript - 如何用 Flot 显示空白图形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8716028/

相关文章:

Javascript 范围 - 无法访问范围之外的值

javascript - 在 Javascript 中使用 document.selection 时同时创建多个选择

html - 添加 margin-right % 将最后一项放在下一行

java - 具有输入和输出端口的 GraphStream 节点

c# - 使用 .NET 绘制图形

csv - 在外部 csv 中创建带有 highcharts 和数据的折线图

Javascript递归,foreach循环不会退出?

javascript - 计算图片内对象的大小

javascript - Backbone JS - 缓存 View 实例

javascript - 添加了不触发脚本的自定义属性