Question

我不知道我是否只是丢失了我的弹珠，但是：我试图让一个非常简单的Google Line Chart渲染，虽然Javascript并没有丢掉任何错误，生成的SVG总是有效空，高度约为21px。

在网站的其他地方，我有一个页面，无论何时点击.region链接，它都会启动一个灯箱，而在该灯箱内实际上是完全相同的Google Line Chart - 唯一的区别是它的数据点根据所点击链接的各种data属性动态绘制。此完美无缺，代码实际上完全相同。

我最初认为我犯了一个简单的错误，但我至少用4种不同的方式记录了这个东西，但没有一个能够奏效。唯一真正的区别在于，这是通过callback函数在页面加载时生成的图形。我也尝试在setTimeout内的点击事件中绘制它，将其抽象为另一个功能......但没有任何效果。

这是我的代码jsFiddle;如果对任何人来说都更容易，可以使用下面的代码段。

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 1

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

JS更改

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

Answer 2

图表实际上并不呈现为空，只是呈现为小。

当div

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

渲染它的大小约为65x17pxs。当SVG元素渲染到65x17 div中时，它不会放大div，因此会在不显示div的div中渲染，导致它变小。

当你移除跨度时（我无法解释这个，因为我也不太理解它）SVG元素能够扩大div。

因此，您可以通过从头开始设置div的大小来处理此问题，例如

style="width:700px; height:250px;"

或在选项

中设置图表的大小

var options = {
        width:700,
        height:250
    }

或作为您的最后一个选项，您当然可以在绘制图表之前删除范围。

document.getElementById('datachart').innerHTML = '';        
chart.draw(chartData, options);

编辑：我不能放弃这个，所以我玩了一下。显然它只是浮动跨度，然后图表将在正确的站点中呈现。绝对/固定定位也可以。

所以第四个解决方案是将style="float:left"添加到您的范围，或者可能是一个可重用的类，如

.preChartText {
    float:left;
}

Google Line Chart呈现为空，但没有错误

2 个答案: