0

我的问题是到目前为止我还没有找到任何可以在我的图表上同步显示十字准线的解决方案。虽然，我在这里找到了解决我的问题的方法：

https://www.syncfusion.com/forums/164787/synchronise-crosshair-trackball-in-multiple-charts

但它使用像素化显示十字准线。我需要一个解决方案，我可以同时通过 X 坐标绘制十字准线（其中 X 是日期）

public syncronisedCrosshair(args: IMouseEventArgs, id: string): void {
  if(id == "charts"){
    this.mousemoveEvent( document.getElementById("charts1"), args.x, window.screenTop+0, args.x, window.screenTop+90-window.scrollY);
    this.mousemoveEvent( document.getElementById("charts2"), args.x, window.screenTop+0, args.x, window.screenTop+610-window.scrollY);
    this.mousemoveEvent( document.getElementById("charts3"), args.x, window.screenTop+0, args.x, window.screenTop+920-window.scrollY);
    this.mousemoveEvent( document.getElementById("charts4"), args.x, window.screenTop+0, args.x, window.screenTop+1230-window.scrollY);
    this.mousemoveEvent( document.getElementById("charts5"), args.x, window.screenTop+0, args.x, window.screenTop+1540-window.scrollY);
  }

}

private mousemoveEvent(element, sx, sy, cx, cy) {
  let mousemove = document.createEvent("MouseEvent");
  mousemove.initMouseEvent( "mousemove", true, false, window, 1, sx, sy, cx, cy, false, false, false, false, 0, null);
  element.dispatchEvent(mousemove);
}
4

1 回答 1

0

我们要求您为包含多个图表的 HTML 元素绑定 mousemove 事件。我们已根据您的要求准备样品。请检查以下代码段和示例。

<div (mousemove)="onMouseMove($event)">
    <ejs-chart id='chartcontainer1'></ejs-chart>
    <ejs-chart id='chartcontainer2' ></ejs-chart>
</div>  
public onMouseMove(args){
    if (args.target.id.indexOf('ChartAreaBorder') > -1) {
       var chart1 = document.getElementById('chartcontainer1');
        this.container1Bounds = chart1.getBoundingClientRect();
        this.mousemoveEvent(
            chart1,
            args.x,
            this.container1Bounds.y + (this.container1Bounds.height/2),
            args.x,
            this.container1Bounds.y + (this.container1Bounds.height/2)
          );
        var chart2 = document.getElementById('chartcontainer2');
          this.container2Bounds = chart2.getBoundingClientRect();
          this.mousemoveEvent(
            chart2,
            args.x,
            this.container2Bounds.y + (this.container2Bounds.height/2),
            args.x,
            this.container2Bounds.y + (this.container2Bounds.height/2)
          );
    }
};

示例：https ://stackblitz.com/edit/angular-a5jyyk

于 2021-10-22T15:52:24.660 回答