谷歌条形图如何设置条形的宽度？

Question

我正在使用Google的javascript可视化库生成一个BarChart。我想让图表中的条形更宽，但是我在文档中找不到任何有关如何配置每个数据集的条形宽度的信息。

有任何帮助吗？

- Kenny Wyland

Answer 1

我曾有过同样的问题，为了记录下来，我想发表一下。似乎bar.groupWidth是设置此项的方法。

https://developers.google.com/chart/interactive/docs/gallery/barchart

例如：

 var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
 var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
 chart.draw(view, options);

- Josh Rumbut

---

bar: {groupWidth: "95%"} 例如： - twobob

不错的发现，但是在将条形图设置得更小之后，如何将它们之间的间距缩小呢？ - nclsvh

@nclsvh 对不起，我不知道有任何 API 方法可以做到那个。 - Josh Rumbut

这个bar.groupWidth值是被视为最小值、最大值还是固定值？我的图表每天有一个柱形图。因此，在第一天，柱形图填满了整个图表的宽度。随着时间的推移，更多的柱形图进来了，它们会缩小以适应，并开始看起来像柱形图。我使用bar.groupWidth将其设置为50像素，现在看起来很好，但是一旦有更多的柱形图超过了每个50像素宽的图表，这些柱形图是否仍然会自动缩小宽度？我希望有一个bar.maxWidth选项。 - l008com

@l008com 看起来有一些逻辑防止条形图变得比分配给它们的空间更大，无论你将宽度设置为多少。请检查这个fiddle：https://jsfiddle.net/8zp1fasb/ - Josh Rumbut

Answer 2

尝试使用以下格式，这样图表的外观会比较好看，虽然它不是固定的，但这解决了我们的问题。

options: {
  titlePosition: "none",
  bar: { groupWidth: "50%" }
  // ...
}

data.push([" ", "t1","t2","t3","t4"]); // headings
data.push([" ", 0, 0, 0, 0]); // dummy bar so graph will display good
// push you actual data here
data.push([" ", 0, 0, 0, 0]); // dummy bar so graph will display good

- Manohar Reddy Poreddy