zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    nginx防止盗链
    Nginx防盗链详细设置
    [bzoj2127]happiness
    [bzoj2400]Optimal Marks
    [bzoj1738]发抖的牛
    [bzoj1741]穿越小行星群
    [bzoj3123]森林
    [bzoj2588]Count on a tree
    [bzoj3144]切糕
    [bzoj1787]紧急集合
  • 原文地址:https://www.cnblogs.com/ly-radiata/p/4866352.html
Copyright © 2011-2022 走看看