在网页中有时候需要画出统计图,尤其是一些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, //最小值为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>