如何为 jqplot 条形图设置动画，例如示例答案

【问题标题】：how to animate jqplot bar chart like example如何为 jqplot 条形图设置动画，例如示例
【发布时间】：2012-08-23 21:18:16
【问题描述】：

有人遇到过这种情况吗？

我将此处的 exact 示例代码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>

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

谢谢

【问题讨论】：

标签： jqplot bar-chart

【解决方案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 中列出的少数几个，因为它在文档中首先列出）。我真的很想了解插件代码，因为开发人员花了很多时间来真正提供大量信息、cmets 和代码库更新。

【讨论】：