highcharts实现实时折线图

项目中要实现cpu实时折线显示，弄了半天，最后用highcharts实现的；

最近发现用highcharts显示有些问题 ，一开始没发现问题，显示挺正常的，图表显示也好看，最后发现一旦显示时间过长，会出现延迟，和当前时间有差别，时间越长，延时越长，目前还没发现是什么原因，先记录下目前的代码；

看下效果：

主要代码实现：

chartConfigOptions = (chartData) ->
        timeId = setInterval(()->
          $scope.x = (new Date()).getTime()
          $http
            url: 'nodes/cpu_info.json'
          .success (data) ->
            if data.mem_used_percent != ''
              $scope.mem_y = data.mem_used_percent
            if data.cpu_used_percent != ''
              $scope.cpu_y = data.cpu_used_percent

          .error (data) ->
            console.log 'error'

          if $rootScope.cpuMark != 'es'
            clearInterval(timeId)
        ,2000)

        # console.log 22, chartData
        $scope.chartConfig = {
          chart: {
            type: 'spline',
            animation: Highcharts.svg,  # don't animate in old IE
            marginRight: 10,
            backgroundColor: 'transparent', #背景
            height: 225,
            width: parseInt width/2
            events: {
              load: () ->
                series = this.series[0]
                timeIdMem = setInterval(()->
                  if $rootScope.cpuMark != 'es'
                    clearInterval(timeIdMem)
                    return
                  y = Number $scope.mem_y
                  series.addPoint([$scope.x, y], true, true)

                ,2001)
            }
          },
          credits: {
            enabled: false
          },
          time: {
            useUTC: false
          },
          title: {
            text: '内存 利用率(%)',
            margin: 5
          },
          xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
          },
          yAxis: {
            title: {
              text: ''
            },
            plotLines: [{
              value: 0,
              width: 1,
              color: '#808080'
            }],
            min: 0,
            max: 100,
            tickInterval: 10,
            lineColor: '#e6e6e6',
            lineWidth: 1,
          },
          tooltip: {
            headerFormat: '<b>{series.name}：</b><br/>',
            pointFormat: '{point.y:.2f}%'

          },
          legend: {
            enabled: false
          },
          exporting: {
            enabled: false
          },
          series: [{
            name: '利用率',
            data: chartData,
            marker: {
              fillColor: 'transparent'
            },
            zoneAxis: 'x',
            zones: [{
                value: (new Date()).getTime() - 1000,
                color: 'transparent'
            }]
          }]
        }

        $scope.chartConfig1 = {
          chart: {
            type: 'spline',
            animation: Highcharts.svg,  # don't animate in old IE
            marginRight: 10,
            backgroundColor: 'transparent', #背景
            height: 225,
            width: parseInt width/2
            events: {
              load: () ->
                series = this.series[0]
                timeIdCpu = setInterval(()->
                  if $rootScope.cpuMark != 'es'
                    clearInterval(timeIdCpu)
                    return
                  # x = (new Date()).getTime()
                  y = Number $scope.cpu_y
                  series.addPoint([$scope.x, y], true, true)

                ,2000)
            }
          },
          credits: {
            enabled: false
          },
          time: {
            useUTC: false
          },
          title: {
            text: 'CPU 利用率(%)',
            margin: 5
          },
          xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
          },
          yAxis: {
            title: {
              text: ''
            },
            plotLines: [{
              value: 0,
              width: 1,
              color: '#808080'
            }],
            min: 0,
            max: 100,
            tickInterval: 10,
            lineColor: '#e6e6e6',
            lineWidth: 1
          },
          tooltip: {
            headerFormat: '<b>{series.name}</b><br/>',
            pointFormat: '{point.y:.2f}%'
          },
          legend: {
            enabled: false
          },
          exporting: {
            enabled: false
          },
          series: [{
            name: '利用率',
            data: chartData,
            marker: {
              fillColor: 'transparent'
            },
            zoneAxis: 'x',
            zones: [{
                value: (new Date()).getTime() - 1000,
                color: 'transparent'
            }]
          }]
        }

      initData = ->
        $scope.chartData = []
        time = (new Date()).getTime()

        for i in [-60..0]
          $scope.chartData.push({
            x: time + i * 1000,
            y: 0
          })
        chartConfigOptions($scope.chartData)

      initData()

 后续发现问题在进行修改