jq绘图 :旋转轴日期标签

jqPlot : Rotate xaxis date labels

本文关键字:日期 标签 旋转 绘图 jq      更新时间:2023-09-26

我正在尝试在我的轴上旋转日期。似乎没有考虑rotate参数,而fontFamilyfontSizeformatString 工作。

我正在使用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="{&quot;diastolic_blood_pressure&quot;:[[&quot;2013'/09'/25 00:00:00&quot;,100],[&quot;2013'/09'/24 00:00:00&quot;,70]],&quot;systolic_blood_pressure&quot;:[[&quot;2013'/09'/25 00:00:00&quot;,130],[&quot;2013'/09'/24 00:00:00&quot;,120]],&quot;heart_rate&quot;:[[&quot;2013'/09'/25 00:00:00&quot;,76],[&quot;2013'/09'/24 00:00:00&quot;,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>

在此处查看工作示例