使用参考 json 更改绘图上的绘图值

Question

我正在构建一个简单的股票跟踪器，其中包括成交量图。交易量的范围为 1k +- 100，而价格的范围为 1440 +- 5。因此，如果我直接在同一个图表中添加交易量，它就会缩小。所以我相应地调整了音量。现在，虽然它们在相同的范围内，但我想在将鼠标悬停在其上时看到实际值。

这是绘制体积的代码

        const barTrace = {
    x: {{vol_x | safe}},
    y: {{vol_y | safe}},
    type: 'scatter',
    mode: 'lines',
    name: 'Volume',
    marker: {
      color: 'rgba(255, 0, 0, 0.3)' // Bar color
    }
  };
data.push(barTrace);

这是我当前用于根据参考 ID 更新值的代码。

document.getElementById('graph').on('plotly_hover', function(data){
  data.points.forEach(function(hoverData){
    const traceName = hoverData.data.name; // Assuming curveNumber corresponds to the trace's index
    const value = hoverData.y;
    // Check if the hovered point belongs to the specific line
    if (traceName === 'Volume') {
      const reference = {{ vol_reference | safe }};
      const displayedValue = reference[value];
      console.log(displayedValue)
  }})
});

这会将实际值 displayedValue 记录到控制台。然而，我对如何更换成交量旁边的指标感到困惑。也就是说，1443.2 应该替换为 displayedValue。

附注我正在使用 Flask，所以对于那些不知道 {{value}} 的人来说，它被替换为实际值，即数组或 json 数据

Answer 1

您似乎在调整交易量数据以使其与股票跟踪器上的价格数据处于同一范围内方面做得非常出色。要将鼠标悬停时音量旁边的指示器替换为实际值，您需要根据悬停点的值动态更新该指示器。由于您使用的是 Plotly，因此您可以通过更新体积轨迹的文本属性来实现此目的。您可以通过以下方式修改代码来实现此目的： 此代码片段假设音量跟踪的文本属性尚未设置，并且您希望在悬停时将其替换为实际值。如果您已经为每个点设置了一些文本，您可能需要相应地调整此代码。此外，请确保将“graph”替换为 Plotly 图形容器的正确 ID。