在 Typescript-react 中悬停 Chart.js 时跨多个图表的水平线同步

Question

当鼠标悬停在图表内的任何位置时，我目前正在绘制一条贯穿图表的水平线。我希望能够在同一页面上的多个图表之间同步它。我目前正在使用我的选项中的以下代码片段来执行此操作。我希望在一个图表中悬停的任何点创建一条线，在多个图表中也有相同的悬停线。您可以在图像中看到我将悬停在 400 毫秒标记的正上方。

const options= {
    onHover:(context:any) => {
        const yAxis = context.y;
        context.chart.clear();
        const ctx = context.chart.ctx;
        
        ctx.beginPath();
        ctx.moveTo(45, yAxis);
        ctx.lineTo(10000, yAxis);
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'gray';

        ctx.stroke();

    }
}

Answer 1

我解决了这个问题，甚至让它可以只应用于页面上的某些图表，甚至有多个不同的同步图表组。 afterEvent 设置我想要的 X 值，className 设置为告诉我想将此悬停应用到哪个报告组。如果它检测到它 mousedOut，它会将 x 值设置为 0 并因此隐藏它。（请注意，我最终使用的是垂直线而不是水平线，但同样的事情可以通过翻转 x 和 y 值并抓取 e.event.y 来完成）。

const [xVal, setXVal] = useState(0)
const [currentClassName, setCurrentClassName] = useState('')
    
const verticalHover = {
    id:"verticalHover",
    afterEvent: (chart:any, e:any) => {
        if(e.event.type === 'mousemove') {
            setXVal(e.event.x)
            setCurrentClassName(chart.canvas.className)
        }
        else if(e.event.type === 'mouseout') {
            setXVal(0)
            setCurrentClassName(chart.canvas.className)
        }
    },
    afterDraw: (chartInstance: any) => {
        if(xVal !==0 && chartInstance.canvas.className ===currentClassName){
            const ctx = chartInstance.ctx;
                ctx.strokeStyle = "#6f6f6f";
                ctx.lineWidth = 2;
                ctx.beginPath();
                //Hardcoded yValues for now
                ctx.moveTo(xVal, 40);
                ctx.lineTo(xVal,265);
                ctx.stroke();
        }
    }
}

Chart.register(verticalHover);

在 Typescript-react 中悬停 Chart.js 时跨多个图表的水平线同步

Horizontal line syncing across multiple charts when hovering with Chart.js in Typescript-react

chart.js

react-typescript