我尝试使用Google Charts
和HTML
在JavaScript
中动态显示某些Google Chart API
,但它似乎根本没有加载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>
事件也不会在浏览器中提醒我。
以下是我正在使用的代码......
bluetooth
我做错了什么?
答案 0 :(得分:1)
vAxis
chart1_options
键后面缺少逗号
另外,您可以在代码中的任何位置引用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']
});