【jQuery】兼容IE6的图表插件Highcharts

在网页中有时候需要画出统计图，尤其是一些OA系统中，这样能够给各位看官一个直观的数据显示。图表用很多东西都能画出来，比如JSP可以利用JAVA本身就有的绘图函数，php有jpgraph插件，具体请看《【php】使用jpgraph完成投票系统的普通用户部分》（点击打开链接），等等，但毕竟属于现实层的内容，还是用前端插件更好一点。网上的JavaScript/jQuery图标插件到处东西，但是试过JS charts还是觉得Highcharts图表插件最好。因为它兼容IE6。其它不兼容IE6的东西太先进，在这里你是吃不消的。不符合国情。

一、基本目标

在网页中根据数据，画出如下的常见的图表折线图、饼状图、柱状图。鼠标悬停到点上显示数据。

这东西在IETest的IE6模式认证通过。

二、基本思想

这东西之所以好，是因为它在IE6、IE7中使用了旧式的VML画图，这东西曾经在诺基亚等塞班超级蛋疼的手机浏览器中取得成功，因此兼容IE6还是杠杠的。写这个插件的人只能感叹，果真大神也。

以下是其兼容性，同时这东西除了配搭JQuery，还可以配搭其它JavaScript框架。

同时，这东西能画出图很有很多，具体可以去Highcharts中文网慢慢玩http://www.hcharts.cn/demo/index.php（点击打开链接）。

三、基本准备

1、首先你使用Highcharts首先要下载，打开他的官网http://www.highcharts.com/（点击打开链接），如下图下载。这东西有点大28.0M，但其实用到的内容不多。

2、下载解压Highcharts-4.1.4.rar，得到如下的文件夹，拿走js/highcharts.js如果还需要图表导出功能，则再拿走js/modules/exporting.js，不开放导出功能，则不要拿了。免得又要自己写个下载网页同时汉化这个图片导出功能烦。用户要下载，让他们自己截图去。其余很多JS如果需要慢慢研究，提供一些3D等炫死人的特效，为了避免没有这么卡，画几个常见的图表，如折线图、饼状图、柱状图就可以了。

3、最后附上一个jquery-1.11.1.js就可以开始工作了。目录结构如下，将于index.html这个网页中画图：

4、此时，还要打开一下highcharts.js，这个文件，搜索“credit”一项，把enable改成0，其中的text与href内容去掉，则可以去掉右下角highcharts的图表，虽然这样不太好。

四、制作过程

1、首先是一个简单的HTML布局，设置几个div，就是为了放图表的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>highcharts</title></head><body><div id="line"></div><div id="pie" style="width:350px;height:300px;float:left;"></div><div id="column" style="width:550px;height:300px;float:left;"></div><div style="clear:both;"></div></body>
</html>

2、只是就是核心的JavaScript脚本，上面的Highcharts中文网还提供了很多皮肤模板，只需要改两改就可以了。这里是其中一种：

 //首先是Highcharts的皮肤Highcharts.theme = {chart: {backgroundColor: {linearGradient: {x1: 0,y1: 0,x2: 1,y2: 1},//图表背景颜色在这里改，0是前渐变色，1是后渐变色stops: [[0, 'rgb(255, 255, 255)'], [1, 'rgb(240, 240, 255)']]},//图表的边框在这里改borderWidth: 2,//这里是边框的颜色plotBackgroundColor: 'rgba(255, 255, 255, .9)',plotShadow: true,plotBorderWidth: 1},//标题颜色title: {style: {color: '#000',font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'}},xAxis: {gridLineWidth: 1,lineColor: '#000',tickColor: '#000',labels: {style: {color: '#000',font: '11px Trebuchet MS, Verdana, sans-serif'}},title: {style: {color: '#333',fontWeight: 'bold',fontSize: '12px',fontFamily: 'Trebuchet MS, Verdana, sans-serif'}}},yAxis: {minorTickInterval: 'auto',lineColor: '#000',lineWidth: 1,tickWidth: 1,tickColor: '#000',labels: {style: {color: '#000',font: '11px Trebuchet MS, Verdana, sans-serif'}},title: {style: {color: '#333',fontWeight: 'bold',fontSize: '12px',fontFamily: 'Trebuchet MS, Verdana, sans-serif'}}}};// 应用皮肤var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

3、之后再是正式为三个div画图。X轴就是xAxis属性，Y轴的数据在Serize的Data里面，而不是yAxis这是值得注意的地方。同时，注意饼状图的画法与它们的图表是不同的。

    $(function(){$('#line').highcharts({chart: {type: 'line'},title: {//图表标题在这里改text: '气温'},xAxis: {categories: ["1日", "2日", "3日", "4日", "5日", "6日"]},yAxis: {//不允许出现小数allowDecimals: false,//最小值为0min: 0,title: {text: ''}},//没有图例legend: {enabled: false},series: [{name: '气温',data: [10, 2, 30, 28, 21, 25]}]});$('#pie').highcharts({chart: {//饼状图，图表的大小在这里改type: 'pie',width: 350,height: 300},title: {text: '获胜比率'},//没有图例legend: {enabled: false},series: [{//这是鼠标悬停时的颜色name: '获胜比率',//自定义颜色data: [{name: '胜',color: "#ff0000",y: 3}, {name: '平',color: "#00ff00",y: 1}, {name: '负',color: "#0000ff",y: 2}]}]});//以下是柱状图，同理$('#column').highcharts({chart: {height: 330,width: 550,type: 'column'},title: {text: '气温'},xAxis: {categories: ["1日", "2日", "3日", "4日", "5日"]},yAxis: {allowDecimals: false,min: 0,title: {text: ''}},legend: {enabled: false},series: [{name: '气温',data: [{color: "#ff0000",y: 13}, {color: "#00ff00",y: 21}, {color: "#0000ff",y: 23}, {color: "#003300",y: 14}, {color: "#000033",y: 25}]}]});});

五、总结

因此，整个index.html如下，实际中X轴与Y轴的数据，可以通过服务器语言aspx,jsp,php构造，同时某些人出现IE6与IE7无法画图的兼容性问题，请注意你整个JavaScript是否出现一些数组是以逗号结尾的，犯了《【JavaScript】数组定义末尾请不要留下逗号》（点击打开链接）的二义性数组错误。这里的Highcharts数组很长，混合服务器语言很容易犯这个错误的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>highcharts</title></head><body><div id="line"></div><div id="pie" style="width:350px;height:300px;float:left;"></div><div id="column" style="width:550px;height:300px;float:left;"></div><div style="clear:both;"></div></body>
</html>
<script type="text/javascript" src="Highcharts-4.1.4/jquery-1.11.1.js"></script>
<script type="text/javascript" src="Highcharts-4.1.4/highcharts.js"></script>
<script>//首先是Highcharts的皮肤Highcharts.theme = {chart: {backgroundColor: {linearGradient: {x1: 0,y1: 0,x2: 1,y2: 1},//图表背景颜色在这里改，0是前渐变色，1是后渐变色stops: [[0, 'rgb(255, 255, 255)'], [1, 'rgb(240, 240, 255)']]},//图表的边框在这里改borderWidth: 2,//这里是边框的颜色plotBackgroundColor: 'rgba(255, 255, 255, .9)',plotShadow: true,plotBorderWidth: 1},//标题颜色title: {style: {color: '#000',font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'}},xAxis: {gridLineWidth: 1,lineColor: '#000',tickColor: '#000',labels: {style: {color: '#000',font: '11px Trebuchet MS, Verdana, sans-serif'}},title: {style: {color: '#333',fontWeight: 'bold',fontSize: '12px',fontFamily: 'Trebuchet MS, Verdana, sans-serif'}}},yAxis: {minorTickInterval: 'auto',lineColor: '#000',lineWidth: 1,tickWidth: 1,tickColor: '#000',labels: {style: {color: '#000',font: '11px Trebuchet MS, Verdana, sans-serif'}},title: {style: {color: '#333',fontWeight: 'bold',fontSize: '12px',fontFamily: 'Trebuchet MS, Verdana, sans-serif'}}}};// 应用皮肤var highchartsOptions = Highcharts.setOptions(Highcharts.theme);$(function(){$('#line').highcharts({chart: {type: 'line'},title: {//图表标题在这里改text: '气温'},xAxis: {categories: ["1日", "2日", "3日", "4日", "5日", "6日"]},yAxis: {//不允许出现小数allowDecimals: false,//最小值为0min: 0,title: {text: ''}},//没有图例legend: {enabled: false},series: [{name: '气温',data: [10, 2, 30, 28, 21, 25]}]});$('#pie').highcharts({chart: {//饼状图，图表的大小在这里改type: 'pie',width: 350,height: 300},title: {text: '获胜比率'},//没有图例legend: {enabled: false},series: [{//这是鼠标悬停时的颜色name: '获胜比率',//自定义颜色data: [{name: '胜',color: "#ff0000",y: 3}, {name: '平',color: "#00ff00",y: 1}, {name: '负',color: "#0000ff",y: 2}]}]});//以下是柱状图，同理$('#column').highcharts({chart: {height: 330,width: 550,type: 'column'},title: {text: '气温'},xAxis: {categories: ["1日", "2日", "3日", "4日", "5日"]},yAxis: {allowDecimals: false,min: 0,title: {text: ''}},legend: {enabled: false},series: [{name: '气温',data: [{color: "#ff0000",y: 13}, {color: "#00ff00",y: 21}, {color: "#0000ff",y: 23}, {color: "#003300",y: 14}, {color: "#000033",y: 25}]}]});});
</script>

【jQuery】兼容IE6的图表插件Highcharts相关推荐

JQuery图表插件Highcharts示例教程
JQuery图表插件Highcharts示例教程,先上图,大伙Show一下效果:先上三个图,分别是曲线.柱状.扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意.下面讲下大致的实现步骤第一步 ...
jquery饼状图插件的指引线_JQuery图表插件Highcharts示例教程
JQuery图表插件Highcharts示例教程,先上图,大伙Show一下效果:先上三个图,分别是曲线.柱状.扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意.下面讲下大致的实现步骤第一步 ...
图表插件Highcharts的动态化赋值，实现图表数据的动态化设置显示
在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...
jQuery table组织架构图表插件
jQuery table组织架构图表插件 jQuery.orgchart分支节点组织结构图插件,绘制分级模块的组织架构图表分析布局代码. 演示地址下载地址
数据呈现图表插件Highcharts介绍+图表联动案例
由于项目需要,学习并使用了Highcharts图表插件,这是一款功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库插件. Highcharts简介下边的介绍来自Highcharts中文 ...
html 圆圈图表插件,10款HTML5动画图表插件
创建一个HTML5网页图表应用已经非常简单,利用Canvas更是能绘制出绚丽的动画效果,也就是说你的HTML5图表能动起来,给人不一样的用户体验.本文就主要来分享一些最常用的HTML5图表插件,不仅外 ...
jQuery HighchartsTableHTML表格转Highcharts图表插件
版权申明 jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Hig ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
自写jQuery插件，实现简单网页遮罩层/弹出层功能，兼容IE6、IE7
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010480479/article/details/25159287 本屌丝近期工作要求重写站点全部 ...

【jQuery】兼容IE6的图表插件Highcharts

【jQuery】兼容IE6的图表插件Highcharts相关推荐

最新文章

热门文章