logo标签列表

JQPlot - 未指定绘图目标

jqueryjquery-pluginsjqplot
11
我正在尝试使用以下代码绘制 jqplot ：
<script lang="javascript" type="text/javascript">
    $(document).ready(function () {



        var line1 = var line1 =[["10.01.2011",3.9990],["11.01.2011",3.9910],["12.01.2011",4.0140],["13.01.2011",3.9940],["14.01.2011",3.9050],["17.01.2011",3.9340],["18.01.2011",3.9520],["19.01.2011",3.8980],["20.01.2011",3.8690],["21.01.2011",3.8830],["24.01.2011",3.8550],["25.01.2011",3.8480],["26.01.2011",3.8190],["27.01.2011",3.8440],["28.01.2011",3.8260],["31.01.2011",3.8060],["01.02.2011",3.7970],["02.02.2011",3.8060],["03.02.2011",3.8110],["04.02.2011",3.8640],["07.02.2011",3.8750],["08.02.2011",3.8640],["09.02.2011",3.8480],["11.02.2011",3.8570],["14.02.2011",3.8880],["15.02.2011",3.88],["16.02.2011",3.8520],["17.02.2011",3.8590],["18.02.2011",3.8690],["22.02.2011",3.8440],["23.02.2011",3.8080],["24.02.2011",3.7410],["25.02.2011",3.7460],["28.02.2011",3.7550],["01.03.2011",3.7520],["02.03.2011",3.76],["03.03.2011",3.7420],["04.03.2011",3.7430],["07.03.2011",3.7330],["08.03.2011",3.7260],["09.03.2011",3.76],["10.03.2011",3.7910],["11.03.2011",3.79]]; 

        var plot1 = $.jqplot('chart1', [line1], {
            title: 'Default Date Axis',
            axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer } },
            series: [{ lineWidth: 4, markerOptions: { style: 'square' } }]
        });
    });
</script>

它是通过一些C#代码生成的，但最终页面源代码看起来像是呈现的代码。 图表没有被绘制，jquery会抛出异常：No plot target specified。 这是什么原因？

2个回答
18

请确保你的HTML中包含一个带有ID为chart1的元素（通常是div）。

jqplot源代码如下：

this.init = function(target, data, options) {

    this.target = $('#'+target);

    ....

    if (!this.target.get(0)) {
        throw "No plot target specified";
    }

    ....
}

看起来这是代码中唯一出现该错误的地方。请注意，在target前加上了#字符，因此需要确保target是一个有效的Id。

1

使用您的代码创建完全功能的HTML页面。只需将“../../libs/jQuery.jqPlot.1.0.9/”替换为指向本地jqPlot安装文件夹的路径。

请注意包含所需的jqplot.dateAxisRenderer.js插件！我花了一些时间才发现没有它图表无法呈现 :)

<!doctype html>
<html>
<head>
    <title>iqPlot Sample</title>
    <link rel="stylesheet" type="text/css" href="../../libs/jQuery.jqPlot.1.0.9/jquery.jqplot.min.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../../libs/jQuery.jqPlot.1.0.9/excanvas.js"></script><![endif]-->
    <script src="../../libs/jQuery.jqPlot.1.0.9/jquery.jqplot.min.js"></script>
    <script src="../../libs/jQuery.jqPlot.1.0.9/plugins/jqplot.dateAxisRenderer.js"></script>

<script>
$(document).ready(function () {
    var line1 = [["10.01.2011",3.9990],["11.01.2011",3.9910],["12.01.2011",4.0140],["13.01.2011",3.9940],["14.01.2011",3.9050],["17.01.2011",3.9340],["18.01.2011",3.9520],["19.01.2011",3.8980],["20.01.2011",3.8690],["21.01.2011",3.8830],["24.01.2011",3.8550],["25.01.2011",3.8480],["26.01.2011",3.8190],["27.01.2011",3.8440],["28.01.2011",3.8260],["31.01.2011",3.8060],["01.02.2011",3.7970],["02.02.2011",3.8060],["03.02.2011",3.8110],["04.02.2011",3.8640],["07.02.2011",3.8750],["08.02.2011",3.8640],["09.02.2011",3.8480],["11.02.2011",3.8570],["14.02.2011",3.8880],["15.02.2011",3.88],["16.02.2011",3.8520],["17.02.2011",3.8590],["18.02.2011",3.8690],["22.02.2011",3.8440],["23.02.2011",3.8080],["24.02.2011",3.7410],["25.02.2011",3.7460],["28.02.2011",3.7550],["01.03.2011",3.7520],["02.03.2011",3.76],["03.03.2011",3.7420],["04.03.2011",3.7430],["07.03.2011",3.7330],["08.03.2011",3.7260],["09.03.2011",3.76],["10.03.2011",3.7910],["11.03.2011",3.79]]; 
    var plot1 = $.jqplot('chart1', [line1], {
        title: 'Default Date Axis',
        axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer } },
        series: [{ lineWidth: 4, markerOptions: { style: 'square' } }]
    });
});
</script>
</head>
<body>
<div id="chart1"></div>
</body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接