2015-05-28 65 views
0

我不能讓谷歌堆積柱形圖工作。在網站上https://developers.google.com/chart/interactive/docs/gallery/columnchart需要修復谷歌堆積柱形圖的代碼

他們提供的代碼來繪製這種圖表:

var data = google.visualization.arrayToDataTable([ 
     ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 
     'Western', 'Literature', { role: 'annotation' } ], 
     ['2010', 10, 24, 20, 32, 18, 5, ''], 
     ['2020', 16, 22, 23, 30, 16, 9, ''], 
     ['2030', 28, 19, 29, 30, 12, 13, ''] 
     ]); 

     var options = { 
     width: 600, 
     height: 400, 
     legend: { position: 'top', maxLines: 3 }, 
     bar: { groupWidth: '75%' }, 
     isStacked: true, 
     }; 

但我找不到完整的HTML代碼來測試它。我試過了:

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
    var data; 
    var chart; 

     // Load the Visualization API and the package. 
     google.load('visualization', '1', {'packages':['corechart']}); 


     // Set a callback to run when the Google Visualization API is loaded. 

     google.setOnLoadCallback(drawChart); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawChart() { 

     // Create our data table. 


     var data = google.visualization.arrayToDataTable([ 
     ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 
     'Western', 'Literature', { role: 'annotation' } ], 
     ['2010', 10, 24, 20, 32, 18, 5, ''], 
     ['2020', 16, 22, 23, 30, 16, 9, ''], 
     ['2030', 28, 19, 29, 30, 12, 13, ''] 
     ]); 

     // Set chart options 

     var options = { 
     width: 600, 
     height: 400, 
     legend: { position: 'top', maxLines: 3 }, 
     bar: { groupWidth: '75%' }, 
     isStacked: true, 
     }; 


var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 


    </script> 
    </head> 
    <body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div" style="width:400; height:300"></div> 
    </body> 
</html> 

但是沒有運氣。 有人可以給我這個圖表的完整的HTML代碼?

回答

0

其實唯一缺少的是關於drawChart函數的關閉}它應該放在</script>之前。

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
    var data; 
    var chart; 

     // Load the Visualization API and the package. 
     google.load('visualization', '1', {'packages':['corechart']}); 


     // Set a callback to run when the Google Visualization API is loaded. 

     google.setOnLoadCallback(drawChart); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawChart() { 

      // Create our data table. 


      var data = google.visualization.arrayToDataTable([ 
      ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 
      'Western', 'Literature', { role: 'annotation' } ], 
      ['2010', 10, 24, 20, 32, 18, 5, ''], 
      ['2020', 16, 22, 23, 30, 16, 9, ''], 
      ['2030', 28, 19, 29, 30, 12, 13, ''] 
      ]); 

      // Set chart options 

      var options = { 
      width: 600, 
      height: 400, 
      legend: { position: 'top', maxLines: 3 }, 
      bar: { groupWidth: '75%' }, 
      isStacked: true, 
      }; 


     var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    } 
    </script> 
    </head> 
    <body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div" style="width:400; height:300"></div> 
    </body> 
</html>