按钮单击显示谷歌图表

Question

我在一个页面上有以下div，我想在点击按钮上加载谷歌图表：

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>

Google Chart：

<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

也许您忘了导入所有必要的文件。确保导入jquery cdn（或将文件下载到服务器）

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

和谷歌图表cdn

<script src="https://www.google.com/jsapi"></script>

并检查是否需要API密钥才能使用该插件。

Answer 2

将<script type="text/javascript" src="https://www.google.com/jsapi">添加到html页面的头部以加载图表库

Answer 3

使用从load语句返回的承诺时，
不需要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语句将等待文档加载，
不需要 - ＆gt; $(document).ready

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

请参阅以下工作代码段...

＆＃13;

＆＃13;

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);
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;