今天用jqplot做图,发现横坐标设置倾斜角度的angle属性无效。
直接说方法,将下面文件全部引用就可以解决。
<script language="javascript" type="text/javascript" src="/dist/jquery-1.4.4.js"></script>
<script language="javascript" type="text/javascript" src="/dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="/dist/plugins/jqplot.logAxisRenderer.min.js"></script>
<script type="text/javascript" src="/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="/dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="/dist/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="/dist/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="/dist/plugins/jqplot.barRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="/dist/jquery.jqplot.css" />
引用后用下面代码测试:
<div id="chart1" style="margin-top:20px; margin-left:20px; width:1200px; height:300px;"></div>
<script type="text/javascript">
$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var ticks = ['aaaa', 'bbbb', 'ccccc', 'dddddd'];
plot1 = $.jqplot('chart1', [s1], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle:-40
}
}
},
highlighter: { show: false }
});
$('#chart1').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
</script>
效果: