javascript - 谷歌折线图呈现为空，但没有错误

Question

我不知道我是否只是失去了理智，但是:我正在尝试渲染一个非常简单的 Google 折线图，尽管 Javascript 不会抛出任何错误，但生成的 SVG 始终有效空，高度约为 21px。

在网站的其他地方，我有一个页面，每当您点击 .region 链接时，它都会启动一个灯箱，并且在该灯箱内实际上是完全相同的 Google 折线图 - 唯一的区别其特点是它的数据点是根据点击链接的各种data属性动态绘制的。 这工作得很好，而且代码几乎是相同的。

我最初认为我犯了一个简单的错误，但我已经用至少 4 种不同的方式重新编码了这个东西，但它们都不起作用。唯一真正的区别是，该图是通过回调函数在页面加载时生成的。我还尝试在 setTimeout 内的点击事件上绘制它，将其完全抽象为另一个函数......但没有任何效果。

这是一个jsFiddle我的代码；如果这对任何人来说都更容易的话，下面是一个片段。

希望我只是累了，错过了一些明显的东西，但这在过去的几个小时里让我感到困惑。

google.load('visualization', '1', {'callback': resultGraph, 'packages':['corechart']});

var chartData;
	
function resultGraph() {
    chartData = google.visualization.arrayToDataTable([
			['Group',				'World'],
			['', 					0],
			['Flash Laggards', 		14.2],
			['Flash Aware', 		24.4],
			['Flash Users', 		36],
			['Flash Innovators',	12.8],
			['', 					0],
		]);
    var options = {
			legend: 'none',
			series: {
				0: { color: '#1976D2' },
			},
			chartArea: {
				left:	'30',
				top:	'30',
				width:	'100%'
			},
			hAxis: {
				gridlines: {
					count: 3
				},
			},
		};
		
		var chart = new google.visualization.LineChart(document.getElementById('datachart'));
		
		chart.draw(chartData, options);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type='text/javascript' src='//www.google.com/jsapi?ver=1.0.1'></script>

Data chart:

<div id="datachart">
    <span>Loading...</span>
</div>

Answer 1

正如我在评论中所说，我不知道为什么会造成这种情况，但我可以提供this simple fix

JS 更改

function resultGraph() {
    $("#datachart").empty();
    ...
}