如何動畫jqplot條形圖，如示例

有沒有人有這樣的運氣？如何動畫jqplot條形圖，如示例

我複製並粘貼確切示例代碼在這裏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

感謝

來源

2012-08-23 Chris22

任何有興趣，我發現答案。從barchart.html page在我的崗位採取的示例代碼似乎並不需要條件的語法（如下圖），以動畫吧：在examples page

$.jqplot.config.enablePlugins = true; 

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

從動畫例如，下面的代碼將執行技巧：

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

我讀了整個文檔，並做了大量的代碼遊戲。最終，我得到了完整的「示例」頁面（不是我最初查看的tests and examples page中列出的幾個，因爲它是在文檔中列出的第一個）。我真的很想理解插件代碼，因爲開發人員花了很多時間來真正提供大量的信息，評論和更新他的代碼庫。

來源

2012-08-27 21:38:00 Chris22

如何動畫jqplot條形圖，如示例

回答

相關問題