Question

我遇到类似JQPlot Basic Chart not displaying报告的类似问题，尽管查看了它的建议并检查了示例的源代码，但我无法正常工作。我复制了大部分示例代码（http://www.jqplot.com/tests/bar-charts.php中的第一个示例），然后包含源代码中的javascript链接（view-source：http://www.jqplot.com/tests/bar-charts.php），但没有显示任何内容。请参阅下面的代码。我做错了什么？

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title> jqplottest </title>
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://www.jqplot.com/src/jquery.jqplot.min.css" />

    <script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.barRenderer.min.js"></script>
    <script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
    <script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.pointLabels.min.js"></script>

     <script type="text/javascript">
    /* following script code -$(document).ready(function()- is exact copy of original example code*/     
    $(document).ready(function(){
        var s1 = [200, 600, 700, 1000];
        var s2 = [460, -210, 690, 820];
        var s3 = [-260, -440, 320, 200];
        // Can specify a custom tick Array.
        // Ticks should match up one for each y value (category) in the series.
        var ticks = ['May', 'June', 'July', 'August'];

        var plot1 = $.jqplot('chart1', [s1, s2, s3], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
            rendererOptions: {fillToZero: true}
            },
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series:[
            {label:'Hotel'},
            {label:'Event Regristration'},
            {label:'Airfare'}
            ],
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
            pad: 1.05,
            tickOptions: {formatString: '$%d'}
            }
        }
    });
});

</head>
<body>

    <div id="chart1" style="width:600px; height:250px;"></div>
</body>
</html>

Answer 1

从您发布的EXACT代码中，您在结束选项卡之前缺少结束标记。也许这就是问题。

JQplot条形图示例未显示

1 个答案: