在点击按钮上显示谷歌图表 [英] Show google chart on button click

查看：131
本文介绍了在点击按钮上显示谷歌图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

html：

 < div class =row> 
< div class =col-lg-12> 
< div class =card mb-3> 
< div class =card-header>< b>系统电压< / b>< / div> 
< div class =card-body> 
< div class =row> 
< div class =col-md-12id =line_chartstyle =width：100％; height：360px;> 
<！ - 在此显示GOOGLE图形 - > < button class =btn>绘图图表< / 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.000 Z：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>

目前，按钮出现，但点击上没有任何事情发生。
我正在尝试遵循此示例。



编辑：

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

  < script type =text / javascript> 
 $（document）.ready（function（）{
 $（。btn）。click（function（）{
 google.charts.load（'current'，{
包：['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}，电池电流，（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 .key（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 / javascriptsrc =https://www.google.com/jsapi>< / script> 
< script type =text / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script>


解决方案当使用从 load 语句，

回调不需要...



更改加载语句如下... 

  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>

请参阅发布说明了解更多信息...





load 语句将等待文档加载，

不需要 - > $（document）.ready



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



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

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（数据，选项）; }）;}）;

< script src = https://www.gstatic.com/charts/loader.js\"></script><script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery < / div>< / script>< input class =btntype =buttonvalue =绘制图表/>< div id =line_chart>< / div> / code>


I have the following div on a page where I would like a google chart to load on a button click:

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>

At the moment, the button appears, but nothing is happening on the click. I am trying to follow this example.

EDIT:

I have updated the google charts to exclude the callback statement, and also added libraries I am using. The chart shows up perfectly well when not using the button, but I would like it to show only when the button is pressed.

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

Libraries:

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

解决方案

when using the promise returned from the load statement,
the callback is not needed...

change the load statement as follows... 

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

also need to ensure the library is included... 

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

EDIT

note: the following library is old and should no longer be used, you can remove it.
<script src="https://www.google.com/jsapi"></script>
see the release notes for more info...

the load statement will wait for the document to load,
no need for --> $(document).ready

recommend loading google first, then wait for the button click...

see following working snippet... 

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>

这篇关于在点击按钮上显示谷歌图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆