javascript - 单击按钮显示谷歌图表

Question

我在页面上有以下 div，我希望在点击按钮时加载 google 图表:

html:

<div class="row">
    <div class="col-lg-12">
        <div class="card mb-3">
        <div class="card-header"><b>System Voltage</b></div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12" id="line_chart" style="width:100%;height:360px;">
                    <!-- SHOW GOOGLE GRAPH HERE --> <button class="btn">Plot chart!</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

谷歌图表:

<script type="text/javascript">
$(document).ready(function() {
    $(".btn").click(function() {
        google.charts.load('current', {
        packages: ['corechart'], callback: drawChart
        }).then(function drawChart() {

        <?php
        $imei = $bboxx_imei;
        $result = shell_exec('Daily_Data_Retriever_ishackweb.py ' . $imei);
        $resultdata = json_decode($result, true);
        ?>

        var jsonData =  <?php echo $result; ?>   //{"Battery Voltage, (V)":{"2017-10-09T00:00:00.000Z":12.5,"2017-10-09T00:01:00.000Z":12.44,"2017-10-09T00:02:00.000Z":12.43}};

        var chartData = [];
        Object.keys(jsonData).forEach(function (column) {
        chartData.push(['Datetime', column]);
        Object.keys(jsonData[column]).forEach(function (dateValue) {
          chartData.push([new Date(dateValue), jsonData[column][dateValue]]);
        });
        });
        var data = google.visualization.arrayToDataTable(chartData);

        var options = {
        chartArea: {width:'90%', height:'65%'},
        title: 'Battery Voltage',
        curveType: 'function',
        legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('line_chart'));

        chart.draw(data, options);
        });
    });
});
</script>

此刻，按钮出现了，但是点击没有任何反应。 我正在尝试遵循此 example .

编辑:

我更新了谷歌图表以排除回调语句，还添加了我正在使用的库。图表在不使用按钮时显示得非常好，但我希望它仅在按下按钮时显示。

<script type="text/javascript">
$(document).ready(function() {
    $(".btn").click(function() {
        google.charts.load('current', {
        packages: ['corechart']
        }).then(function () {

        <?php
        $imei = $bboxx_imei;
        $result = shell_exec('Daily_Data_Retriever_ishackweb.py ' . $imei);
        $resultdata = json_decode($result, true);
        ?>

        var jsonData =  {"Battery Voltage, (A)":{"2017-11-11T00:00:00.000Z":12.3,"2017-11-11T00:01:00.000Z":12.35,"2017-11-11T00:02:00.000Z":12.6,"2017-11-11T00:03:00.000Z":12.7,"2017-11-11T00:04:00.000Z":12.8},"Battery Current, (A)":{"2017-11-11T00:00:00.000Z":1.3,"2017-11-11T00:01:00.000Z":1.4,"2017-11-11T00:02:00.000Z":1.5,"2017-11-11T00:03:00.000Z":1.6,"2017-11-11T00:04:00.000Z":1.7}};

        var chartData = [];
        Object.keys(jsonData).forEach(function (column) {
        chartData.push(['Datetime', column]);
        Object.keys(jsonData[column]).forEach(function (dateValue) {
          chartData.push([new Date(dateValue), jsonData[column][dateValue]]);
        });
        });
        var data = google.visualization.arrayToDataTable(chartData);

        var options = {
        chartArea: {width:'90%', height:'65%'},
        title: 'Battery Voltage',
        curveType: 'function',
        legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('line_chart'));

        chart.draw(data, options);
        });
    });
});
</script>

图书馆:

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Answer 1

当使用从 load 返回的 promise 时声明，
callback不需要...

改变加载语句如下...

    google.charts.load('current', {
      packages: ['corechart'],
    }).then(function () {

还需要确保包含库...

<script src="https://www.gstatic.com/charts/loader.js"></script>

编辑

注意:以下库是旧的，不应该再使用，你可以删除它。
<script src="https://www.google.com/jsapi"></script>
查看release notes了解更多信息...

---

load语句将等待文档加载，
不需要 --> $(document).ready

建议先加载google，然后等待按钮点击...

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  $(".btn").click(function() {
    var jsonData = {"Battery Voltage, (V)":{"2017-10-09T00:00:00.000Z":12.5,"2017-10-09T00:01:00.000Z":12.44,"2017-10-09T00:02:00.000Z":12.43}};

    var chartData = [];
    Object.keys(jsonData).forEach(function (column) {
    chartData.push(['Datetime', column]);
    Object.keys(jsonData[column]).forEach(function (dateValue) {
      chartData.push([new Date(dateValue), jsonData[column][dateValue]]);
    });
    });
    var data = google.visualization.arrayToDataTable(chartData);

    var options = {
      chartArea: {width:'90%', height:'65%'},
      title: 'Battery Voltage',
      curveType: 'function',
      legend: { position: 'bottom' }
    };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input class="btn" type="button" value="Draw Chart" />
<div id="line_chart"></div>