我如何在这个jqplot脚本中旋转x轴标签?
How can I rotate the x axis label in this jqplot script
下面是基于jqplot条形图示例的脚本的一部分。我试图旋转x轴刻度标签,因为它们重叠,我已经导入了TickRender插件,但是当我将以下代码添加到脚本下面,图形根本无法打印。
你能告诉我怎样才能正确地做这件事吗?
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
//jqplot脚本$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var s1 = [2314,2053,94,70,2541,2626,2551,2515,2147,116,82,2536,2560,2558,2465,2127,103,73,2546,2554,2583,2527,2235,104,88,2515,2604,2641,2532,2142];
var ticks = ['01/11/2012','02/11/2012','03/11/2012','04/11/2012','05/11/2012','06/11/2012','07/11/2012','08/11/2012','09/11/2012','10/11/2012','11/11/2012','12/11/2012','13/11/2012','14/11/2012','15/11/2012','16/11/2012','17/11/2012','18/11/2012','19/11/2012','20/11/2012','21/11/2012','22/11/2012','23/11/2012','24/11/2012','25/11/2012','26/11/2012','27/11/2012','28/11/2012','29/11/2012','30/11/2012'];
plot1 = $.jqplot('chart1', [s1], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true }
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
highlighter: { show: false }
});
$('#chart1').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
试试这个,
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -90,
fontSize: '10pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
}
或
axes: {
xaxis: {
renderer:$.jqplot.DateAxisRenderer,
ticks: ticks,
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -90,
fontSize: '10pt'
}
}
}
或
axes: {
xaxis: {
renderer:$.jqplot.DateAxisRenderer,
ticks: ticks,
rendererOptions:{
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -90,
fontSize: '10pt'
}
}
}
}
包含以下来自http://www.jqplot.com/examples/rotated-tick-labels.php
的文件 <script class="include" type="text/javascript" src="js/jquery.jqplot.chartCode.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.dateAxisRenderer.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.categoryAxisRenderer.js"></script>
<script class="include" type="text/javascript" src="js/plugins/jqplot.pointLabels.js"></script>
<script class="include" type="text/javascript" src="js/plugins/jqplot.barRenderer.js"></script>
<script class="include" type="text/javascript" src="js/plugins/jqplot.pieRenderer.js"></script>
相关文章:
- 在<页眉>标签
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- 知道为什么我的旋转木马不会自动更改图片吗
- iframe正在添加标签,需要删除它们
- 如何自动调整标签的高度以适应内容
- 顺时针旋转Svg元件
- 将鼠标旋转限制为特定的度数
- 轴助手上的标签与文本几何和旋转问题
- 如何在D3中获得可缩放Icicle布局中文本标签的旋转
- 根据高图表中的列值更改数据标签颜色、旋转和对齐值
- 如何使 HTML 标签旋转效果
- x-editable-botstrap select2标签-装载指示器永远旋转
- amCharts中的标签旋转不能正常工作
- 标签在x轴上的旋转变换
- Jssor旋转木马.图片来自< >标签没有出现在上次谷歌chrome浏览器更新后v 45.0.2454.85
- 光滑的旋转木马有0px的宽度,当加载在折叠标签
- D3轴标签旋转过渡不顺畅
- 图像旋转上的Disapearing A标签
- 旋转柱形图中的标签 d3.JS
- 我如何在这个jqplot脚本中旋转x轴标签?