2013-01-17 226 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

看到這,現在它的工作原理fine.I認爲這個問題是由於包括腳本文件丟失

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'} 
     } 
    } 
});