在 HTML 页顶部形成奇数 Space

Question

我正在使用 Google 图表 API->http://plnkr.co/edit/GTg6MfMephB8lR3Kp66S?p=preview

创建柱形图

但由于某种原因，页面顶部形成了一个奇怪的 space。

这在我更改 Material 图表库后开始发生：

google.load("visualization", "1.1", {packages:["bar"]});
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

var data = new google.visualization.DataTable();

并改用经典图表（我需要它，因为 Material 库不完整并且它不允许自定义工具提示）：

google.load('visualization', '1', {packages: ['corechart', 'bar']});
var chart = new google.visualization.BarChart(document.getElementById('columnchart_material'));

var data = google.visualization.arrayToDataTable([]);

这是原来的Material图表 -> http://plnkr.co/edit/dMVKt3ISlMtyiYmVeN1K?p=preview

怎么了？

Answer 1

有点hack，但下面会"sort it"...

#columnchart_material{margin-top:-500px}

一开始还不太明白为什么会这样？

Answer 2

添加图表区的设置，例如：

chartArea: { width: '100%', height: '99%' },

或：

chartArea: { left: 0, top: 30, width: 1200, height: 5450 },

在 HTML 页顶部形成奇数 Space

Odd Space forming on top of HTML page

html

javascript

google-visualization