Перемещение вертикальной линии на графике. график. js - PullRequest
0 голосов
/ 16 апреля 2020

Я использую график. js и имею три разных линейных графика и рисую вертикальную линию на каждом графике с помощью плагина. Я хочу, чтобы эта линия перемещалась одинаково на всех графиках одновременно, всякий раз, когда я перемещаю линию на любом из этих графиков. Возможно ли это?

Плагин:

plugins: [
            {
                beforeInit() {},
                beforeEvent: (chart, e) => {
                    if (
                        e.type === 'mousemove' &&
                        e.x >= e.chart.chartArea.left &&
                        e.x <= e.chart.chartArea.right
                    ) {
                        chart.options.customLine.color = '#42e18d';
                        chart.options.customLine.x = e.x;
                    } else {
                        this.chartsService.nextCoordinates(this.truckLocation);
                        chart.options.customLine.color = 'transparent';
                    }
                },
                afterEvent: (chart, e) => {
                    if (chart.tooltip._active[0]) {
                        const type = chart.data.datasets[0].label;
                        const i = chart.tooltip._active[0]._index - 1;
                        this.setCoordinate(type, i);
                    }
                },
                afterDraw: (chart, easing) => {
                    // console.log(chart);
                    const ctx = chart.chart.ctx;
                    const chartArea = chart.chartArea;
                    const x = chart.options.customLine.x;

                    if (!isNaN(x)) {
                        ctx.save();
                        ctx.beginPath();
                        ctx.strokeStyle = chart.options.customLine.color;
                        ctx.moveTo(
                            chart.options.customLine.x,
                            chartArea.bottom
                        );
                        ctx.lineTo(chart.options.customLine.x, chartArea.top);
                        ctx.stroke();
                        ctx.restore();
                    }
                }
            }
...