highcharts 在mousemove上更新股票highchart中所有行的当前值

chhkpiq4  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(161)

当鼠标移动时,我想更新两行的datagridcurrent value字段。不幸的是,当鼠标悬停在特定行上时,它正在更新信号行,如图所示:

演示https://stackblitz.com/edit/react-ts-7d79lt?file=stockchart%2Fstockchart.js

我知道这是因为我将mouseOver回调附加到plotOptionspoint属性

plotOptions: {
        series: {
          // compare: 'percent',
          showInNavigator: true,
          dataGrouping: {
            enabled: false,
          },
          point: {
            events: {
              mouseOver: (e) => {
                const temp = [...stockGrid];
                const stock = temp.find((x) => x.name === e.target.series.name);
                if (stock) {
                  stock.currentValue = e.target.options.y;
                  setStockGrid(temp);
                }
              },
            },
          },
        },
      },

我也尝试将mouseOver附加到series,但我不知道如何使用它提取正确的值。
我想更新两行的当前值同时当鼠标移动到图表中的任何地方。

**2)**如果您查看工具提示,我想从所有工具提示中删除外部矩形。我尝试将tooltip.borderWidth设置为0,这会删除外部矩形,但同时也会删除工具提示到垂直线的连接线。我需要在垂直线(从线点到工具提示)和工具提示之间添加一条线。

hrysbysz

hrysbysz1#

**1)**您可以迭代所有图表系列,并检查是否有任何点与悬停的点具有相同的x值。

plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function() {
            let hoveredPoint = this,
              text = '';

            hoveredPoint.series.chart.series.forEach(series => {
              if (hoveredPoint.series.name != series.name) {
                series.points.forEach(point => {
                  if (hoveredPoint.x === point.x) {
                    text += point.series.name + ': ' + point.y + ', ' + hoveredPoint.series.name + ': ' + hoveredPoint.y;

                    console.log(text)
                  }
                })
              }
            })
          },
        }
      }
    },
  },

简化的演示:https://jsfiddle.net/BlackLabel/75Lkw4qj/
**2)**您是否考虑过删除内边框?
演示:https://stackblitz.com/edit/react-ts-6asjx2?file=stockchart%2Fstockchart.js

相关问题