Google 图表 plotBands

Question

我试图在 google 图表中实现 highcharts 称为“plotbands”的相同功能。基本上，我有一个 number/date 图表，我希望在某些时间间隔内使用不同的背景颜色。 google-图表可能吗？

我想要达到的目标：

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

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

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

Answer 1

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

我之前的问题是我传入了对象 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]
];

Google 图表 plotBands

Google charts plotBands

javascript

charts

google-visualization