Question

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

Answer 1

我也把这个库用于一个项目，它真的很棒！..我只是检查你发布它的例子，我发现它导致你一个错误，你只需要更改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没有定义错误。

我希望它有所帮助！

Answer 2

您需要删除

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

或者用

代替

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

你的 document.write 语句正在用你提到的内容替换你的html页面的正文部分（这里'＆lt; p＆gt;它有效！＆lt; / p＆gt;）。

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

PS ：不必包含所有关闭jqplot插件来绘制图表。如果它不会变得更复杂，我建议你只包括“css / jquery.jqplot.css”和“js / jquery.jqplot.js”。对于更复杂的图形，仅包含必要的插件（例如，如果需要使用日期轴，则为“js / jqplot.dateAxisRenderer.js”）。

修改

请参阅工作jsFiddle here，尝试使用两个“document.write”行（尝试发表评论并取消注释）。

JqPlot - 不显示简单图形

2 个答案: