jqPlot 막대 그래프 올바르게 렌더링되지 않음

Question

jQuery Mobile 응용 프로그램에서 jqPlot을 사용하려고하고 있지만 jqPlot 사이트에서 예제 중 하나를 사용할 수 없습니다. 내 코드 :

var s1 = [2, 6, 7, 10]; 
var s2 = [7, 5, 3, 2]; 
var ticks = ['a', 'b', 'c', 'd']; 

$.jqplot('chartdiv', [s1, s2], { 
    seriesDefaults: { 
     renderer:$.jqplot.BarRenderer, 
     pointLabels: { show: true } 
    }, 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      ticks: ticks 
     } 
    } 
}); 

이 그래프를 생성한다 : X 축 레이블은 모든 위에 렌더링

주의 사항 : 대신

을,이 수 왼쪽 하단 모서리에 서로. 무엇이 차트를 잘못 렌더링 할 수 있습니까?

Answer 1

같은 문제로 고생했습니다. 몇 가지 테스트를 한 후에 실제로 범주 축 렌더러 플러그인을 포함하지 않았다는 것을 알았습니다.

그래도 같은 문제가 발생하면 포함 해보십시오.

Answer 2

HTML 파일에 잘못된 순서로 스크립트를 추가하는 또 다른 이유가 있습니다. jquery를 먼저 포함하고 jqplot을, 마지막으로 모든 플러그인을 포함해야합니다.

<script type="text/javascript" src="jqplot/jquery.min.js"></script> 
<script type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script> 

<script type="text/javascript" src="jqplot/plugins/jqplot.barRenderer.min.js"></script> 
<script type="text/javascript" src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js></script> 
<script type="text/javascript" src="jqplot/plugins/jqplot.pointLabels.min.js"></script> 

Answer 3

내 문제는 jqPlot 스크립트에 대한 참조가 헤드 블록의 내부에 배치 된 것이 었습니다. 바디 블록으로 교체 한 후에 문제가 해결되었습니다.