如何在一页中加载两个谷歌折线图？答案

【问题标题】：How to load two Google Line charts in one page?如何在一页中加载两个谷歌折线图？
【发布时间】：2016-06-04 08:38:36
【问题描述】：

我深入研究了here 和here 提出的类似问题。我尝试了他们的实现。没用！

然后我查看了 Google 提供的以下链接：tow charts in one page。遵循相同的程序，但最终还是一次只显示一个图表。

下面是我的代码：

 <script type = "text/javascript" src = "https://www.google.com/jsapi" ></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!--Load the Ajax API-->

    <script type="text/javascript">

      google.load("visualization", "1", {packages:["line"]});         
        google.setOnLoadCallback(drawChart);    
        google.setOnLoadCallback(drawOutputChart);

        function drawChart() {
            var data = new google.visualization.DataTable(<?= $jsonAnalogTable ?>);
            var options = {
                chart: {
                    title: ' Data ',
                    is3D: 'true'
                },
                width: 550,
                height: 350,

            };       
            var chart = new google.charts.Line(document.getElementById('analogchart'));
            chart.draw(data, options);
        } 

        function drawOutputChart(){
           var data2 = new google.visualization.DataTable(<?= $jsonOutputTable ?>);
            var options2 = {
                chart: {
                    title: ' Data ',
                    is3D: 'true'
                },
                width: 550,
                height: 350,

            };

            var chart2 = new google.charts.Line(document.getElementById('outputChart'));
            chart2.draw(data2, options2); 
        }


    </script>

**调用它的HTML代码：**

<table>
            <tr>
                <td>
                    <div id="analogchart" >

                    </div>  
                </td>
                <td>
                    <div id="outputChart" >

                    </div>
                </td>

            </tr>
        </table>

我真的不知道出了什么问题，因为它一次只能显示一个图表，但不能同时显示！

【问题讨论】：

标签： javascript html charts google-api google-visualization

【解决方案1】：

建议使用loader.js 与旧库jsapi
Line 图表不需要两者都需要

另外，setOnLoadCallback 每页只能调用一次
可以包含在load 语句中，如下例所示

试试这样的……

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

  google.charts.load('current', {
    callback: function () {
      drawChart();
      drawOutputChart();
    },
    packages: ['line']
  });

  function drawChart() {
    var data = new google.visualization.DataTable(<?= $jsonAnalogTable ?>);
    var options = {
      chart: {
        title: ' Data ',
        is3D: 'true'
      },
      width: 550,
      height: 350,
    };       
    var chart = new google.charts.Line(document.getElementById('analogchart'));
    chart.draw(data, options);
  } 

  function drawOutputChart(){
    var data2 = new google.visualization.DataTable(<?= $jsonOutputTable ?>);
    var options2 = {
      chart: {
        title: ' Data ',
        is3D: 'true'
      },
      width: 550,
      height: 350,
    };

    var chart2 = new google.charts.Line(document.getElementById('outputChart'));
    chart2.draw(data2, options2); 
  }

</script>

【讨论】：