Javascript 谷歌绘图带

我正试图在谷歌图表中实现highcharts称之为“”的相同功能。基本上，我有一个数字/日期图表，我希望在某些时间间隔内使用不同的背景色。谷歌图表可以做到这一点吗

我正在努力实现的目标：

我正在尝试两种不同的方法

1-在组合图中使用面积图： 这里的问题是我不能画直线。我想这是因为点之间的距离，我在这里无能为力。

2-在组合图中使用柱形图（我认为解决方案应该围绕此选项） 这里的问题是，我不能使酒吧100%的宽度，他们之间总是有一个很大的差距。

---

我只是通过面积图实现了解决方案（我希望这对其他人有所帮助）

我以前遇到的问题是，我传入了对象0和100，而图形当然是在创建一个转换

export const mock = [
  ['Data', 'Avg Rating', 's'],
  [new Date('2020-07-07T16:48:44.000Z'), 50, 0],
  [new Date('2020-07-07T22:47:58.000Z'), 50, 0],
  [new Date('2020-07-08T22:35:44.000Z'), 50, 100],
  [new Date('2020-07-09T21:50:42.000Z'), 50, 100],
  [new Date('2020-07-10T21:50:47.000Z'), 50, 0],
  [new Date('2020-07-11T21:50:36.000Z'), 50, 0]
];

我刚刚将0更改为null，问题就解决了

export const mock = [
  ['Data', 'Avg Rating', 's'],
  [new Date('2020-07-07T16:48:44.000Z'), 50, null],
  [new Date('2020-07-07T22:47:58.000Z'), 50, null],
  [new Date('2020-07-08T22:35:44.000Z'), 50, 100],
  [new Date('2020-07-09T21:50:42.000Z'), 50, 100],
  [new Date('2020-07-10T21:50:47.000Z'), 50, null],
  [new Date('2020-07-11T21:50:36.000Z'), 50, null]
];