随笔：Highcharts学习笔记
Highcharts是一个制作图表的纯Javascript类库，主要特性如下：
- 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；
- 对个人用户完全免费；
- 纯JS，无BS；
- 支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；
- 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；
- 提示功能：鼠标移动到图表的某一点上有提示信息；
- 放大功能：选中图表部分放大，近距离观察图表；
- 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；
- 时间轴：可以精确到毫秒；
使用步骤：
下载highcharts包，地址：http://www.highcharts.com/download
解压后目录为：
主要使用的文件都在js里。
创建highcharts.html 存在highcharts文件夹中
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>highcharts学习</title> <!-- 必要基础库 --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script> <!-- 图形化处理JS文件 --> <script type="text/javascript" src="highcharts/js/highcharts.js"></script> <!-- 打印/联网下载图片等JS文件 --> <script type="text/javascript" src="highcharts/js/modules/exporting.js"></script> <!-- 主题样式 --> <script type="text/javascript" src="highcharts/js/themes/grid.js"></script> <!-- 页面调用方法 --> <script type="text/javascript" src="createpic.js"></script> </head> <body> <div id="container" style="min-width:500px;height:500px;margin:0.2em"></div> <button id="button" onclick="show_click()">Button</button> </body> </html>
创建createpic.js存在highcharts文件夹中
createpic.js
//chart值对象 json 数据 var chart_value = { //图标区选项 chart:{ renderTo: 'container', //放置图标的容器 defaultSeriesType: 'spline', zoomType: 'x', //放大 inverted: false }, //右下角的标记 credits:{ enabled: true, //是否显示 position:{ //显示位置 align: 'right', x: -10, y: -10 }, text: 'www.360.cn', style:{ cursor: 'pointer', color: '#68C739', fontSize: '15px' }, href: 'http://www.360.cn' }, //标题选项 title:{ text: 'XX每分钟业务统计', // x: 0, //水平偏移量 // y: 0, // align: 'left', //水平方向（left, right, bottom, top） floating: false, //是否浮动显示 // verticalAlign: 'top', //垂直方向（left, right, bottom, top） style:{ color: '#3E576F', fontSize: '16px' } }, //副标题选项 subtitle:{ text:'' }, //X轴 xAxis:{ categories: ['XX业务1','XX业务2','XX业务3','XX业务4'], //设置X轴分类名称，数组 一般为后台输出['XX制造业1','XX制造业2','XX制造业3','XX制造业4'] labels:{ enabled: true, //是否显示 rotation: 0, align: 'center', staggerLines: 1, //标签的交错显示（上、下） step: 1, //标签的相隔显示的步长 x: 0, //偏移量，默认两个都是0 y: 15, style:{font: 'normal 13px 宋体'} } }, //Y轴 yAxis:{ min: 0, title: {text: '百分比'}, // plotLines: [{value: 77.12,width: 3,color:'#68C739'}], //标线属性 }, //图例选项 lengend:{ layout: 'horizontal', backgroundColor: '#fff', borderColor: '#ccc', borderWidth: 1, align: 'center', verticalAlign: 'top', //默认底部 enabled: true, //x: 100, y: 50, //floating:true, shadow: true, width: 650, itemWidth: 210 }, //提示信息 tooltip:{ formatter: function(){ //当鼠标悬置数据点时的格式化提示 return '<b>时间：' + this.x +'</b><br>' + this.series.name + "纵坐标值: " + Highcharts.numberFormat(this.y,1); }, // backgroundColor: '#CCCCCC', //背景颜色 // borderColor: '#FCFFC5', //边框颜色 // borderRadius: 2, //边框的圆角大小 // borderWidth: 3, //边框宽度(大小) enabled: true, //是否显示提示框 shadow: false, //提示框是否应用阴影（无明显效果） style:{} //提示框内容的样式 }, //划分选项 部分修改属性说明 plotOptions:{ spline:{ cursor: 'pointer', //鼠标样式 dataLabels:{ //图上是否显示数据标签 enabled: false } } }, series: [ {name:'XX比率1',data:[{y:74.33,value:194},{y:76.25,value:15045},{y:67.12,value:298},{y:77.12,value:2981}]}, {name:'XX比率2',data:[{y:66.28,value:173},{y:78.84,value:15045},{y:58.84,value:298},{y:67.12,value:298}]}, {name:'XX比率3',data:[{y:88.33,value:194},{y:56.25,value:15045},{y:87.12,value:298},{y:47.12,value:298}]}, {name:'XX比率4',data:[{y:34.33,value:194},{y:96.25,value:15045},{y:67.12,value:298},{y:77.12,value:298}]}, {name:'XX比率5',data:[{y:54.33,value:194},{y:76.25,value:15045},{y:37.12,value:298},{y:57.12,value:298}]}, {name:'XX比率6',data:[{y:84.33,value:194},{y:26.25,value:15045},{y:97.12,value:298},{y:87.12,value:298}]} ] //后台输出的数据 /* 格式：[ {name:'XX比率1',data:[{y:74.33,value:194},{y:76.25,value:15045},{y:67.12,value:298},{y:77.12,value:2981}]}, {name:'XX比率2',data:[{y:66.28,value:173},{y:78.84,value:15045},{y:58.84,value:298},{y:67.12,value:298}]}, {name:'XX比率3',data:[{y:88.33,value:194},{y:56.25,value:15045},{y:87.12,value:298},{y:47.12,value:298}]}, {name:'XX比率4',data:[{y:34.33,value:194},{y:96.25,value:15045},{y:67.12,value:298},{y:77.12,value:298}]}, {name:'XX比率5',data:[{y:54.33,value:194},{y:76.25,value:15045},{y:37.12,value:298},{y:57.12,value:298}]}, {name:'XX比率6',data:[{y:84.33,value:194},{y:26.25,value:15045},{y:97.12,value:298},{y:87.12,value:298}]} ] */ }; //主体调用方法 var chart; $(document).ready(function(){ chart = new Highcharts.Chart(chart_value); }); //点击按钮值的显示与否 var flag = false; function show_click(){ if(!flag){ chart_value.plotOptions = { spline:{ cursor: 'pointer', dataLabels:{ enabled: true, formatter: function(){ return this.y; }, y:-15 } } }; chart = new Highcharts.Chart(chart_value); flag = true; }else{ chart_value.plotOptions = { spline:{ cursor: 'pointer', dataLabels:{ enabled: false, formatter: function(){ return this.y; }, y:-15 } } }; chart = new Highcharts.Chart(chart_value); flag = false; } }
效果图：
