【jQuery】兼容IE6的图表插件Highcharts
浏览数：60 /
时间：2015年06月09日
在网页中有时候需要画出统计图，尤其是一些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这个网页中画图：
四、制作过程
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,
//最小值为0
min: 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,
//最小值为0
min: 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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
