重绘图表时Google时间轴内存泄漏

Question

这是图表https://jsfiddle.net/damiantt/t2skaegg/2/

<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<input id="Draw" type="button" value="Draw" onclick="drawChart();" />

<div id="chart_div_container" style="overflow-x: auto;min-height:0%;">
  <div id="chart_div" style="overflow: visible;min-height:0%;"></div>
</div>

<script type="text/javascript">
google.charts.load('current', {
  'packages': ['timeline', 'table']
});

var initWidth = $('#chart_div').innerWidth();
var colorMap;

function drawChart() {
    $('#chart_div').off();
    $('#chart_div').empty();
  var data = google.visualization.arrayToDataTable([
    ['Maszyna', 'Kolor', {
      type: 'string',
      role: 'tooltip',
      'p': {
        'html': true
      }
    }, 'Start Time', 'End Time'],

    ['one', 'pi1', 'brr',
      new Date(2014, 10, 15, 12, 30, 0),
      new Date(2014, 10, 15, 12, 30, 20)
    ],
    ['one', 'pu3', 'brr',
      new Date(2014, 10, 15, 12, 30, 20),
      new Date(2014, 10, 15, 12, 30, 45)
    ],
    ['one', 'pu3', 'brr',
      new Date(2014, 10, 15, 12, 30, 45),
      new Date(2014, 10, 15, 12, 30, 55)
    ],
    ['two', 'g2', 'brr1',
      new Date(2014, 10, 15, 12, 30, 35),
      new Date(2014, 10, 15, 12, 30, 55)
    ],

    ['two', 'pi1', 'brr2',
      new Date(2014, 10, 15, 12, 30, 55),
      new Date(2014, 10, 15, 14, 31, 55)
    ],

    ['three', 'pu3', 'brr',
      new Date(2014, 10, 15, 12, 29, 30),
      new Date(2014, 10, 15, 14, 30, 0)
    ],
    ['three', 'pi1', 'brr',
      new Date(2014, 10, 15, 14, 30, 0),
      new Date(2014, 10, 15, 14, 35, 0)
    ],
    ['three', 'g2', 'Zbrr',
      new Date(2014, 10, 15, 14, 35, 0),
      new Date(2014, 10, 15, 15, 25, 10)
    ],
    ['three', 'pu3', 'KR1',
      new Date(2014, 10, 15, 15, 25, 10),
      new Date(2014, 10, 15, 15, 26, 00)
    ],
    ['three', 'g2', 'KR2',
      new Date(2014, 10, 15, 15, 26, 00),
      new Date(2014, 10, 15, 15, 26, 45)
    ],
    ['three', 'pi1', 'KR3',
      new Date(2014, 10, 15, 15, 26, 45),
      new Date(2014, 10, 15, 15, 27, 15)
    ],
    ['three', 'pu3', 'brr',
      new Date(2014, 10, 15, 15, 27, 15),
      new Date(2014, 10, 15, 20, 30, 1)
    ],
    ['three', 'pi1', 'brr',
      new Date(2014, 10, 15, 20, 30, 1),
      new Date(2014, 10, 16, 10, 30, 10)
    ],
    ['three', 'pu3', 'brr',
      new Date(2014, 10, 16, 10, 30, 10),
      new Date(2014, 10, 16, 18, 30, 10)
    ],
  ]);

  var colors = [];
  colorMap = {
    // should contain a map of category -> color for every category
    pi1: '#e63b6f',
    g2: '#19c362',
    pu3: '#592df7',
    c4: '#000000',
    '000000': '#000000'
  }
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    colors.push(colorMap[data.getValue(i, 1)]);
  }

  var options = {
    enableInteractivity: false,
    height: 210,
    width: initWidth,
    colors: colors,
    avoidOverlappingGridLines: false,
    timeline: {
      showBarLabels: false
    },
    hAxis: {
      format: 'dd/MM\nHH:mm'
    },
    tooltip: {
      isHtml: true
    }
  };

  var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

  chart.draw(data, options);

  afterDraw(data, colors);

  $(document).ready(function() {
    var zoom = 1000;
    var leftSpace = $('rect:first-child+path').position().left - $('#chart_div svg').position().left;
    var svgOffset = $('#chart_div svg').offset().left;
    var $chartDivCont = $('#chart_div_container');

    var x, left, down;
    $('#chart_div').on({
      'mousemove': function(evt) {
        if (down) {
          var newX = evt.pageX;
          $chartDivCont.scrollLeft(left - newX + x);
        }
      },
      'mousedown': function(evt) {
        $('html').css('cursor', 'col-resize');
        evt.preventDefault();
        down = true;
        x = evt.pageX;
        left = $chartDivCont.scrollLeft();
      },
      'mouseup': function() {
        down = false;
        $('html').css('cursor', 'auto');
      },
      'mousewheel DOMMouseScroll': function(evt) {
        evt.preventDefault();
        if (evt.originalEvent.wheelDelta > 0 || evt.originalEvent.detail < 0) {
          if (options.width < 31000) {
            options.width += zoom;
            var prevScrollLeft = $chartDivCont.scrollLeft();
            var prop = ($chartDivCont.scrollLeft() + evt.originalEvent.clientX - leftSpace - svgOffset) / ($('#chart_div svg').width() - leftSpace);
            chart.draw(data, options);
            afterDraw(data, colors);
            $chartDivCont.scrollLeft(prevScrollLeft + (prop * 1000));
          }
        } else {
          if (options.width >= initWidth + zoom) {
            options.width -= zoom;
            var prevScrollLeft = $chartDivCont.scrollLeft();
            var prop = ($chartDivCont.scrollLeft() + evt.originalEvent.clientX - leftSpace - svgOffset) / ($('#chart_div svg').width() - leftSpace);
            chart.draw(data, options);
            afterDraw(data, colors);
            $chartDivCont.scrollLeft(prevScrollLeft - (prop * 1000));
          }
        }
      }
    });
  });
}

function afterDraw(data, colors) {
  $rects = $('#chart_div svg > g:nth-child(5) > rect');
  for (var i = 0; i < $rects.length; i++) {
    $('#chart_div svg > g:nth-child(5) > rect:nth-child(' + (i + 1) + ')').css({
      "fill": colors[i]
    });
  }
}

当我在Chrome上运行时，内存使用量约为75k。在Draw和max放大后（通过鼠标滚动缩放）内存计显示140k，然后最大缩小 - 180k内存使用，放大 - 225k，缩小 - 265k。

每次抽奖（）之后有没有办法释放内存？我试图删除HTML元素，以空变量，但没有什么可以帮助我