Javascript 单击后显示折线图_Javascript

Javascript 单击后显示折线图

javascript

Javascript 单击后显示折线图,javascript,Javascript,我在这个链接中使用了谷歌的可视化：折线图这就是代码 <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); go

我在这个链接中使用了谷歌的可视化：折线图

这就是代码

<html>
 <head>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance'
    };

    var chart = new    google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
 </script>
 </head>
 <body>
 <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

我的问题是，当我使用此代码时，它总是显示在页面上

我想在单击按钮后显示折线图，我想您应该这样做：

演示：

JavaScript:

HTML:

希望这能有所帮助。

我建议：

google.load("visualization", "1", {
    packages: ["corechart"]
});

// bind a function to the onload event:
google.setOnLoadCallback(initialise);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2004', 1000, 400],
        ['2005', 1170, 460],
        ['2006', 660, 1120],
        ['2007', 1030, 540]
    ]);

    var options = {
        title: 'Company Performance'
    };

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

// the function bound to the onload event handler:
function initialise(){
    // getting a reference to the button element (that I added,
    // which isn't in your own code):
    var button = document.getElementById('showChart');
    // using a simple event-handler to bind a function to the onclick event:
    button.onclick = function () {
        // draw the chart:
        drawChart();
        // remove the button element:
        button.parentNode.removeChild(button);
    };
}

使用以下HTML进行上述操作：

<button id="showChart">Show the chart</button>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

您自己的图表显示为页面加载而不是单击按钮元素的原因是：

您在onload事件处理程序google.setOnLoadCallbackdrawchart中调用了drawChart函数，这导致在页面加载时立即调用它，并且您在发布的HTML中没有任何可单击的按钮，或者没有事件处理程序来处理对该元素的单击（如果该元素存在），但由于某种原因，没有显示该元素。

google.load("visualization", "1", {
    packages: ["corechart"]
});

// bind a function to the onload event:
google.setOnLoadCallback(initialise);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2004', 1000, 400],
        ['2005', 1170, 460],
        ['2006', 660, 1120],
        ['2007', 1030, 540]
    ]);

    var options = {
        title: 'Company Performance'
    };

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

// the function bound to the onload event handler:
function initialise(){
    // getting a reference to the button element (that I added,
    // which isn't in your own code):
    var button = document.getElementById('showChart');
    // using a simple event-handler to bind a function to the onclick event:
    button.onclick = function () {
        // draw the chart:
        drawChart();
        // remove the button element:
        button.parentNode.removeChild(button);
    };
}

<button id="showChart">Show the chart</button>
<div id="chart_div" style="width: 900px; height: 500px;"></div>