类型错误：google.charts.Bar是不是构造

我试图与谷歌图表API工作，但我得到一个错误，我不明白：类型错误：google.charts.Bar是不是构造

当我使用一个单一的图表它显示了很好的图表，但是当我加我收到以下错误的第二图：

TypeError: google.charts.Bar is not a constructor

这里是我的代码：

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

来源

2016-12-14 nabil

您的HTML标记很奇怪，我不确定这是否是有意的。根据the docs，您应该将所有内容加载到google.charts.load()，您应该在这里加载corechart和bar软件包。所有的JavaScript也应该在相同的<script></script>标签中。

这里有一个working example与同一页上的两个图表：

<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

来源

2016-12-14 14:17:02 ktross

谢谢。它工作得很好 – nabil

类型错误：google.charts.Bar是不是构造

回答

相关问题