如何在自定义插件中实现共享十字准线 - Grafana答案

【问题标题】：How to implement shared crosshair in a custom plugin - Grafana如何在自定义插件中实现共享十字准线 - Grafana
【发布时间】：2021-10-19 08:33:02
【问题描述】：

我正在尝试使用 shared crosshair 功能在我的面板插件中实现 自定义工具提示，但我需要显式获取光标时间位置（作为值)，我在官方文档中找不到任何信息。

【问题讨论】：

标签： reactjs typescript grafana

【解决方案1】：

好的，经过数小时的搜索，我找到了解决方案，所以我将其写在这里以供进一步使用。

componentDidMount(){
   this.props.eventBus.getStream(DataHoverEvent).subscribe((data)=>{
      //Now you can access the current row index (data.payload.rowIndex)
      console.log(data.payload.rowIndex);
   });
}

完整的 React 组件是


import React, { PureComponent } from 'react';
import { PanelProps, DataHoverEvent } from '@grafana/data';

export class CustomPanel extends PureComponent<PanelProps>{

  constructor(props){
    super(props);
  }

  componentDidMount(){
    this.props.eventBus.getStream(DataHoverEvent).subscribe((data)=>{
      //Now you can access the current row index (data.payload.rowIndex)
      console.log(data.payload.rowIndex);
    });
  }
  
  render(){
    return (
      <div></div>
    );
  }
}

我希望这对某人有用！

【讨论】：