javascript - 设置加载回调 : Trying to load a Google Visualization on a button press as opposed to on page load

Question

我正在使用 Google Visualization API 将基本折线图加载到我的页面上。

目前，此图表会在页面加载时立即显示。 Stack 上以前的帖子表明这是由于 google.setOnLoadCallback(drawVisualization) 造成的，它本质上取代了 .ready 事件。

我不希望立即加载此图表，而是在用户单击按钮后加载。我无法将此“drawVisualization”函数移植到独立于负载的函数中。

谢谢!!! 丹

<script type='text/javascript'>
  google.load('visualization', '1', {packages:['gauge']});
  **google.setOnLoadCallback(drawChart);**
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Memory', 80],

    ]);

    var options = {
      width: 400, height: 120,
      redFrom: 90, redTo: 100,
      yellowFrom:75, yellowTo: 90,
      minorTicks: 5
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

函数foo(){ 我很想从这里触发图表!!!! }

Answer 1

Javascript:

  google.load('visualization', '1', {packages:['gauge']});

  function foo() {
    var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Memory', 80],
      ]);

    var options = {
      width: 400, height: 120,
      redFrom: 90, redTo: 100,
      yellowFrom:75, yellowTo: 90,
      minorTicks: 5
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

HTML:

<input type="button" onclick="foo()">Test</input>