2013-01-17 5 views
0

JQPlot의 막대 그래프에 데이터를 올바르게 표시 할 수 있습니까? 그래프의 데이터가 x 축에서 올바르지 않습니다. 이 게시물의 하단에있는 내 이미지를 참조하십시오. 여기 JQplot이 올바르게 표시되지 않습니다.

내 코드입니다 :

var RepeatVisitRatesGraph = $.jqplot('CustomerRepeatVisitRatesGraph', [[10, 20, 30, 45], [23, 14, 34, 8], [32, 12, 45, 76]], { 
    // The "seriesDefaults" option is an options object that will 
    // be applied to all series in the chart. 
    seriesDefaults:{ 
     renderer:$.jqplot.BarRenderer, 
     rendererOptions: {fillToZero: true} 
    }, 
    // Custom labels for the series are specified with the "label" 
    // option on the series option. Here a series option object 
    // is specified for each series. 
    series:[ 
     {label:'Hotel'}, 
     {label:'Event Regristration'}, 
     {label:'Airfare'} 
    ], 
    // Show the legend and put it outside the grid, but inside the 
    // plot container, shrinking the grid to accomodate the legend. 
    // A value of "outside" would not shrink the grid and allow 
    // the legend to overflow the container. 
    legend: { 
     show: true, 
     placement: 'outsideGrid' 
    }, 
    axes: { 
     // Use a category axis on the x axis and use our custom ticks. 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      ticks: ['May', 'June', 'July', 'August'] 
     }, 
     // Pad the y axis just a little so bars can get close to, but 
     // not touch, the grid boundaries. 1.2 is the default padding. 
     yaxis: { 
      pad: 1.05, 
      tickOptions: {formatString: '$%d'} 
     } 
    } 
}); 

그리고 현재 표시되는 방법은 다음과 같습니다

enter image description here

답변

0

이를 참조하십시오, 지금은 문제가 때문입니다 생각 괜찮아요 작동 스크립트 파일을 포함하여 누락되었습니다.

http://jsfiddle.net/JWhmQ/1371/

HTML

<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasTextRenderer.js"></script> 
<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script> 

<div id="CustomerRepeatVisitRatesGraph"></div> 

막대 차트 코드

var RepeatVisitRatesGraph = $.jqplot('CustomerRepeatVisitRatesGraph', [[10, 20, 30, 45], [23, 14, 34, 8], [32, 12, 45, 76]], { 
    // The "seriesDefaults" option is an options object that will 
    // be applied to all series in the chart. 
    seriesDefaults:{ 
     renderer:$.jqplot.BarRenderer, 
     rendererOptions: {fillToZero: true} 
    }, 
    // Custom labels for the series are specified with the "label" 
    // option on the series option. Here a series option object 
    // is specified for each series. 
    series:[ 
     {label:'Hotel'}, 
     {label:'Event Regristration'}, 
     {label:'Airfare'} 
    ], 
    // Show the legend and put it outside the grid, but inside the 
    // plot container, shrinking the grid to accomodate the legend. 
    // A value of "outside" would not shrink the grid and allow 
    // the legend to overflow the container. 
    legend: { 
     show: true, 
     placement: 'outsideGrid' 
    }, 
    axes: { 
     // Use a category axis on the x axis and use our custom ticks. 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      ticks: ['May', 'June', 'July', 'August'] 
     }, 
     // Pad the y axis just a little so bars can get close to, but 
     // not touch, the grid boundaries. 1.2 is the default padding. 
     yaxis: { 
      pad: 1.05, 
      tickOptions: {formatString: '$%d'} 
     } 
    } 
}); 
관련 문제