jq绘图 :旋转轴日期标签
jqPlot : Rotate xaxis date labels
我正在尝试在我的轴上旋转日期。似乎没有考虑rotate
参数,而fontFamily
、 fontSize
和 formatString
工作。
我正在使用jqPlot 1.0.8和jQuery 1.10.2和Firefox 23.0.1
http://jsfiddle.net/JVY6a/
.HTML:
<div id="chart-blood-pressure" class="jqplot-target" data-json="{"diastolic_blood_pressure":[["2013'/09'/25 00:00:00",100],["2013'/09'/24 00:00:00",70]],"systolic_blood_pressure":[["2013'/09'/25 00:00:00",130],["2013'/09'/24 00:00:00",120]],"heart_rate":[["2013'/09'/25 00:00:00",76],["2013'/09'/24 00:00:00",85]]}"></div>
.JS:
$(document).ready(function(){
var data = $('#chart-blood-pressure').data('json');
var plot = $.jqplot('chart-blood-pressure', [data.diastolic_blood_pressure, data.systolic_blood_pressure, data.heart_rate], {
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
rendererOptions:{
tickRenderer:$.jqplot.CanvasAxisTickRenderer
},
tickInterval:'1 day',
tickOptions:{
fontSize:'10pt',
fontFamily:'Tahoma',
angle:-40,
formatString:'%b %#d, %Y',
}
},
},
});
});
你必须包含canvasAxisTickRenderer插件:外部链接在这里或来自jqPlot source("/src/plugins/jqplot.canvasAxisTickRenderer.min.js")
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
//or
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
在此处查看工作示例
相关文章:
- JQuery:单击范围标签时切换日期选择器
- 如何将选定的日期月份和年份打印到不同的DIV标签中
- 在 php 标题标签中添加日期函数
- highchart x轴未显示正确的日期标签
- gRaphaël-带标签和日期的条形图示例
- 如何自动递增选择标签中的日期
- 列的高图表日期时间标签
- 动态更改高图中x轴刻度标签的日期时间格式
- 输入标签上 7 天后的日期
- 高图表图表不同日期范围的 X 轴标签
- X 轴中的最后一个标签,日期时间格式不在高图表中
- 使用Greasemonkey为页面上的日期添加粗体标签
- jq绘图 :旋转轴日期标签
- 高图表 - 日期时间轴标签重叠
- 高图表日期时间标签格式不起作用
- Highcharts-如何将标签集中在日期时间x轴上
- 如何在标签和文本框中显示日期选取器值
- 为一个日期标签调用2个javascript函数
- Highcharts缺少xAxis上的第一个日期标签
- Struts日期标签事件