我正在尝试使用 JavaScript 和 Google Chart API 在 HTML 中动态显示一些 Google Charts但它似乎根本没有加载。
该页面仅显示我的文本字段，没有其他任何内容，甚至文本字段 onblur 事件也不会在浏览器中提醒我。
下面是我正在使用的代码...
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
function test() {
alert("TEST OUTPUT");
}
var chart_data = google.visualization.arrayToDataTable([
['Days', 'Sales', 'Cheeky', 'test'],
['19/07/2016', 10, 5, 3],
['20/07/2016', 5, 4, 2],
['21/07/2016', 15, 3, 1],
['22/07/2016', 2, 1, 2]
]);
var startdate = "20/07/2016";
var enddate = "21/07/2016";
google.charts.load('current', {'packages':['corechart']});
google.setOnLoadCallback(load_page_data);
function load_page_data(){
$.ajax({
url: 'get_data.php',
data: {'startdate':startdate,'enddate':enddate},
async: false,
success: function(data){
if(data){
chart_data = $.parseJSON(data);
drawChart(chart_data, "My Chart", "Data");
}
},
});
}
function drawChart(chart_data, chart1_main_title, chart1_vaxis_title) {
var chart1_data = new google.visualization.DataTable(chart_data);
var chart1_options = {
title: chart1_main_title,
vAxis: {title: chart1_vaxis_title, titleTextStyle: {color: 'red'}, minValue: 0, gridlines: { color: '#AC935D'} }
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
backgroundColor:{fill: 'transparent'},
colors: ['#87734A', 'red', 'black'],
};
var chart1_chart = new google.visualization.AreaChart(document.getElementById('chart1_div'));
chart1_chart.draw(chart1_data, chart1_options);
}
</script>
</head>
<body bgcolor="#E2C17A">
<p>Date1: <input type="text" onchange="test()"></p><br/>
<div id="chart1_div" style="width: 900px; height: 500px;"></div><br/>
</body>
</html>
我做错了什么？
最佳答案
chart1_options 中的 vAxis 键后缺少一个逗号
此外，您还可以在代码中的任何位置引用 google.visualization，
但仅在 load 回调触发后
尝试设置您的代码，
分解这些长key: value 对将有助于识别拼写错误
google.charts.load('current', {
callback: function () {
$.ajax({
url: 'get_data.php',
data: {
'startdate': startdate,
'enddate': enddate
},
async: false,
success: function(data) {
if (data){
drawChart($.parseJSON(data), "My Chart", "Data");
}
}
});
function drawChart(chart_data, chart1_main_title, chart1_vaxis_title) {
var chart1_data = new google.visualization.DataTable(chart_data);
var chart1_options = {
title: chart1_main_title,
vAxis: {
title: chart1_vaxis_title,
titleTextStyle: {color: 'red'},
minValue: 0,
gridlines: {
color: '#AC935D'
}
},
hAxis: {
title: 'Year',
titleTextStyle: {
color: '#333'
}
},
backgroundColor: {
fill: 'transparent'
},
colors: ['#87734A', 'red', 'black']
};
var chart1_chart = new google.visualization.AreaChart(document.getElementById('chart1_div'));
chart1_chart.draw(chart1_data, chart1_options);
}
},
packages:['corechart']
});
关于javascript - 为什么我的 Google 图表不显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38582038/