如何使用 Flot 显示空白图表

发布于 2024-12-23 17:43:11 字数 730 浏览 0 评论 0原文

正如标题所述，我希望为我正在为工作构建的财务计算器显示一个空白的“模板”图表（我的意思是网页将显示一个没有任何线条的图表）。网页的基本设置将在顶部有一个空白图表，下面有一个 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 的宽度和高度属性，而不是使用宽度和高度来设置它们的样式。修复后，就可以了！此处显示的所有代码现在都可以正常工作。

原文

Just as the title states, I'm looking to display a blank "template" graph (by which, I mean that the webpage will display a graph without any lines on it) for a finance calculator that I'm building for work. The basic setup of the webpage will have a blank graph at the top with an HTML form below to accept data entry. Once the user inputs the data and clicks submit, the graph should populate with that data.

Two questions arise from this. First, is it even possible? Second, if it is possible, what would I pass into the $.plot() function? Here is what I'm working with so far:

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

Any advice would be greatly appreciated! Thank you!

EDIT:
I forgot to mention this. When I go to view this webpage, Firebug gives me this error message:

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

EDIT FOR ANSWER:
It seems that the error message was coming from me using the width and height attributes of the div, instead of styling them with width and height. After fixing that, it works! All code displayed here now works properly.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉生梦死 2024-12-30 17:43:11

只需抛弃 null 即可。如果您想要一个空的“盒子”，则不传递任何数据数组：

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

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

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

在此处输入图像描述

运行代码：

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script data-require="[email protected]" 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>

Just ditch the null. If you want an empty "box" pass no data arrays:

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

If you want a "plot" with no data, pass an empty data array:

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

enter image description here

Running code:

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script data-require="[email protected]" 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>

回复收藏 0 原文

~没有更多了~