无法使用jqplot显示简单的图形

时间:2015-01-30 18:13:26

标签: javascript html5 graph jqplot

我是公司的新员工,也​​是php和jqplot的新手。 :$     我正在尝试使用jqplot创建一个简单的图形。     我按照http://www.jqplot.com/tests/line-charts.php处的所有说明进行操作     但我的div中没有​​显示任何内容:(     有人可以帮忙吗? 我认为问题可能是它没有加载jqplot文件:,(

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Capacity Report</title>
        <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../../../jqplot/excanvas.js"></script><![endif]-->


                <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
                <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
                <link rel="stylesheet" type="text/css" href="jquery.jqplot.css"/>
                <link rel="stylesheet" href="../../../css/style.css" type="text/css"/>
                <link rel="stylesheet" type="text/css" href="../../../jqplot/jquery.jqplot.css"/>
                <script type="text/javascript" src="../jquery.jqplot.min.js"></script>
                <script type="text/javascript" src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
                <script type="text/javascript" src="../../../jqplot/jquery.js"></script>
                <script type="text/javascript" src="../../../jqplot/jquery.jqplot.js"></script>
                <script type="text/javascript" src="../../jqplot/plugins/jqplot.canvasTextRenderer.js"></script>
                <script type="text/javascript" src="../../jqplot/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
               <script type="text/javascript" src="../../../jqplot/plugins/jqplot.ohlcRenderer.js"></script>
               <script type="text/javascript" src="../../../jqplot/plugins/jqplot.highlighter.js"></script>
               <script type="text/javascript" src="../../../jqplot/plugins/jqplot.dateAxisRenderer.js"></script>
                <script type="text/javascript" src="../../../jqplot/plugins/jqplot.canvasAxisTickRenderer.js"></script>
                <script type="text/javascript" src="../../../jqplot/plugins/jqplot.trendline.js"></script>
    </head>

    <body>

               <div id="chartdiv" style="height:400px;width:300px; ">graph1</div>
               <div id="chart1" style="height:400px;width:300px; ">graph2</div>
</body>
</html>

<script>  $.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]); 
$(document).ready(function(){
        console.log("It works!!!");
        var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
    });
</script>

1 个答案:

答案 0 :(得分:0)

大家好,我解决了我的错误! 问题出在文件路径中!经过几个小时的游戏,我意识到我试图用错误的路径打开jqplot文件! :P 希望这会帮助其他人解决同样的问题 这是我最后的工作代码100%防弹:)

<html>

<head>
<title>Working plots functions</title>

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jqplot/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jqplot/jquery.jqplot.min.js"></script>

</head>

<body>
<script type="text/javascript">

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

$(document).ready(function(){
        console.log("It works!!!");
        var plot1 = $.jqplot ('chart2', [[3,7,9,1,5,6,8,2,5]]);
    });
</script>
Here is the start of the page...<br>

<div id="chart1" style="height:400px;width:300px;">graph1</div>
<div id="chart2" style="height:400px;width:300px;">graph2</div>

</body>

</html>