Highcharts 在低版本 IE 上使用注意事项

逆熵实例化
• 阅读 14534

很多人经常遇到图表在主流浏览器上运行正常,在低版本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 选项” —》“安全”

将安全级别调到最低并去掉“ 启用保护模式”勾选。
Highcharts 在低版本 IE 上使用注意事项

4、不要使用太高版本 jQuery

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

<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>

小技巧

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

<meta http-equiv="X-UA-Compatible" content="IE=edge">

参考资料:

另外,我们发布的版本都有对IE进行兼容性测试,请到我们官网下载最新版例子体验。

在线测试地址:

(PS:中文网主站并没有对 IE 做兼容性工作,所以在低版本IE下,中文网不可用,未来我们会改版)

点赞
收藏
评论区
推荐文章
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
添砖java的啾 添砖java的啾
4年前
distinct效率更高还是group by效率更高?
目录00结论01distinct的使用02groupby的使用03distinct和groupby原理04推荐groupby的原因00结论先说大致的结论(完整结论在文末):在语义相同,有索引的情况下groupby和distinct都能使用索引,效率相同。在语义相同,无索引的情况下:distinct效率高于groupby。原因是di
皕杰报表(关于日期时间时分秒显示不出来)
在使用皕杰报表设计器时,数据据里面是日期型,但当你web预览时候,发现有日期时间类型的数据时分秒显示不出来,只有年月日能显示出来,时分秒显示为0:00:00。1.可以使用tochar解决,数据集用selecttochar(flowdate,"yyyyMMddHH:mm:ss")fromtablename2.也可以把数据库日期类型date改成timestamp
可莉 可莉
3年前
10款强大的开源 Javascript 图表库
1、EChartsECharts由百度前端技术部开发的,是一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11、Chrome、Firefox、Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
Stella981 Stella981
3年前
IE下iframe显示空白
IE8下iframe显示正常,IE9下却是空白这个问题搞了几天了(根本原因也不清楚,反正与IE的兼容问题离不开)总之就觉得IE越来越垃圾了;中间的坎坷就不说了,直接说出解决问题的方法吧:页面加上如下头信息:<metahttpequiv"XUACompatible"content"IEEmulateIE8"/I
Wesley13 Wesley13
3年前
IE 浏览器有多烂?第一个就给跪了···
!(https://oscimg.oschina.net/oscnet/9e0ec5aaa7ea440990dcd251be0a6fa8.jpg)怎么评价IE浏览器呢?很明显它每天都在影响着前端工程师的心情,相信很多前端工程师在调试浏览器兼容性时,都会在心里默默念叨:希望IE,特别是IE6下没问题。接下来我们来细数下关于IE浏览器的
Wesley13 Wesley13
3年前
JS实现网站提示用户升级IE浏览器
自2016年1月12日起,Microsoft不再为WindowsXP和InternetExplorer10及以下版本提供相应支持和更新。如果你继续使用这些,访客将可能受到病毒、间谍软件和其他恶意软件的攻击,无法确保个人信息的安全。作为站长就非常有必要一起抵制IE6、IE7、IE8等低版本IE浏览器!工具/原料Not
Stella981 Stella981
3年前
ECharts2.0
简介ECharts,缩写来自EnterpriseCharts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender(https://www.oschina.n
Stella981 Stella981
3年前
IE hack技术
HTML5学堂:我们平日说的IEhack到底是什么,随着浏览器的发展,IE的hack技术也在不断的发生着变化,一起看看最新的IEhack。何为hack?行业中存在着各类浏览器,典型的如IE、火狐、谷歌等;另外,即便同样种类的浏览器,也存在着不同的版本,如IE6、IE7……IE11等。不同浏览器对于CSS的解
Stella981 Stella981
3年前
DIV+CSS解决IE6,IE7,IE8,FF兼容问题
1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以。在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1\.<metahttpequivmetahttpequiv"xuacompatible"content"IE7"/2.2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!i
Wesley13 Wesley13
3年前
IE下常见兼容性问题记录汇总(04
现在开发环境主要使用的ie9以上的浏览器,而实际上依然存在大量用户使用xp系统,而xp最高只能装到ie8,前段还不能放弃对ie8的兼容,现针对实际开发中所遇ie的兼容性问题和解决方案做个汇总(持续更新):IE8系列:1:JSON序列化与解析,现代浏览器都有原生JSON对象支持,而IE8没有,可以使用json2.js,配合针对ie的条件注释。2:t