2012-08-23 5 views
0

아무도 이걸 가지고 행운이 있었나요?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

감사

답변

3

에 관심있는 사람들을위한을 나는 발견했습니다 대답. 다음 코드는 할 것이다 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, 

: 내 게시물에 barchart.html page에서 가져온 예제 코드는 막대 애니메이션을하기 위해 (아래) 조건 구문을 필요로 표시되지 않습니다 트릭 :

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

나는 전체 문서를 읽었으며 코드를 가지고 놀고있었습니다. 결국, 나는 완전한 "예제"페이지를 가지고있다. (처음에는 문서에서 첫 번째로 나열된 이후에 처음 본 tests and examples page에 나열된 일부가 아니다.) 개발자가 코드 기반에 많은 정보, 의견 및 업데이트를 제공하는 데 너무 많은 시간을 투자했기 때문에 플러그인 코드를 이해하고 싶었습니다.

관련 문제