jqueryflot图表x轴坐标过长完美解决方案(转)

近段时间,项目中使用到了flot这个图表工具,在实际使用的过程中,遇到了一个看似很简单的问题:当坐标的刻度如果过长时,会重叠在一起,影响阅读:

看到这个效果后的第一反应就是,能不能让坐标斜着显示啊?去查阅flot的文档,竟然没有留斜着显示的接口。只有标签的宽度labelWidth和高度labelHeight的设置。不甘心,还是去网上海搜,在google code的flot专区找到了有人在问,也有回答的几个方案:

方案1:改源码

有一大神修改了flot的源码,加入了一个labelAngle用于控制标签的角度,并将具体的改动的过程贴了出来,我本来打算的是,按照改源码的思路去做,可能是因为使用的flot的版本不一致,大神贴出来的代码中有一部分代码我使用的版本里面没有,而我对js这块并不精通,也不想换flot为低版本的,于是乎放弃掉改源码这一思路。

方案2:在HTML中自己写css进行角度控制

在图表生成的HTML中,加入如下的css进行控制label的角度。

.tickLabel

{

-o-transform:rotate(-60deg);

-moz-transform:rotate(-60deg);

-webkit-transform:rotate(-60deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

于是,我按照此思路来了一试,不中,不管用啊。。。自己查找了一下,找到原因了,在flot的源码中有如下代码:

这里,flot是如果用户自己指定了font属性,则使用用户指定的font,如果没有指定,则将font的class设置为”flot-tick-label tickLabel”,而我之前自己指定过font,因此,在生成图表时,并不会有class=”flot-tick-label tickLabel”的元素,这也是为什么我加入css控制后不起作用的原因。于是,删掉自己定义的font,再看,在火狐浏览器里,完美。可是到IE浏览器里面看看,

IE里面只有90度,这是怎么回事,原来IE并不支持transform,而IE使用的是MatrixFilter。这里旋转90度对应的是css中的如下的代码:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

rotation的值 0代表0°,1代表顺时针90°,2代表顺时针180°,3代表顺时针270°4代表顺时针360°,以此类推。

此方案并不是十分完美,存在的问题和注意的事项如下:

1、在生成图表时,一定不要指定font属性,否则不能生效

2、最致命的问题在于,IE中的角度太固定,只有90°,不完美。

基于以上两种思路,我结合了一下,考虑出如下的一种,还算完美的思路:

3> css控制字体,jquery.rotate.js控制旋转角度

在生成图表时,不要指定font,而用css来控制字体样式:

.xAxis >.tickLabel

{

font-size: 10px;

margin-top: 20px;

}

字体控制好了,怎么旋转角度呢?去网上搜了一下,发现了一个jQueryRotate.js的插件,可用于控制dom元素旋转的插件。引入该插件后,可使用如下语法来控制:

$(".xAxis > .tickLabel").rotate(-45);

方法的参数即为要旋转的角度。

这种方法还算比较完美,在IE,火狐,chrome,opera等主流浏览器中均能完美运行。但有一个注意事项,生成图表时不能指定字体。

xaxis: {

mode:"categories",

reserveSpace:true,

labelWidth:55,

font:{}

}

红色的font不能要。

这是在IE下的效果,火狐,chrome这种就更不用说了,正常。

附上google code的flot的地址,大家有兴趣自己看以看看:

http://code.google.com/p/flot/issues/detail?id=85#c20

续:

其实flot功能很强大,完全可以自定义刻度,横坐标,纵坐标,均可以自定义刻度。如果因为坐标过长而重叠影响显示效果,完全可以使用自定义的短的字符串来进行代替显示。当然,这是在需求范围内,如果需求就是显示那种较长的字符串当标签,那只能将坐标的标签旋转一定角度了。

下面做一个自定义刻度的小例子。

假设,从后台传过来的数据,经过解析后,是如下的对象数组形式:

var odata =

[     {date:"2012-12-12",count:32},

{date:"2012-12-13",count:24},

{date:"2012-12-14",count:43},

{date:"2012-12-15",count:53},

{date:"2012-12-16",count:20}

];

加入flot.categories.js后,数据格式可以是这样的:

vardata = [ ["January", 10], ["February", 8],["March", 4], ["April", 13], ["May", 17],["June", 9] ]

但是如果标签过长,显示会有问题。

我们可以自定义刻度来解决这个问题。

先定义两个数组,一个用来存放数据data,一个用来存放标签label

vardata = [];

varlabel = [];

循环遍历解析后的对象数组,然后对应着将count和日期date存放到相应的数组:

for(vari=0;i<odata.length;i++){

data.push([i,odata[i].count]);

label.push([i,odata[i].date]);

}

然后我们在调用.plot()函数生成图表时,指定对应轴的刻度即可:

$.plot("#placeholder", [ {label:"5天内变化图",data:data} ], {

series:{

bars:{

show:true,

barWidth:0.6,

align:"center"

}

},

xaxis:{

mode:"categories",

ticks:label

},

grid:{

hoverable:true,

clickable:true

           }

});

这时现实出来的图应该是:

我们在写鼠标点击事件时,可以通过以下代码取到相应的值:

//item.datapoint[0]取的是x坐标值

//item.datapoint[1]取的是y坐标值的顶部值()

//item.datapoint[2]取的是y坐标值的底部值(这个貌似只有柱状图有,折线图等没有,因为可能涉及到堆栈图)

 var x=item.datapoint[0],

yh=item.datapoint[1],

yb=item.datapoint[2];

//item.series.label是指传入数据时传入的label,这里是 "5天内变化图"

//item.series.xaxis.ticks[item.datapoint[0]].label取的是图里x坐标轴上的标签(不是x坐标值)

//item.series.xaxis.ticks[item.datapoint[0]]是一个Object类型,具体的是{v:1,label:"2012-12-12"}这中格式的Object

label = item.series.label+":"+

item.series.xaxis.ticks[item.datapoint[0]].label;

showTooltip(item.pageX,item.pageY,label + " 新增数量: " + (yh-yb)+"-----"+x);

以上一小段程序展示了如何从图表中取得相应的数据,取得x坐标值后,因为数据数组和标签数组是对应的,所以也能取得相应的label,然后就可以从后台进行数据查询了。

转自http://m.blog.csdn.net/blog/coolcaosj/17588557

时间: 2025-01-14 04:43:34

jqueryflot图表x轴坐标过长完美解决方案(转)的相关文章

echarts x轴名称太长

echarts x轴名称太长了,隐藏一部分,鼠标移到名称上,显示全称 1 function extension(mychart, type) { 2 let extension = document.getElementById("extension"); 3 mychart.on('mouseover', function (params) { 4 if (params.componentType == type) { 5 extension.innerHTML = params.v

Android必知必会-获取View坐标和长宽的时机

如果移动端访问不佳,请访问–>Github版 背景 最近要实现一个功能,用到了一些属性动画,需要获取一些View的坐标信息,设计图如下: 这里我使用的是DialogFragment来实现的,可以复用. 先贴一下获取View坐标的一些资料: Android View各种尺寸位置相关的方法探究 Android获得控件在屏幕中的绝对坐标 合适的时机 要想获得View的坐标和长宽,必须要等到View绘制完毕,在平常写代码的生命周期函数内一般是获取不到的: //Activity onCreate(); o

SSRS 2012 建立图表 -- 双轴混合图表

SSRS 2012 建立图表 -- 双轴混合图表 利用序列属性可以设计双轴报表,将数量级差异较大的两组序列并排在同一报表中. 步骤1: 将销售金额以及销售数量拖至数据值,同时将销售年度拖至类别组.当预览图表时,会发现销售数量值远低于销售金额,因此无法显著查看销售数量. 步骤2: 右击销售数量序列,选择"Series Properties".切换至"Axes and Chart Area"标签页,将"Vertical axis"切换为"S

iOS5 切换中文键盘时覆盖输入框的完美解决方案

iOS5 切换中文键盘时覆盖输入框的完美解决方案 原文:http://wangsheng2008love.blog.163.com/blog/static/782016892012631102714562/ 2012-07-31 22:42:43|  分类: iOS |  标签:ios5  中文键盘  遮盖  输入框  |举报|字号 订阅 众所周知,iOS5之前,iPhone上的键盘的高度是固定为216.0px高的,中文汉字的选择框是悬浮的,所以不少应用都将此高度来标注键盘的高度(包括米聊也是这

Nginx 502/504 Gateway time-out错误完美解决方案【转发】

在安装完Nginx+PHP-fpm+Mysql后,跑PHP的应用会经常出现504 Gateway Time-out 或者502 Bad Gateway的情况. Nginx 504 Gateway Time-out 的含义是所请求的网关没有请求到,简单来说就是没有请求到可以执行的 PHP-CGI.这种情况可能是由于 nginx 默认的 fastcgi 进程响应的缓冲区太小造成的, 这将导致 fastcgi 进程被挂起, 如果你的 fastcgi 服务对这个挂起处理的不好, 那么最后就极有可能导致 

Xcode6.1标准Framework静态库制作方法。工程转Framework,静态库加xib和图片。完美解决方案。

http://www.cocoachina.com/bbs/read.php?tid-282490.html Xcode6.1标准Framework静态库制作方法.工程转Framework,静态库加xib和图片.完美解决方案. 在cocoachina呆挺长时间了.没什么大贡献.就整理了这个,希望对大家有帮助.绝对原创.呵呵. 1.创建一个工程,或者在原有的工程上进行.不在列举.2.在原有工程上添加一个静态库 2.1.选择OS X 的Bundle.因为Xcode6.1中iOS里没有Bundle.

Android消息推送完美解决方案全析

推送功能在手机应用开发中越来越重要,已经成为手机开发的必须.在Android应用开发中,由于众所周知的原因,Android消息推送我们不得不大费周折.本文就是用来和大家共同探讨一种Android消息推送的完美解决方案. 一.消息推送基础 消息推送,就是在互联网上通过定期传送用户需要的信息来减少信息过载的一项新技术.推送技术通过自动传送信息给用户,来减少用于网络上搜索的时间.它根据用户的兴趣来搜索.过滤信息,并将其定期推给用户,帮助用户高效率地发掘有价值的信息 当我们开发需要和服务器交互的移动应用

DevExpress控件cxGrid实现多列模糊匹配输入的完美解决方案

本方案不需要修改控件源码,是完美解决cxgrid或TcxDBExtLookupComboBox支持多列模糊匹配快速输入的最佳方案!! 小哥摸索多日,终于搞定cxgrid和TcxDBExtLookupComboBox可以支持多列模糊查找输入了! 纵观网上的方案,不是修改控件源码,就是自己封装弹窗,代码太长太复杂,后遗症也多多,而自己封装用户体验也是难以尽善尽美,因为UI风格皮肤都不一致啊,嗷嗷--本人吐血奉献不需要修改控件源码的方案,堪称史上最完美解决方案!!走过路过不要错过,欢迎收藏! 修改方案

iOS 限制输入字数完美解决方案

关于限制输入字数以前也做过,网上也很多方法. 但都不够完美,以前的测试人员也没千方百计的挑毛病,所以就糊弄过去了. 现在这个项目的测试人员为了找bug真是无所不用其极.... 1.一般方法就是通过UITextField的代理方法 #pragma mark - UITextFieldDelegate - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementS