Javascript 点击按钮显示谷歌图表

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

html:

系统电压
绘图图！

谷歌图表：

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

$（文档）.ready（函数（）{
$（“.btn”）。单击（函数（）{
google.charts.load（'current'{
包：['corechart']，回调：drawChart
}).then（函数图（）{
var jsonData=/{“电池电压，（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=[]；
key（jsonData）.forEach（函数（列）{
push（['Datetime'，column]）；
key（jsonData[column]）.forEach（函数（dateValue）{
push（[newdate（dateValue），jsonData[column][dateValue]]）；
});
});
var data=google.visualization.arrayToDataTable（chartData）；
变量选项={
图表区：{宽度：'90%，高度：'65%}，
标题：“蓄电池电压”，
curveType:'函数'，
图例：{位置：'bottom'}
};
var chart=new google.visualization.LineChart（document.getElementById（'line_chart'）；
图表绘制（数据、选项）；
});
});
});

此时，按钮出现，但单击时没有发生任何事情。 我正试着遵循这一点

编辑：

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

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

$（文档）.ready（函数（）{
$（“.btn”）。单击（函数（）{
google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
2007-11-11-11-11-11-11-11-11-11-11-11-11-11-11-11-11-11-11-11-11-11-11-11-11-11-11-11-10-10-00:01:01:01:00:00:00:00.00.00.000Z:12.8“12.8”12.8“12.8，”12.8“电池电流，（A），，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，Z“：1.6，“2017-11-11T00:04:00.000Z”：1.7}；
var chartData=[]；
key（jsonData）.forEach（函数（列）{
push（['Datetime'，column]）；
key（jsonData[column]）.forEach（函数（dateValue）{
push（[newdate（dateValue），jsonData[column][dateValue]]）；
});
});
var data=google.visualization.arrayToDataTable（chartData）；
变量选项={
图表区：{宽度：'90%，高度：'65%}，
标题：“蓄电池电压”，
curveType:'函数'，
图例：{位置：'bottom'}
};
var chart=new google.visualization.LineChart（document.getElementById（'line_chart'）；
图表绘制（数据、选项）；
});
});
});

图书馆：

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

---

可能您忘记导入所有必需的文件。确保您正在导入jquery cdn（或将文件下载到服务器）

和谷歌图表cdn

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

---

并检查是否需要API密钥来使用插件。

使用从

load

语句返回的承诺时，将

添加到html页面的头部以加载图表库。
不需要

回调

按如下所示更改load语句

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

还需要确保包含库

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

不幸的是，在更新后，它仍然没有显示（请参见编辑）。有可能是收集数据的php代码吗？请参见上面的编辑——您也可以检查浏览器的控制台是否有错误（F12）——对于php，我个人不建议在javascript中混合使用，而是使用javascript中的ajax调用php页来获取数据——……您的代码工作得非常好，谢谢。我现在正试图在图表中添加一条额外的线-请参阅我的编辑以添加“电池电流，（A）”的数据，但我一直得到一个

c。getTimezoneOffset不是一个函数

错误。如何调整您的chartData函数以包含额外数据？请参阅-希望您能提供帮助！

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

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