Question

我正在尝试使用 Google图表API ，但我收到一个我无法理解的错误：

当我使用单个图表时，它可以很好地显示图表，但是当我使用时添加第二个图表我收到以下错误：

TypeError：google.charts.Bar不是构造函数

这是我的代码：

  <div class="row">
      <div class="col-md-12" style="padding-left:3px; padding-right:3px">
          <html>
            <head>
              <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
              <script type="text/javascript">
                google.charts.load('current', {'packages':['corechart']});
                google.charts.setOnLoadCallback(drawChart);

                function drawChart() {
                  var data = google.visualization.arrayToDataTable([
                    ['Date', 'val1', 'val2' , 'val3', 'val4'],
                              [ '09',  12, 5, 9, 2],
                              [ '10',  32, 19, 16, 9],
                              [ '11',  2, 7, 5, 12],
                              [ '12',  23, 11, 9, 18],
                              [ '13',  5, 7, 4, 12],
                              [ '14',  21, 16, 12, 43],
                              [ '15',  2, 1, 2, 3],
                              [ '16',  9, 12, 18, 32],                    
                  ]);

                  var options = {
                    height: 400,
                    title: 'Viste journalière',
                    intervals: { 'style':'area' },
                    hAxis: {title: 'Jour',  titleTextStyle: {color: '#333'}},
                    vAxis: {minValue: 0}
                  };

                  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
                  chart.draw(data, options);
                }
              </script>
            </head>
            <body>
              <div id="chart_div" style="width: 100%; height: 420px;"></div>
            </body>
          </html>
      </div>    

  <div class="row">
      <div class="col-md-4" style="margin-left:10px; padding-left:3px; padding-right:3px">
        <html>
          <head>
            <script type="text/javascript">
              google.charts.load('current', {'packages':['bar']});
              google.charts.setOnLoadCallback(drawChart);
              function drawChart() {
                var data = google.visualization.arrayToDataTable([
                  ['Titre', 'Comment', 'like', 'no'],
                         [ 'text1',  7, 10, 3],
                         [ 'text2',  2, 4, 5],
                         [ 'text3',  4, 3, 2],                       
                   ]);

                var options = {
                  chart: {
                    title: 'Company Performance',
                    subtitle: 'Sales, Expenses, and Profit: 2014-2017',
                  },
                  bars: 'horizontal' // Required for Material Bar Charts.
                };

                var chart = new google.charts.Bar(document.getElementById('barchart_material'));

                chart.draw(data, google.charts.Bar.convertOptions(options));      }
            </script>
          </head>
          <body>
            <div id="barchart_material" style="width: 900px; height: 500px;"></div>
          </body>
        </html>
    </div>    
</div>

Answer 1

您的HTML标记很奇怪，我不确定这是否是故意的。根据{{3}}，您应该只需一次调用[{1}}即可加载所有内容，并且您应该同时加载google.charts.load()和corechart个包。您的所有javascript也应该位于相同的bar代码中。

这是the docs，在同一页面上有两个图表：

<script></script>

编辑：示例现在可以使用并添加了一个jsfiddle

TypeError：google.charts.Bar不是构造函数

1 个答案: