问题

提起highcharts并不是为着大家不用iChartjs,只是为了进一步明显难点的由来,以便消除难题,那四个图形库各有补益的(具体就在最终总计说吧)。

搜寻消除办法

那八个措施,在没化解touchstart失效问题以前,照旧使用第二个吗。

总结

依照highcharts为iChartjs添加上touchstart事件:

doAction:function(_){
    _.T.on('mouseover',function(c,e,m){
        _.show(e,m);  //显示提示框  
    }).on('mouseout',function(c,e,m){
        _.hidden(e);  //隐藏提示框
    });

    if(_.get('showType')=='follow'){
        _.T.on('mousemove',function(c,e,m){
            if(_.T.variable.event.mouseover){
                setTimeout(function(){
                    if(_.T.variable.event.mouseover)
                        _.follow(e,m,_);
                },_.get('delay'));
            }
        });
    }
},

近日项目须求运用手提式有线电话机图表,不过找了很久都没找到专门为运动端支出的图纸,只可以找一些能合作移动端的图表控件,前几日就讲讲关于iChartjs这些图形库的一点标题。

if($.touch){
   _.T.on('touchstart',function(c,e,m){
    _.show(e,m);    
   })
}

再也换了二个图表库——highcharts(很漂亮),测试在移动端的呈现效果(结果令人振奋的),它有为运动端做合作。

iChartjs

二 、highcharts和iChartjs的特点比较

能够看到,只利用了mouseovermouseout事件,没有为移动端做调整。

if (!series._hasTracking) {
    each(series.trackerGroups, function (key) {
        if (series[key]) { // we don't always have dataLabelsGroup
            series[key]
                .addClass(PREFIX + 'tracker')
                .on('mouseover', onMouseOver)
                .on('mouseout', function (e) {  pointer.onTrackerMouseOut(e); })
                .css(css);
            if (hasTouch) {
                series[key].on('touchstart', onMouseOver);
                alert(1);
            }
        }
    });
    series._hasTracking = true;
}

其次个缓解办法:

在代码里笔者尽大概使用原生的js,制止被别的轮代理公司码影响。同样改动的地方也少。
缺点:点击饼图外边无法将提醒框去除,总有三个留存(某种程度上不是那么影响体验)。

那一个法子算是普遍的做法,直接操作DOM,上代码:

jQuery 1

比如在运用clicktouch事件,touch的响应速度是快过click的,所以可以设想使用touch替换click

1.代码开源免费
2.不借助于第二方库
3.图表意义还算美观,能够满意移动端图表的须要
4.有3D图表
5.能够拆分使用某种图表的源码,不必引入整个iChartjs源码
6.不得不显示在支撑canvas的浏览器

直白通过iChartjs的源码看原因,查看$.Tip那个提醒框组件中的doAction:

iChartjs还索要在特出移动端那方面下些武功。

一、mobile web

其实图片也是这么的呢?

_.T.on('click',function(c,e,m){

    var shell=document.getElementById("shell-"+e.target.id);
    var allTip =shell.getElementsByTagName('div'),i=0;
    for(;i<allTip.length;i++){
        allTip[i].style.visibility="hidden";
    }
    _.show(e,m);

});

能够阅览highcharts和iChartjs在提醒框事件方面包车型大巴代码相当相似,可是highcharts在终极添加上了三个touchstart事件,那样活动端点击图片就能显得提醒框。

移步端上的轩然大波并不与PC上的事件相同,所以在接纳事件时也别惯用了PC上的风浪,思考这个事件在活动端的或者的效益,寻找更切合运动端的事件,并施行和拓展细节调整。

能够观望实际是有touchstart事件的,便是不通晓为什么失效,但能够显明是,那一个Array[1或2]的事件是必然有效的。

本人打字与印刷过 _.T 那些目的出来看过,内容如下:

1.要收费的
2.依赖jQuery库
3.图表作用卓殊雅观,展现效果也尤其好
4.兼容性卓殊好

率先个缓解措施:

highcharts

iChartjs的提醒框tip的显示没有为移动端做调整,在运动端呈现效果很差

本身又找到了highcharts关于提醒框展现的代码段:

上面讲两点题外话:

原因

很遗憾的是,那个能够中的方法,并不曾起效,小编查找了很种种缘由,都还没找到原因(万一有哪个人知道请麻烦告诉笔者)。

那也理所当然在移动端点击时候是突显不断提醒框,只可以在图纸上拖动后才能显得提醒框(太蛋疼了)。

相关文章

网站地图xml地图