Question

我需要在网站上创建图表。

在我的HTML代码中，我创建了一个带ID的div。

这是我的HTML代码：

<script src="/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/jquery.jqplot.min.css" />
<script language="javascript" type="text/javascript" src="/js/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="/js/graph.js"></script>


<body>
    <div id="graph" style="height:400px;width:300px;></div> //i want to have my chart here
</body>

在js代码中，我只在jqPlot的官方网站上写了一个例子：

$(document).ready(function() {
    var chart_data = [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]];
    var chart_opt = {
        title:'Graph',
        axes:{yaxis:{min:-10, max:240}},
        series:[{color:'#5FAB78'}]
    };
    $.jqplot('graph', chart_data, chart_opt); 
});

所以我的问题是我在浏览器的控制台上有错误：$ .jqplot不是函数

有什么想法吗？

Answer 1

您收到此错误是因为您在$(document).ready(function()中有jqplot。尝试这样的事情。

 $(document).ready(function(){
   GetChart();
});


function GetChart(){
    var chart_data = [[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]];

    $('#graph').jqplot([chart_data], {
        title:'Default Bar Chart',
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer
        },
        axes:{
            xaxis:{
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });
    }

以下是一个工作示例 - https://jsfiddle.net/xrnfqax3/

要使此示例起作用，您需要将以下引用添加到项目中 -

jquery.min.js
jquery.jqplot.js
jquery.jqplot.css
jqplot.barRenderer.js
jqplot.barRenderer.min.js
jqplot.categoryAxisRenderer.js
jqplot.categoryAxisRenderer.min.js

Answer 2

确保jquery - * .js顺序在jqPlot.js之前。

并在所有脚本标记上使用language =“javascript”type =“text / javascript”。

最好的问候

jqPlot：$ .jqPlot不是函数错误

2 个答案: