Question

有没有人对此有任何好运？

我将完全示例代码http://www.jqplot.com/deploy/dist/examples/barTest.html复制并粘贴到我的文本编辑器中。我添加了所有必需的.js文件和.css文件。当我在任何浏览器中运行页面时，我没有看到条形图或动画。我已经查看了上面这个URL的源代码，看看它是如何工作的。有人能告诉我为什么我可以在URL上设置动画条形图而不是我的桌面吗？有什么不同？这是我复制的确切代码：

<html>
 <title>Untitled Document</title>

<link rel="stylesheet" href="js/jquery.jqplot.min.css" type="text/css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>


<script>

$(document).ready(function(){

        $.jqplot.config.enablePlugins = true;
        var s1 = [2, 6, 7, 10];
        var ticks = ['a', 'b', 'c', 'd'];

        plot1 =  $.jqplot('chart1', [s1], {
            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
            animate: !$.jqplot.use_excanvas,
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                }
            },
            highlighter: { show: false }
        });

        $('#chart1').bind('jqplotDataClick', 
            function (ev, seriesIndex, pointIndex, data) {
                $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
            }
        );
    });
    </script>
</head>

<body>
<div id="chart1" style="margin-top: 20px; margin-left: 20px;width: 300px; height: 300px; position: relative;"></div>


<div><span>Moused Over: </span><span id="info1">Nothing</span></div>
</body>
</html>

这是我在运行该代码后在浏览器中看到的内容：

enter image description here

由于

Answer 1

对于任何有兴趣的人，我都找到了答案。从我的帖子中的barchart.html page获取的示例代码似乎不需要条件语法（如下所示）来为条形图设置动画：

$.jqplot.config.enablePlugins = true;

// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
        animate: !$.jqplot.use_excanvas,

从examples page的动画示例中，以下代码将起到作用：

animate: true,
    // Will animate plot on calls to plot1.replot({resetAxes:true})
    animateReplot: true,

我阅读了整个文档，并且正在大量使用代码。最后，我进入了完整的“示例”页面（不是我最初查看的tests and examples page上列出的少数页面，因为它在文档中首先列出）。我真的很想了解插件代码，因为开发人员花了很多时间真正为他的代码库提供大量的信息，评论和更新。

如何动画jqplot条形图像示例

1 个答案: