logo标签列表

类型错误：google.charts.Bar不是一个构造函数。

javascriptchartsgoogle-visualization
4
我正在尝试使用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>
1个回答
10

您的HTML标记很奇怪，我不确定这是否是有意为之的。根据文档，您应该在单个google.charts.load()调用中加载所有内容，并在那里加载corechart和bar包。您所有的Javascript代码也应该在同一个<script></script>标签中。

这里有一个具有两个图表的工作示例，在同一页上显示。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart', 'bar']});
  google.charts.setOnLoadCallback(drawChart);
  google.charts.setOnLoadCallback(drawChartTwo);

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

  function drawChartTwo() {
    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>

<div class="row">
  <div class="col-md-12" style="padding-left:3px; padding-right:3px">
    <div id="chart_div" style="width: 100%; height: 420px;"></div>
  </div>
</div>    

<div class="row">
  <div class="col-md-4" style="margin-left:10px; padding-left:3px; padding-right:3px">
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </div>    
</div>

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接