Question

我正在使用ColumnChart来表示地图中的高程，正如Google所建议的那样。但是，列由空格分隔，并且在列之间呈现丑陋的白色空格列，就像谷歌自己的例子一样：

https://developers.google.com/maps/documentation/javascript/examples/elevation-paths

有没有办法告诉柱形图制作填满整个空间的列？我想要这样的东西：

http://4.bp.blogspot.com/-4I8oi3WqY5o/UIZnzbXql_I/AAAAAAAAAcE/GO4wl6I2-lM/s1600/Charts.png

我怀疑唯一的方法是获得很多分数。

我的代码：

var option = {
  legend: 'none',
  backgroundColor: 'transparent',
  colors: ["#C9CFF5"],
  titleColor: '#C9CFF5',
  focusBorderColor: '#00AA00',
  titleY: 'Elevation (m)',
  bar: { groupWidth: '100%' }
}
// Build data
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation (m):');
for (var i = 0; i < trackmarks.length; i++) {
  data.addRow(['', trackaltis[i]]);
}

// Draw the chart using the data within its DIV.
chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart'));
chart.draw(data, option);

我的代码非常标准：与Google相同，结果相同。

谢谢！

Answer 1

您可以指定选项：

bar: {groupWidth: "100%"}

bar.groupWidth：每个组的可用宽度百分比（例如＆＃39; 20％＆＃39;），其中＆＃39; 100％＆＃39;表示组之间没有空格

更新：该示例使用old version of column charts加载包columnchart

google.load("visualization", "1", {packages:["columnchart"]});

使用corechart加载柱形图的最新代码：

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

更改该示例应该按预期工作，不能有空格。

如何获得连续的ColumnChart？

1 个答案: