Highcharts图表之动态图-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Highcharts 实例 | web建站教程(ipkd.cn)</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/highcharts.js"></script>
    <script src="/js/highcharts-more.js"></script>
</head>
<body>
    <div id="myChart" width='100%' height='450'></div>
    <script type="text/javascript">
       $(document).ready(function() {  
           var chart = {
              type: 'spline',
              animation: Highcharts.svg,
              marginRight: 10,
              events: {
                 load: function () {
                    var series = this.series[0];
                    setInterval(function () {
                       var x = (new Date()).getTime(),
                       y = Math.random();
                       series.addPoint([x, y], true, true);
                    }, 1000);
                 }
              }
           };
           var title = {
              text: '访问量'   
           };   
           var xAxis = {
              type: 'datetime',
              tickPixelInterval: 150
           };
           var yAxis = {
              title: {
                 text: 'Value'
              },
              plotLines: [{
                 value: 0,
                 width: 1,
                 color: '#808080'
              }]
           };
           var 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);
              }
           };
           var plotOptions = {
              area: {
                 pointStart: 1940,
                 marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                       hover: {
                         enabled: true
                       }
                    }
                 }
              }
           };
           var legend = {
              enabled: false
           };
           var exporting = {
              enabled: false
           };
           var series= [{
              name: 'Random data',
              data: (function () {
                 // generate an array of random data
                 var data = [],time = (new Date()).getTime(),i;
                 for (i = -19; i <= 0; i += 1) {
                    data.push({
                       x: time + i * 1000,
                       y: Math.random()
                    });
                 }
                 return data;
              }())    
           }];     
              
           var json = {};   
           json.chart = chart; 
           json.title = title;     
           json.tooltip = tooltip;
           json.xAxis = xAxis;
           json.yAxis = yAxis; 
           json.legend = legend;  
           json.exporting = exporting;   
           json.series = series;
           json.plotOptions = plotOptions;
           
           
           Highcharts.setOptions({
              global: {
                 useUTC: false
              }
           });
           $('#myChart').highcharts(json);
          
        });
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：