正如标题所述,我希望为我正在构建的金融计算器显示一个空白的"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"), [[]]);
});
运行代码:
<!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/