我尝试使用chartjs-plugin-crosshair，但它对我不起作用。
我有以下软件包：

• 第一个月
• "chartjs-plugin-crosshair": "^1.2.0"

看起来库的导入没有正确完成，因此它没有采用chartjs-plugin-crosshair的设置。

代码

成角

import { Component } from '@angular/core';
import ChartStreaming from 'chartjs-plugin-streaming';
import zoomPlugin from 'chartjs-plugin-zoom';
import annotationPlugin from 'chartjs-plugin-annotation';
import 'chartjs-adapter-moment';
import 'hammerjs';
import Chart from 'chart.js/auto';

import * as CrosshairPlugin from 'chartjs-plugin-crosshair';
Chart.register(CrosshairPlugin);
Chart.register(ChartStreaming, zoomPlugin, annotationPlugin);

const ctx = (<HTMLCanvasElement>document.getElementById('MyChart')).getContext('2d');
    this.chart = new Chart(ctx!, {
      type: 'line',
      data: {
        labels: this.labels,
        datasets: [
          {
            label: 'Series 1',
            data: this.Serie1,
            backgroundColor: [
              colors.color1,
            ],
            borderColor: [
              colors.color1,
            ],
            borderWidth: 1,
            xAxisID: 'y_axis_1',
            pointRadius: 0,
          },
          {
            label: 'Series 2',
            data: this.Serie2,
            backgroundColor: [
              colors.color2,
            ],
            borderColor: [
              colors.color2,
            ],
            borderWidth: 1,
            xAxisID: 'y_axis_2',
            pointRadius: 0,
          },
        ],
      },
      options: {
        maintainAspectRatio: false,
        indexAxis: 'y',
        scales: {
          yAxes: {
            ticks: {
            },
            reverse: true,
            type: 'realtime',
            //Cada 30 segundos
            time: {
              //1/2 minuto
              unit: 'minute',
              displayFormats: {
                minute: 'HH:mm:ss',
              },
            },
            realtime: {
              frameRate: 60,
              duration: 30000,
              refresh: 2000,
              delay: 4000,
              //ttl: 8640000000000,
              ttl: 86400000,
              onRefresh: chart => {
                let chartTime: any = new Date();
                let url = 'http://localhost:3000/';
                fetch(url)
                  .then(response => response.json())
                  .then(Data => {
                    this.chart.data.labels.push(chartTime);
                    this.chart.data.datasets[0].data.push(Data.data1);
                    this.chart.data.datasets[1].data.push(Data.data2);
                    this.chart.data.datasets[2].data.push(Data.data3);
                    chart.update('quiet');
                  })
                  .catch(error => console.log(error));
              },
            },
          },
          y_axis_1: {
            grid: {
              lineWidth: 1,
              tickWidth: 1,
            },
            position: 'top',
            min: 0,
            max: 4000,
            ticks: {
              color: colors.color1,
            },
            title: {
              display: true,
              text: 'Y Axis 1',
              color: colors.color1,
            },

          },
          y_axis_2: {
            grid: {
              lineWidth: 1,
            },
            position: 'top',
            min: 0,
            max: 300,
            ticks: {
              color: colors.color2,
            },
            title: {
              display: true,
              text: 'Y Axis 2',
              color: colors.color2,
            }
          },
        },
        plugins: {

          // crosshair: {
          //   line: {
          //     color: "#d1d1d1",
          //     width: 1,
          //   },
          // },
          annotation: {
            annotations: {
              line1: {
                type: 'line',
                scaleID: 'y_axis_1',
                value: 3500,
                borderColor: colors.black,
                borderWidth: 2,
                label: {
                  backgroundColor: colors.color1,
                  content: '2000',
                  display: true,
                  position: 'start',
                  yAdjust: 50,
                  rotation: 'auto',
                  font: {
                    size: 12,
                  }
                }
              },
              line2: {
                type: 'line',
                scaleID: 'y_axis_2',
                value: 250,
                borderColor: colors.black,
                borderWidth: 2,
                label: {
                  backgroundColor: colors.color2,
                  content: '2000',
                  display: true,
                  position: 'start',
                  //yAdjust: -60,
                  rotation: 'auto',
                  font: {
                    size: 12,
                  }
                }
              },
            }
          },
          tooltip: {
            //usePointStyle: true,
            mode: 'nearest',
            intersect: false,
          },
          title: {
            display: true,
            text: 'Realtime Chart'
          },
          legend: {
            position: 'bottom',
          },
          zoom: {
            pan: {
              // pan options and/or events
              enabled: true,
              mode: 'y',
              modifierKey: 'ctrl',
            },
            zoom: {
              // zoom options and/or events
              onZoomComplete: function ({ chart }) {
                console.log(`I was zoomed!!!`);
              },
              mode: 'y',
              wheel: {
                enabled: true,
                speed: 0.1
              },
              drag: {
                enabled: true,
              },
              pinch: {
                enabled: true
              },
            }
          },
        },
      },
      plugins: []
    });

我必须同步四个这样的图表，但我还没有找到解决方案。