JqPlot-不显示简单的图形

JqPlot - Does not show simple graph

本文关键字：图形 简单 显示 JqPlot-      更新时间：2023-09-26

我对Javascrip/Jquery/Jqplot真的很陌生，我正在努力自学。然后我有一些问题，这段代码足以显示一个简单的图形吗？因为它不起作用，所以它显示一个空白页。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.css" />
<script language="javascript" type="text/javascript" src="js/jqplot.canvasTextRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="js/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="js/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="js/jqplot.ohlcRenderer.js"></script>
<script language="javascript" type="text/javascript" src="js/jqplot.highlighter.js"></script>
<script language="javascript" type="text/javascript" src="js/jqplot.cursor.js"></script>
<script language="javascript" type="text/javascript" src="js/customCandlestick.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        document.write("<p>It works!!!</p>");
        var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
    });
</script>
</head>
<body>
<div id="chart1"></div>
</body>
</html>

我在一个项目中也使用了这个库，它真的很好！。。我只是检查了你发布的例子，发现是什么导致了你的错误，你只需要更改document.write语句，如果你使用console.log函数，它就会起作用。

前任。

$(document).ready(function(){
        console.log("It works!!!");
        var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
    });

另一件重要的事情是，这个库使用jquery，所以你需要在jquery引用之后引用jqplot的所有js文件，以避免jquery没有定义的错误。

我希望它能有所帮助！

您需要删除

document.write('<p>It works!!!</p>');

或者用代替

document.write('<p>It works!!!</p><div id="chart1"></div>');

您的document.write语句正在用您所提到的内容替换html页面的正文部分（此处为'<p>它有效！</p>）。

因此，您的html页面不再包含任何id为"chart1"的div。当您指定jqplot在用"chart1"标识的div中绘制图形时（document.write语句已将其删除），看不到图形是正常行为。

PS：绘制图形时不必包含所有非jqplot插件。如果它不会变得更复杂，我建议您只包括"css/jquery.jqplot.css"answers"js/jquery.jqplot.js"。对于更复杂的图形，只包括必要的插件（例如，如果需要使用日期轴，请使用"js/jqplot.dateAxisRenderer.js"）。

编辑

请参阅这里的工作jsFiddle，尝试使用两行"document.write"（尝试对它们进行注释和取消注释）。

相关文章：