json数据格式如下:
{ "value": [ 23, 4, 24, 95, 27, 35, 93, 63, 75, 17, 13, 93, 54, 71, 61, 14, 13, 14, 29 ] }
需要highcharts的dark-blue.js文件
html文件格式如下：
<!doctype html><html lang="en"><head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.hcharts.cn/highcharts/exporting.js"></script> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="dark-blue.js"></script> <script> $(document).ready(function() { $.getJSON('http://1.1.1.1:800/1.json', { }, function (json_data) { //左侧Javascript代码 $(function () { $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart; $('#container').highcharts({ chart: { type: 'spline', animation: Highcharts.svg, marginRight: 10, events: { } }, title: { text: '流量图' }, xAxis: { title: { text: '时间' }, type: 'datetime', tickPixelInterval: 150 }, credits: { enabled:false }, yAxis: { title: { text: '单位/M' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ Highcharts.dateFormat("时间:"+ '%m-%d %H:%M:%S', this.x) +'<br/>'+ "数据:" + Highcharts.numberFormat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: '实时数据', data: (function() { // generate an array of random data var data = [], time = (new Date()).getTime(), length=((json_data.value).length)+1; $.each(json_data.value, function(i, value) { data.push({ x: time - length * 1000, y: value }); length--; }); return data; })() }] }); }); }); }); }); </script></head><body> <div id="container" style="min-width:700px;height:400px"></div></body></html>
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/1754/viewspace-2815472/ ，如需转载，请注明出处，否则将追究法律责任。
下一篇：
命令模式
请登录后发表评论
登录
全部评论
