顯示Google圖表時出現問題
[英]Issue with displaying Google Charts
問題描述
這是我探索Google圖表的第一天，但未顯示折線圖。 實際上沒有顯示任何內容。
這是我的代碼：
<html> <head> <style> <%@ include file="demoGraph.css"%> </style> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', { 'packages': ['line'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'Months'); data.addColumn('number', 'Enrolled'); data.addColumn('number', 'Inactive'); data.addColumn('number', 'Guest'); data.addRows([ [Jan, 700, 1200, 800], [Feb, 1000, 275, 1800], [Mar, 1250, 220, 1500], [Apr, 1100, 400, 600], [May, 1900, 250, 1200], [Jun, 2000, 360, 1000], [Jul, 1500, 500, 1000], [Aug, 1300, 250, 1000], [Sep, 1700, 500, 1000], [Oct, 1200, 150, 525], [Nov, 1000, 250, 625], [Dec, 1920, 280, 700] ]); var options = { title: 'Demo Graph', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.charts.Line(document.getElementById('linechart_material')); chart.draw(data, options); } </script> </head> <body> <div id="linechart_material" style="width: 900px; height: 500px"></div> </body> </html>
但是在網頁上它什么也沒顯示。 根據他們的說法，它應該顯示圖形，但不是。 有人可以指出我想念的東西嗎？
3 個解決方案
解決方案1
1 已采納 2016-07-21 07:21:58
這是一個工作示例。
- 在您的代碼中，需要將月份（Jan，Feb，..）括在
"，否則它將被視為未定義的variable，並且將引發錯誤。 - column（month）的數據類型應為
string。 更改data.addColumn('number', 'Months');到data.addColumn('string', 'Months');
<html> <head> <style> <%@ include file="demoGraph.css"%> </style> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', { 'packages': ['line'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Months'); data.addColumn('number', 'Enrolled'); data.addColumn('number', 'Inactive'); data.addColumn('number', 'Guest'); data.addRows([ ["Jan", 700, 1200, 800], ["Feb", 1000, 275, 1800], ["Mar", 1250, 220, 1500], ["Apr", 1100, 400, 600], ["May", 1900, 250, 1200], ["Jun", 2000, 360, 1000], ["Jul", 1500, 500, 1000], ["Aug", 1300, 250, 1000], ["Sep", 1700, 500, 1000], ["Oct", 1200, 150, 525], ["Nov", 1000, 250, 625], ["Dec", 1920, 280, 700] ]); var options = { title: 'Demo Graph', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.charts.Line(document.getElementById('linechart_material')); chart.draw(data, options); } </script> </head> <body> <div id="linechart_material" style="width: 900px; height: 500px"></div> </body> </html>
解決方案2
0 2016-07-21 07:22:00
如果需要，包括查詢
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
並更改data.addColumn('number', 'Months'); 到data.addColumn('string', 'Months');
也改變
data.addRows([
[Jan, 700, 1200, 800],
[Feb, 1000, 275, 1800],
[Mar, 1250, 220, 1500],
[Apr, 1100, 400, 600],
[May, 1900, 250, 1200],
[Jun, 2000, 360, 1000],
[Jul, 1500, 500, 1000],
[Aug, 1300, 250, 1000],
[Sep, 1700, 500, 1000],
[Oct, 1200, 150, 525],
[Nov, 1000, 250, 625],
[Dec, 1920, 280, 700]
]);
至
data.addRows([
["Jan", 700, 1200, 800],
["Feb", 1000, 275, 1800],
["Mar", 1250, 220, 1500],
["Apr", 1100, 400, 600],
["May", 1900, 250, 1200],
["Jun", 2000, 360, 1000],
["Jul", 1500, 500, 1000],
["Aug", 1300, 250, 1000],
["Sep", 1700, 500, 1000],
["Oct", 1200, 150, 525],
["Nov", 1000, 250, 625],
["Dec", 1920, 280, 700]
]);
這是HTML
<html>
<head>
<style>
<%@ include file="demoGraph.css"%>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Months');
data.addColumn('number', 'Enrolled');
data.addColumn('number', 'Inactive');
data.addColumn('number', 'Guest');
data.addRows([
["Jan", 700, 1200, 800],
["Feb", 1000, 275, 1800],
["Mar", 1250, 220, 1500],
["Apr", 1100, 400, 600],
["May", 1900, 250, 1200],
["Jun", 2000, 360, 1000],
["Jul", 1500, 500, 1000],
["Aug", 1300, 250, 1000],
["Sep", 1700, 500, 1000],
["Oct", 1200, 150, 525],
["Nov", 1000, 250, 625],
["Dec", 1920, 280, 700]
]);
var options = {
title: 'Demo Graph',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="linechart_material" style="width: 900px; height: 500px"></div>
</body>
</html>
解決方案3
0 2016-07-21 07:22:38
在您的示例中，您沒有定義月份變量。 由於您將第一行定義為數字data.addColumn('number', 'Months'); 它們必須為數字格式。
Google圖表無法顯示
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.