Javascript 如何获得连续柱形图？

我正在使用一个

柱形图

来表示地图中的海拔高度，正如谷歌所建议的那样。 但是，列之间用空格分隔，这会在列之间呈现难看的空白 列，如谷歌自己的示例：

有没有一种方法可以告诉柱状图生成填充整个空间的列？我想要这样的东西：

我想唯一的办法就是多点

我的代码：

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

var选项={
图例：“无”，
背景色：“透明”，
颜色：[“#C9CFF5”]，
标题颜色：“#C9CFF5”，
焦点边框颜色：“#00AA00”，
标题：“标高（m）”，
条：{groupWidth:'100%'}
}
//构建数据
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Sample'）；
数据.添加列（'编号'，'标高（m）：'）；
对于（变量i=0；i

我的代码相当标准：和谷歌的一样，结果也一样

---

谢谢

您可以指定选项：

bar: {groupWidth: "100%"}

bar.groupWidth：每个组可用宽度的百分比（例如“20%”），其中“100%”表示组之间没有空间

更新：该示例使用哪个加载包

columnhart

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

使用

corechart

加载柱状图的最新代码：

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

---

改变这一点，没有空格的示例应该可以正常工作。

是的，我已经有了。没有效果，完全忽略。不知道为什么。。。添加了我的代码以供参考。奇怪的是，我以前并没有在您的示例中尝试过。它似乎取决于浏览器窗口的宽度。有时我会得到没有空格的图表，如果我改变宽度（增加/减少），我会得到空格。我认为这取决于列的密度，而不是真正的窗口宽度。尝试一个列数很少的图表，以避免“过多”。好吧，对渲染问题感到厌倦了，我放弃了，选择了

LineChart

和

corechart

。看起来更好，并允许更微调的结果。谢谢你，安托！