類型錯誤：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是不是構造

回答

相關問題