我从版本 2 迁移到版本 4。该图不会画线到图外的点。我使用插件 chartjs-plugin-zoom。
我正在使用 spanGaps 来链接点。但图表外的点不起作用。
你在视频中看到旧版本和新版本 - https://cloud.mail.ru/public/pxTm/6sb3fxmnt
我找不到问题的答案。
版本 2 - 正在运行
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Red2', 'Blue2', 'Yellow2', 'Green2', 'Purple2', 'Orange2', 'Red3', 'Blue3', 'Yellow3', 'Green3', 'Purple3', 'Orange3', 'Red4', 'Blue4', 'Yellow4', 'Green4', 'Purple4', 'Orange4', 'Red5', 'Blue5', 'Yellow5', 'Green5', 'Purple5', 'Orange5', 'Red6', 'Blue6', 'Yellow6', 'Green6', 'Purple6', 'Orange6', 'Red7', 'Blue7', 'Yellow7', 'Green7', 'Purple7', 'Orange7'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, null, 2, 3, 12, 19, null, null, null, null, null, null, null, null, 2, 3, 12, 19, 3, null, 2, 3, 12, null, 3, 5, 2, 3, 12, null, 3, 5, 2, 3, 12, null, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
spanGaps: true,
elements: {
line: {
tension: 0.3,
fill: false,
}
},
scales: {
yAxes: [{
beginAtZero: true,
ticks: {
min: 0,
max: 20
}
}],
xAxes: [{
ticks: {
min: 'Yellow3',
max: 'Orange7'
}
}]
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x',
speed: 5
},
zoom: {
enabled: true,
mode: 'x',
scaleMode: 'x',
wheel: {
enabled: true
},
sensitivity: 0.1
}
}
}
}
});
</script>
</body>
</html>
版本 4（也是 3）- 不工作
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/2.0.1/chartjs-plugin-zoom.min.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Red2', 'Blue2', 'Yellow2', 'Green2', 'Purple2', 'Orange2', 'Red3', 'Blue3', 'Yellow3', 'Green3', 'Purple3', 'Orange3', 'Red4', 'Blue4', 'Yellow4', 'Green4', 'Purple4', 'Orange4', 'Red5', 'Blue5', 'Yellow5', 'Green5', 'Purple5', 'Orange5', 'Red6', 'Blue6', 'Yellow6', 'Green6', 'Purple6', 'Orange6', 'Red7', 'Blue7', 'Yellow7', 'Green7', 'Purple7', 'Orange7'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, null, 2, 3, 12, 19, null, null, null, null, null, null, null, null, 2, 3, 12, 19, 3, null, 2, 3, 12, null, 3, 5, 2, 3, 12, null, 3, 5, 2, 3, 12, null, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
spanGaps: true,
elements: {
line: {
tension: 0.3,
}
},
scales: {
y: {
beginAtZero: true,
min: 0,
max: 20
},
x: {
// type: 'linear',
min: 'Yellow3',
max: 'Orange7'
}
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x',
speed: 5
},
zoom: {
enabled: true,
mode: 'x',
scaleMode: 'x',
wheel: {
enabled: true
},
sensitivity: 0.1
}
}
}
}
});
</script>
</body>
</html>