Highcharts 在低版本 IE 上使用注意事项及个人总结

很多人经常遇到图表在主流浏览器上运行正常,在低版本IE(包括IE6、IE7、IE8等)下运行出错(图表显示不出来或显示不正常)的情况,这不是兼容性问题,而是 IE 浏览器自身的一些限制,我们只需要注意一些事项即可避免这种情况。

注意事项:

1、使用合适的HTML 文档模式

html 文档模式指的是文件的第一行 <!DOCTYPE>

在低版本 IE 中请使用 HTML 4 严格模式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2、多余逗号

IE 对 JavaScript 语法要求比较严格,数组或对象的最后一项有多余逗号时会报错,例如

$(‘#container‘).highcharts({
  series: [{
      data: [2, 4, 5, 7, 9]
  },{
      data: [{
          x: 20,
        y: 2323,     // 这里多余的逗号会导致在低版本 IE 下报错
    }]
  }]
});

3、禁用 IE 安全模式

另外一个导致 Highcharts 在IE上显示不正常的常见问题是 IE的安全模式,这种情况一般发生在用作服务器的浏览器上(本地ok,在服务器上的IE访问则不行,例如在 Window Server 2008的电脑上),避免这种情况的方法是禁用 IE 安全模式,设置如下:

IE 浏览器 —》 “工具” —》“Internet 选项” —》“安全”

将安全级别调到最低并去掉“ 启用保护模式”勾选。

4、不要使用太高版本 jQuery

高版本jQuery 对IE兼容性不好,我们推荐使用 jQuery 1.8.3

小技巧

在html head 部分加如下代码可以让 IE 使用兼容性模式,这样可以让IE 尽可能以最高模式渲染文档。

个人总结

1.IE7 的javascript对象解析不如其他浏览器,所以导致图标显示不出来。

2.后台json数据封装格式必须满足json规范,逗号,单引号问题

3.时间要进行转化为毫秒数

时间: 2024-10-31 17:12:53

Highcharts 在低版本 IE 上使用注意事项及个人总结的相关文章

Android 高版本API方法在低版本系统上的兼容性处理

Android 版本更替,新的版本带来新的特性,新的方法. 新的方法带来许多便利,但无法在低版本系统上运行,如果兼容性处理不恰当,APP在低版本系统上,运行时将会crash. 本文以一个具体的例子说明如何在使用高API level的方法时处理好兼容性问题. 例子:根据给出路径,获取此路径所在分区的总空间大小. 在安卓中的文件存储使用参考中提到: 获取文件系统用量情况,在API level 9及其以上的系统,可直接调用File对象的相关方法,以下需自行计算 一般实现 就此需求而言,API leve

支持IE低版本的上传 大文件切割上传 断点续传 秒传

1. http://files.cnblogs.com/files/blackice/UploadDemo.rar 此demo是使用的 swfupload 2.http://download.csdn.net/detail/rememberme001/9873136 支持大文件传输,先把大文件分割成每个2M的小文件分批上传,再组合成一个大文件. 支持断点续传,MD5校验实现妙传功能,支持IE低版本.

用了 HTTPS 还不安全,问题就出在低版本 TLS 上

HTTPS 加密时代已经来临,近两年,Google.Baidu.Facebook 等互联网巨头,不谋而合地开始大力推行 HTTPS, 2018 年 7 月 25 日,Chrome 68 上线,所有 HTTP 网站都会明确标记为"不安全".国内外包括大到 Google.Facebook 等巨头,小到个人博客在内的众多网站,以及登陆 Apple App Store 的 App,微信的小程序,都已经启用了全站 HTTPS,这也是未来互联网发展的趋势. HTTPS 持续优化之路 HTTPS(H

Material Designer的低版本兼容实现(十)—— CheckBox

ChekBox的用途我们就不必多说了,算是一个很古老的控件了,何其类似的还有RadioButton,这个东西因为我目前还没写出来,以后可能会参考别的lib来写.顺便说一句,如果你的app是在5.0环境下编译的,那么你用传统的checkbox时,你会发现checkbox在低版本机子上运行出来的样子和以前不同了,虽然没有动画效果,但样子和5.0以上的checkbox还是很像的. 最小尺寸 48 x 48 开源lib中对于不同的屏幕做了不同大小的对勾图片,应该能满足高清屏的要求.至于不可用状态目前还没

Windows10测试低版本IE

前端开发工程师可能了解IETester是一款IE多版本兼容性测试软件,但是只支持Windows Xp,Vista,7,8系统,Windows10是不支持的,网上所说的开启.net framework 3.5(包括.net2.0和3.0)经过本人测试也是不可以的. 那就没有什么方法在低版本IE上测试了吗?答案是否定的. 其实IE已经集成了低版本测试的功能,何必舍近求远. 打开"开发者工具(F12)",界面如下图,切换到"仿真"选项: 我们可以看到,Windows10下

前端开发兼容低版本IE注意事项

1.如果要在地址中使用中文参数的话,使用encodeURIComponent()对中文进行编码,否则在老版本的IE中可能出现地址错误(400). 2.在任何业务情况下,后台传过来,前端解析的参数都要明确的值,即使是''或者[],尽量不要存在null,如果可能会出现不同的对象走同一条业务流程,加上if("undefined"!==typeof obj.xxx){},不要出现未定义的对象,它会使低版本的IE报错. 3.当前使用的使IE8兼容placeholder属性的placeholder

React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案

虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不能正确解释,很容易导致白屏.本文记录如下 起因 在准备提测的那天,顺便打开IE9看一眼(注意,这里是原生IE9 ,不是用IE11模拟的IE9),OMG! 排查后发现,原来是因为构造函数中使用了this.简写如下 class Child extends React.Component { ? cons

在低版本android系统上实现Material设计应用

?Material Design真的很好看,动画效果真的很实用.前面也写了一些文章介绍如何编写Material风格的程序,但是很多都是一些新的api,低版本上面没有这些api,我们没办法使用.但是不用气馁,google官方,以及一些大牛,给我们提供了一些程序,让我们在低版本上面可以实现Material风格的程序,这里就给大家介绍一下. 妹子图截屏 使用support library 使用support library最新的版本,appcomt21,可以在较低版本上面实现部分风格,在之前的文章我已

split方法在低版本IE浏览器上无法解析的问题

今天在项目中发现一个很诡异的问题,通过js获取cookie时,发现赋给用户name的时候IE9和低于9以下的浏览器对比时获取到的名字不一样,通过调试发现是split方法在解析||时当值为空时就会出现被“吃掉”的问题. 当我们在开发的过程想要对特定的字符进行分割,首相想到的就是使用split函数,这样是一个效率非常高的方法.但是让人叹息的是该方法虽然可以在Chrome和Firefox正常运作,但是在低版本IE浏览器却无法正常工作,IE9及以上版本都没有问题.split方法是支持正则表达式的,ES中