Google visualization 谷歌图表错误“；无法读取属性'；广告'；“未定义”的定义；
我正在使用谷歌图表，一切进展顺利。然后两个图表都崩溃了，给我一个错误“无法读取未定义的属性'ad'。我不知道是什么改变导致了这个错误。我的剧本放错地方了吗 这是html页面的截图 图形不会渲染，即使加载也不会。页面最初没有数据，将呈现一个空白图形，然后在用户提交表单后，图形填充 现在，图形在用户提交时无法呈现或填充 代码如下Google visualization 谷歌图表错误“；无法读取属性'；广告'；“未定义”的定义；,google-visualization,Google Visualization,我正在使用谷歌图表，一切进展顺利。然后两个图表都崩溃了，给我一个错误“无法读取未定义的属性'ad'。我不知道是什么改变导致了这个错误。我的剧本放错地方了吗 这是html页面的截图 图形不会渲染，即使加载也不会。页面最初没有数据，将呈现一个空白图形，然后在用户提交表单后，图形填充 现在，图形在用户提交时无法呈现或填充 代码如下 {% extends "base.html" %} <head> {%- block head %} <!-- Global site
{% extends "base.html" %}
<head>
{%- block head %}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-166860859-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-166860859-1');
</script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
{%- block metas %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%- endblock metas %}
{%- block styles %}
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
{%- endblock styles %}
{%- endblock head %}
</head>
{% block app_content %}
<style>
body {
background-color: #B0C4DE;
color: #696969;
font-family: "Open Sans",apple-system,blinkmacsystemfont,"Segoe UI","Helvetica Neue",arial,sans-serif;
font-size: 17px;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: Merriweather,serif;
}
.row {
background-color: #F8F8FF;
margin: 10px;
padding: 15px;
box-shadow: 4px 4px 4px lightgrey;
}
.classroom:hover {
box-shadow: 8px 8px 8px lightgrey;
}
.big-container {
background-color: #B0C4DE;
color: black;
}
td {
border: 1px solid darkgrey;
margin: 10px;
padding: 10px;
}
.nav.navbar-nav.navbar-right li a {
color: white;
}
.green {
color: green;
}
.red {
color: red;
}
.intro {
text-align: center;
vertical-align: middle;
}
#from_data {
background-color: white;
padding: 10px;
border: 5px solid #005eaa;
}
</style>
<!-- this is a hidden tag to protect against cross-side request forgery-->
<div class="container">
<form action="/data" method="post">
<br>
<br>
<br>
<div class="content big-container border border-secondary" id="row q_container" >
<div class="test">
</div>
<div class="row border border-secondary">
<div class="intro">
<h1>Enter a "From" and "To" location to display Covid-19 infection data</h1>
<hr>
</div>
<div class="col-md-6 location">
<h1>Travel From</h1>
<input type="text" class="form-control" name="from-search-term" id="from-search-term" size="50">
</div>
<div class="col-md-6 location">
<h1>Travel To</h1>
<input type="text" class="form-control" name="to-search-term" id="to-search-term" size="50">
<br>
</div>
<div>
<input type="submit" value="Search" onclick="testFunction()" style="height:50px;width:100%; font-size:25px; color:white; background-color:#005eaa">
</div>
</div>
<div class="row border border-secondary">
<div class="col-md-6 location">
<div class="showlater">
<h2>Location: {{ start }}</h2>
<br>
<script type="text/javascript">
// Load the Visualization API and the ColumnChart 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 = new google.visualization.DataTable();
data.addColumn('string', 'Day');
data.addColumn('number', 'New confirmed infections');
data.addRows([
// Instead of plugging in the values manually, or reading them
// from a Data Source like Google Spreadsheets, feed them in
// using Jinja, the templating system Flask uses.
// Each iteration evaluates to something like this:
// ['Saturday', 28],
{% for item in google_from %}
['{{ item[0] }}', {{ item[1] }}],
{% endfor %}
]);
console.log("this is what is in google_from");
console.log({{ google_from }});
// Instantiate and draw our chart, passing in some options. All the
// options go into a single {}; some options' values go into a nested
// {}. Some values, such as colors, must be given as strings. The
// Google Charts API is well-documented.
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div1'));
var options = {
title: "30 Day New Infection Totals",
titleTextStyle: {fontName: 'Merriweather,serif', fontSize:20},
legend: 'none',
vAxis: {title: "Confirmed Infections", scaleType: 'log', ticks:[1, 10, 100, 1000, 10000],
baseline: 0,
viewWindow: {min: 0, max: 10000}},
colors: ['#005eaa'],
chartArea:{ width:'75%', height:'75%'},
};
chart.draw(data, options,
{legend: 'none', vAxis: {scaleType: 'log', ticks:[1, 10, 100, 1000, 10000], baseline: 0, viewWindow: {min: 0, max: 10000}}, colors: ['#005eaa'], chartArea:{ width:'75%', height:'75%'} });
}
</script>
<br>
<div id="content">
<div id="chart_div1" style=height:300px></div>
</div>
<div id="from_data" >
<p>There have been <strong>{{ weekly_from }}</strong> new confimed Covid-19 cases in [LOCATION HERE] over the last seven days</p>
{% if direction_from == ' decrease' %}
<p>This is a <strong>{{ change_from }}% <span class="green">{{ direction_from }}</span></strong> from the week before </p> <br>
{% else %}
<p>This is a <strong>{{ change_from }}% <span class="red">{{ direction_from }}</span></strong> from the week before </p> <br>
{% endif %}
<p>Daily new infections per 1,000 [LOCATION] residents (seven day average): [STATISTIC] </p>
</div>
</div>
</div>
<div class="col-md-6 location">
<div id="to_data">
<div class="showlater">
<h2>Location: {{ end }}</h2>
<br>
<div id="content">
<div id="chart_div2" style=height:300px></div>
</div>
<br>
<p>There have been <strong>{{ weekly_to }}</strong> new confimed Covid-19 cases in [LOCATION HERE] over the last seven days</p>
{% if direction_to == ' decrease' %}
<p>This is a <strong>{{ change_to }}% <span class="green">{{ direction_to }}</span></strong> from the week before </p> <br>
{% else %}
<p>This is a <strong>{{ change_to }}% <span class="red">{{ direction_to }}</span></strong> from the week before </p> <br>
{% endif %}
<p>Daily new infections per 1,000 [LOCATION] residents (seven day average): [STATISTIC] </p>
</div>
</div>
<br><br><br><br>
</div>
{%extends“base.html”%}
{%-块头%}
window.dataLayer=window.dataLayer | |[]；
函数gtag（）{dataLayer.push（参数）；}
gtag（'js'，新日期（））；
gtag（“配置”、“UA-166860859-1”）；
{%-block metas%}
{%-endblock metas%}
{%-块样式%}
{%-结束块样式%}
{%-endblock head%}
{%block app_content%}
身体{
背景色：#B0C4DE；
颜色：#6969；
字体系列：“开放式SAN”、苹果系统、blinkmacsystemfont、“Segoe UI”、“Helvetica Neue”、arial、无衬线字体；
字号：17px；
}
.h1、.h2、.h3、.h4、.h5、.h6、h1、h2、h3、h4、h5、h6{
字体系列：Merriweather，衬线；
}
.行{
背景色：#F8F8FF；
利润率：10px；
填充：15px；
盒影：4px4px4px浅灰色；
}
.教室：悬停{
盒影：8px 8px 8px浅灰色；
}
.大货柜{
背景色：#B0C4DE；
颜色：黑色；
}
运输署{
边框：1px实心暗灰色；
利润率：10px；
填充：10px；
}
.nav.navbar-nav.navbar-right li a{
颜色：白色；
}
格林先生{
颜色：绿色；
}
瑞德先生{
颜色：红色；
}
.介绍{
文本对齐：居中；
垂直对齐：中间对齐；
}
#从数据{
背景色：白色；
填充：10px；
边框：5px实心#005eaa；
}
输入“从”和“到”位置以显示新冠病毒-19感染数据
从
前往
位置：{{start}}
//加载可视化API和ColumnChart包。
load（'visualization'，'1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
//创建并填充数据表的回调，
//实例化饼图，传入数据并
//画它。
函数绘图图（）{
//创建我们的数据表。
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Day'）；
data.addColumn（'编号'，'新确认感染'）；
data.addRows([
//而不是手动插入值或读取它们
//从像谷歌电子表格这样的数据源，输入它们
//使用Jinja，模板系统使用。
//每次迭代的计算结果如下：
//[‘星期六’，28]，
{google_中项目的%from%}
['{item[0]}}'，{{item[1]}}],，
{%endfor%}
]);
log（“这是google_中的内容”）；
log（{{google_from}}）；
//实例化并绘制图表，传入一些选项
//选项进入单个{}；某些选项的值进入嵌套
//{}。某些值（如颜色）必须作为字符串提供
//GoogleCharts API有很好的文档记录。
var chart=新的google.visualization.ColumnChart(
document.getElementById（'chart_div1'）；
变量选项={
标题：“30天新感染总数”，
titleTextStyle:{fontName:'Merriweather，serif'，fontSize:20}，
图例：“无”，
vAxis:{title:“确诊感染”，scaleType:'log'，ticks:[1,10100100010000]，
基线：0，
视图窗口：{min:0，max:10000}，
颜色：['#005eaa']，
图表区：{宽度：'75%，高度：'75%}，
};
恰恰