如何获得连续的ColumnChart？ [英] How to get a continuous ColumnChart?

问题描述

按照Google的建议，我使用 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％'} 
} 
 //构建数据
 var data = new google.visualization.DataTable（）; 
 data.addColumn（'string'，'Sample'）; 
 data.addColumn（'number'，'Elevation（m）：'）; （var i = 0; i< trackmarks.length; i ++）{
 data.addRow（[''，trackaltis [i]]）; 
 
} 
 
 //使用其DIV内的数据绘制图表。 
 chart = new google.visualization.ColumnChart（document.getElementById（'elevation_chart'））; 
 chart.draw（data，option）; 
  

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

谢谢！

解决方案

您可以指定选项：

  bar：{groupWidth：100％} 
  

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

更新：该示例使用旧版本的柱状图，它加载了包 columnchart

  google.load（visualization，1，{packages：[columnchart]}）; 
  

柱状图的最新代码使用 corechart ：

  google.load（'visualization'，'1'，{packages：['corechart']}）; 
  

更改和示例应该按预期方式工作，不含空格。

I'm using a ColumnChart to represent the elevation in a map, as suggested by Google. However, the columns are separated by spaces, and that renders ugly white spaces between the columns, like in Google's own example:

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

Is there a way to tell the column chart to make columns that fill up the whole space? I would like something like this:

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

I suspect that the only way is with lots of points.

My code:

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

My code is pretty standard: same as Google's, same result.

Thanks!

解决方案

You can specify option:

bar: {groupWidth: "100%"}

bar.groupWidth: Percentage of the available width for each group (e.g. '20%'), where '100%' means that groups have no space between them

Update: That example uses old version of column charts which loads package columnchart

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

The latest code for column chart is loaded using corechart:

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

Change that and example should work as expected without spaces.

这篇关于如何获得连续的ColumnChart？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！