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

Question

我正在尝试在我的面板插件中使用 共享十字准线 函数实现一个 自定义工具提示 ，但我需要明确采用光标时间位置（作为一个值），我在官方文档中找不到任何信息。

Answer 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>
    );
  }
}

我希望这对某人有用！

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

How to implement shared crosshair in a custom plugin - Grafana

typescript

reactjs

grafana