0

我遵循了一些我发现的例子(即 - http://www.jqplot.com/tests/rotated-tick-labels.php),但我仍然无法让我的 xAxis 上的刻度以任何其他角度呈现,除了默认。

我的代码:

$(document).ready(function(){
var s1 = <%= @funding_documents.map { |f| f.authorized_amount.to_i } %>;
var s2 = <%= @funding_documents.map { |f| f.budget_at_completion.to_i } %>;
var s3 = <%= @funding_documents.map { |f| f.assigned_cost.to_i } %>;
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = <%= raw @funding_documents.map { |f| f.funding_document_number } %>;

var plot1 = $.jqplot('chart2', [s1, s2, s3], {
  // The "seriesDefaults" option is an options object that will
  // be applied to all series in the chart.
  tite: 'Project Funding',
  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:'Authorized'},
      {label:'Budgetted'},
      {label:'Assigned'}
  ],
  // 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'
  },
  axesDefaults: {
  },
  axes: {
      // Use a category axis on the x axis and use our custom ticks.
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: ticks,
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            angle: -45,
            fontSize: '8pt'
        }
      },
      // 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.2,
        tickOptions: {
          formatString: '$%d',
          angle: 0
        }
      }
  }
});

});

我还包括了教程中提到的所有文件:

<script src="/assets/jqplot/jquery.jqplot.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jqplot/plugins/jqplot.barRenderer.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jqplot/plugins/jqplot.categoryAxisRenderer.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jqplot/plugins/jqplot.pointLabels.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jqplot/plugins/jqplot.canvasTextRenderer.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jqplot/plugins/jqplot.dateAxisRenderer.min.js?body=1" type="text/javascript"></script>

不知道此时还能做什么。

4

1 回答 1

2

导入此 JavaScript 文件:plugins/jqplot.canvasAxisTickRenderer.min.js.

于 2012-08-31T06:15:40.623 回答