我遵循了一些我发现的例子(即 - 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>
不知道此时还能做什么。