javascript - 如何获得连续的柱形图？

Question

按照 Google 的建议，我使用 ColumnChart 来表示 map 中的海拔。然而，列之间是用空格分隔的，这使得列之间的空白变得难看。列，就像 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:每个组的可用宽度百分比(例如“20%”)，其中“100%”表示组之间没有空间

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

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

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

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

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