使用Highcharts制作系统报表
2015-06-04 21:15
357 查看
这几天使用Highcharts制作系统报表,经过摸索总结下使用方法:
·1去官网下载http://www.highcharts.com/,和jquery http://www.jquery.com/download
2.在页面引人js文件
<script type="text/javascript"src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
注意引人的顺序,先jquery的,否则页面不显示。
<script type="text/javascript" src="js/grid.js"></script>
这个是主题样式文件,可选的
3.<script type="text/javascript">
</script>
3.<script type="text/javascript">
</script>这里是引用的highchharts的代码
这几天使用Highcharts制作系统报表,经过摸索总结下使用方法:
·1去官网下载http://www.highcharts.com/,和jquery http://www.jquery.com/download
2.在页面引人js文件
<script type="text/javascript"src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
注意引人的顺序,先jquery的,否则页面不显示。
<script type="text/javascript" src="js/grid.js"></script>
这个是主题样式文件,可选的
3.<script type="text/javascript">
</script>
3.<script type="text/javascript">
</script>这里是引用的highchharts的代码
3.<script type="text/javascript"> var chart1; // 全局变量 $(document).ready(function() { chart1 = new Highcharts.Chart({ chart : { renderTo : 'container',注意这里的名称和body里面的div的id要对应 type : 'bar' }, title : { text : 'Fruit Consumption' }, xAxis : { categories : [ 'Apples', 'Bananas', 'Oranges' ] }, yAxis : { title : { text : 'Fruit eaten' } }, series : [ { name : 'Jane', data : [ 1, 2, 4 ] }, { name : 'John', data : [ 5, 7, 3 ] } ] }); }); </script> <body> <div id="container" style="width: 100%; height: 400px"></div> </body>第二个例子:
<script type="text/javascript"> var chart; $(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'chart_line', //图表放置的容器,DIV defaultSeriesType: 'line', //图表类型line(折线图), zoomType: 'x' //x轴方向可以缩放 }, credits: { enabled: false //右下角不显示LOGO }, title: { text: '一楼湿度历史记录' //图表标题 }, subtitle: { text: '2012年' //副标题 }, xAxis: { //x轴 categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], //x轴标签名称 gridLineWidth: 1, //设置网格宽度为1 lineWidth: 2, //基线宽度 labels:{y:26} //x轴标签位置:距X轴下方26像素 }, yAxis: { //y轴 title: {text: '平均气温(°C)'}, //标题 lineWidth: 2 //基线宽度 }, plotOptions:{ //设置数据点 line:{ dataLabels:{ enabled:true //在数据点上显示对应的数据值 }, enableMouseTracking: false //取消鼠标滑向触发提示框 } }, legend: { //图例 layout: 'horizontal', //图例显示的样式:水平(horizontal)/垂直(vertical) backgroundColor: '#ffc', //图例背景色 align: 'left', //图例水平对齐方式 verticalAlign: 'top', //图例垂直对齐方式 x: 100, //相对X位移 y: 70, //相对Y位移 floating: true, //设置可浮动 shadow: true //设置阴影 }, exporting: { enabled: false //设置导出按钮不可用 }, series: [ { //数据列 name: '一楼1号', data: [ - 4.6, -2.2, 4.5, 13.1, 19.8, 24.0, 25.8, 24.4, 19.3, 12.4, 4.1, -2.7] }, { name: '一楼2号', data: [13.3, 14.4, 17.7, 21.9, 24.6, 27.2, 30.8, 32.1, 27.2, 23.7, 21.3, 15.6] },{ name: '一楼3号', data: [10.3, 11.4, 13.7, 22.9, 24.6, 37.2, 35.8, 32.1, 29.2, 21.7, 11.3, 5.6] },{ name: '一楼4号', data: [12.3, 15.4, 17.7, 22.9, 23.6, 27.2, 35.8, 32.1, 24.2, 21.7, 10.3, 9.6] },{ name: '一楼5号', data: [14.3, 16.4, 13.7, 12.9, 26.6, 33.2, 36.8, 38.1, 22.2, 22.7, 21.3, 12.6] }] }); }); </script> <div id="chart_line" style="width: 100%; height: 400px"></div>
第三个例子 <script type = "text/javascript"> var chart; Highcharts.setOptions({ global: { useUTC: false } }); $(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'chart_spline', //图表放置的容器,DIV defaultSeriesType: 'spline', //图表类型为曲线图 events: { load: function() { var series = this.series[0]; //每隔5秒钟,图表更新一次,y数据值在0-100之间的随机数 setInterval(function() { var x = (new Date()).getTime(), // 当前时间 y = Math.random()*20; series.addPoint([x, y], true, true); }, 3000); } } }, title: { text: '湿度走势图' //图表标题 }, xAxis: { //设置X轴 type: 'datetime', //X轴为日期时间类型 tickPixelInterval: 150 //X轴标签间隔 }, yAxis: { //设置Y轴 title: '', max: 50, //Y轴最大值 min: 0 //Y轴最小值 }, tooltip: {//当鼠标悬置数据点时的提示框 formatter: function() { //格式化提示信息 return 'CPU使用率'+ Highcharts.dateFormat('%H:%M:%S', this.x) +''+ Highcharts.numberFormat(this.y, 2)+'%'; } }, legend: { enabled: false //设置图例不可见 }, exporting: { enabled: false //设置导出按钮不可用 }, credits: { text: 'lain.com.cn', //设置LOGO区文字 url: 'http://www.lain.com.cn' //设置LOGO链接地址 }, series: [{ data: (function() { //设置默认数据, var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i++) { data.push({ x: time + i * 5000, y: Math.random()*100 }); } return data; })() }] }); }); </script> <div id="chart_spline" style="width: 100%; height: 400px"></div>
相关文章推荐
- War-shall 算法 【求传递闭包】 离散数学记录
- ubuntu下mysql中文乱码问题完美解决
- sgu 176 上下界网络流最小可行流带输出方案
- 第一章 计算机系统概论
- HDU 2476 - String painter(区间DP)
- 面试题:在9个点上画十条直线,每条直线上至少三个点
- 【leetcode】Contains Duplicate II
- Qt5.4下连接Mysql,QSqlDatabase: QMYSQL driver not loaded,QSqlDatabase: available drivers: QSQLITE QMYSQL
- 显卡 核心显卡、集成显卡与独立显卡的区别
- 【每日scrum】NO.7
- iOS应用架构谈 网络层设计方案
- hash算法在查找、比较中的应用
- SDOI2015 Round2 Day1总结
- Android Service完全解析,关于服务你所需知道的一切(下)
- 留言板功能
- Xutils HttpUtils上传文件的实现
- 海马汽车经销商管理系统技术解析(二十)修改调拨
- 设计模式之建造者模式
- 【每日scrum】NO.6
- HDU 3667 — Transportation 费用流