2

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

带线条的直方图（使用 MS Paint 绘制）

在此示例中，用户将选择数字 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;
  }
`;

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

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

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

4

0 回答 0