我正在努力设置chartjs-plugin- croshair与我的图表(chartjs)。
项目依赖项为:
- vue-chartjs: 4.1.0
- chartjs-plugin-crosshair: 1.2.0
- chart.js: 3.7.1
i'm getting errors:
:未捕获的TypeError: Cannot read property of undefined (reading 'dragStarted')
then(鼠标移动到图表上):未捕获的TypeError: Cannot read properties of undefined (reading 'length')
我组件:
<template>
<Line :chart-data="chartData" :plugins="[CrosshairPlugin]" :chart-options="chartOptions" ref="myChart" />
</template
<script setup>
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)
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'
},
scales: {
xAxes: {
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',
},
},
yAxes: {
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
}
}
}
}
有人能帮忙吗?
这是因为你给了你的尺度一个自定义ID，将它们设置回默认的x和y(通过将对象键从yAxes更改为y，从xAxes更改为x)将解决您的问题:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
hover: {
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
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair"></script>
</body>