vue-chartjs正确实现crosshair插件报dragStarted错误如何解决

基础环境 #

• vue-chartjs: 4.1.0
• chartjs-plugin-crosshair: 1.2.0
• chart.js: 3.7.1

复现报错 #

• 初始化阶段报错：Uncaught TypeError: Cannot read properties of undefined (reading 'dragStarted')
• 鼠标移入图表区域报错：Uncaught TypeError: Cannot read properties of undefined (reading 'length')

问题原因 #

1. 插件注册逻辑冲突：同时使用全局ChartJS.register和组件props传参两种方式注册插件，且crosshair插件未做全局注册，插件内部执行时无法获取图表实例挂载的状态属性，触发dragStarted字段读取异常
2. 配置不符合Chart.js v3语法规范：Chart.js v3版本的scales配置不再支持xAxes/yAxes的数组式键名，需使用自定义scale标识（默认x轴为x、y轴为y），插件读取坐标轴配置时拿到undefined值，触发length属性读取错误
3. 代码存在语法笔误：ticks配置项的color属性值未包裹引号、相邻配置项缺失分隔逗号，会导致配置解析失败
4. 模板标签书写错误：template闭合标签缺失右尖括号，会触发编译异常

修复方案 #

1. 统一插件注册逻辑：移除Line组件上的:plugins传参，将CrosshairPlugin加入全局ChartJS.register的注册列表，避免多实例注册导致的上下文丢失
2. 修正scales配置键名：将xAxes/yAxes替换为x/y，匹配Chart.js v3的配置格式
3. 修复所有语法笔误：补全属性值的引号、缺失的逗号，修正模板标签书写错误，补充缺失的vue核心方法引入

修复后完整代码 #

<template>
  <Line :chart-data="chartData" :chart-options="chartOptions" ref="myChart" />
</template>

<script setup>
import { ref } from 'vue'
import { Line } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, PointElement, LineElement, CategoryScale, LinearScale, TimeSeriesScale } from 'chart.js'
import { CrosshairPlugin, Interpolate } from 'chartjs-plugin-crosshair';

// 统一全局注册所有插件、基础组件
ChartJS.register(
  Title, 
  Tooltip, 
  Legend, 
  PointElement, 
  LineElement, 
  CategoryScale, 
  LinearScale, 
  TimeSeriesScale,
  CrosshairPlugin
)

const myChart = ref();

const chartData = {
  labels: [1,2,3,4],
  datasets: [{
    label:'test', 
    data:[51,52,53,54],
    borderWidth:1, 
    borderColor:'#f0f'
  }]
}

const chartOptions = {
  interaction: {
    mode: 'nearest',
    intersect: false
  },
  scales: {
    x: {
      stacked:true,
      grid: {
        color:"rgba(80,201,209,.3)",
        borderColor:"rgba(80,201,209,1)"
      },
      title: {
        display:true,
        text: 'value'
      },
      ticks: {
        color:"rgba(80,201,209,1)",
        source: 'labels',
      },
    },
    y: {
      grid: {
        color:"rgba(80,201,209,.3)",
        borderColor:"rgba(80,201,209,1)"
      },
      title: {
        display: false,
      },
      ticks: {
        color:"rgba(80,201,209,1)",
      },
    },
  },
  plugins: {
    crosshair: {
      sync: {
        enabled: false
      },
      zoom: {
        enabled: false
      },
      snap:  {
        enabled: true
      }
    }
  }
}
</script>

注：如果需要开启多图十字线同步、框选缩放功能，可直接修改对应crosshair配置项的enabled值为true即可，不需要额外引入其他依赖。

内容的提问来源于stack exchange，提问作者Yuray