直接上代码吧
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <script type="text/javascript" src="../../js/jquery-1.8.3.min.js"></script> <style type="text/css"> ${demo.css} </style> <script type="text/javascript"> $(function () { var seriesOptions = [], seriesCounter = 0; //定义三条线的名字 var names = ['产气', '产水', '流压', '套压']; //var names = ['产气', '产水']; var yAxisOptions = []; $(document).ready(function () { Highcharts.setOptions({ global: { useUTC: false } }); $('#container').highcharts({ chart: { type: 'spline', marginRight: 130, marginLeft: 100, events: { load: function () { // set up the updating of the chart each second //var series = this.series[0]; var series = this.series; setInterval(function () { for(var i = 0; i < series.length; i++){ var x = (new Date()).getTime(), // current time y = Math.random(); series[i].addPoint([x, y], true, true); } }, 1000); } } }, title: { text: 'Live random data' }, xAxis: { type: 'datetime', tickPixelInterval: 150 }, yAxis: yAxisOptions, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, series:seriesOptions }); }); $.each(names, function (i, name) { var bopposite = true; if(i%2==0){ bopposite = false; } yAxisOptions[i] = { title: { text: '<b>' + name + '</b>', align:'high', margin:20, offset: 0, rotation: 0, y: -10, style:{ fontSize: '5px', color: 'red' } }, lineWidth:1, opposite:bopposite }; var random_data = [], time = (new Date()).getTime(), j; for (j = -199; j <= 0; j += 1) { random_data.push({ x: time + j * 1000, y: Math.random() }); } seriesOptions[i] = { name: name, data: random_data, yAxis:i }; }); }); </script> </head> <body> <script src="../../js/highcharts.js"></script> <script src="../../js/modules/exporting.js"></script> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html>
