如何在 React Google Charts 中的直方图上放置一条线

如何解决如何在 React Google Charts 中的直方图上放置一条线

我正在使用 React Google Charts 插件，并且一直在尝试实现这个插件。问题如下。我想根据用户选择的数字在直方图上画一条线，该数字存储在状态中。展示我想要实现的目标的最佳方式是通过图像。

在此示例中，用户会选择数字 40。因此在数字 40 上绘制一条垂直线 (x=40)。

这是直方图的 React 代码。

<Graph>
  <GraphHeader>
    <h3>Gráfico de probabilidade</h3>
  </GraphHeader>
  <Chart
    chartType="Histogram"
    width="100%"
    height="200px"
    loader={<LoadingContainer />}
    data={chartProbData}
    options={{
      legend: 'none',vAxis: { title: 'Frames' },hAxis: { title: 'Probabilidade' },histogram: { hideBucketItems: true,maxnumBuckets: 10 },backgroundColor: darken(0.03,'#312e38'),}}
  />
</Graph>

这是每个组件的样式：

export const Graph = styled.div`
  text {
    fill: #999 !important;
  }
  width: 100%;
`;

export const GraphHeader = styled.div`
  margin-bottom: 10px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  h3 {
    font-size: 20px;
  }
`;

我准备使用 hacks 来实现这一点，尽管我更喜欢更简洁的答案。如果有人知道通过 css 定位、谷歌图表 api 甚至一些纯 javascript 解决方案来实现这一点的聪明方法，我将非常感激。

PS：如果需要任何额外信息，我很乐意提供。

PPS：根据@m4n0 的要求，我创建了一个代码沙盒，以便任何人都可以访问代码本身。这是链接：https://codesandbox.io/s/react-charts-vertical-line-over-graph-lpw52?file=/src/index.js