$(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart = new Highcharts.Chart({ chart: { renderTo: 'container', //图表放置的容器,DIV defaultSeriesType: 'spline', //图表类型为曲线图 events: { load: function() { } } }, title: { text: '网络接收流量' //图表标题 }, xAxis: { //设置X轴 type: 'datetime', //X轴为日期时间类型 tickPixelInterval: 150 //X轴标签间隔 }, yAxis: { //设置Y轴 title:{ text: '网络接收流量' }, max: 102400, //Y轴最大值 min: 0, //Y轴最小值 labels: { formatter: function() { return this.value/1000 +'KB'; } } }, tooltip: {//当鼠标悬置数据点时的提示框 formatter: function() { //格式化提示信息 // return '网络流量'+ // Highcharts.dateFormat('%H:%M:%S', this.x) +''+ // Highcharts.numberFormat(this.y, 2)+'%'; } }, legend: { enabled: false //设置图例不可见 }, exporting: { enabled: false //设置导出按钮不可用 }, credits: { text: '', //设置LOGO区文字 url: '' //设置LOGO链接地址 }, series: [{ data: (function() { //设置默认数据, var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i++) { data.push({ x: 1410213036000, y: 1250 }); } return data; })() }] }); });
<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script> <script> //左侧Javascript代码 </script> </head> <body> <div id="container" style="min-width:700px;height:400px"></div> </body> </html>
黑洞@heidsoft
Github:https://github.com/heidsoft
微博:http://weibo.com/liuganbin
热衷云计算和大数据
关注CloudStack,OpenStack,Linux c/c++/python/java
关注研究新技术