我制作了一个显示Chart.js库中的折线图（折线）的应用程序。根据数据值，指针可能会变化：低于25时，将显示一个三角形；否则，将显示一个三角形。从25以上开始显示图像，在这种情况下为太阳。
显示单个图表，代码可以完美运行。但是，当您尝试在同一页面上放置第二个图表时，仅当您将鼠标悬停在第一个图表旁边时，才会出现第二个图表。我在pluginService.register函数内部使用jQuery来控制指针的自定义。
这是HTML：
<body>
<div class="container-fluid">
<div class=row>
<div class="col-6"><canvas id="canvas"></canvas></div>
<div class="col-6"><canvas id="canvas2"></canvas></div>
</div>
</div>
这是JavaScript：
var sun = new Image();
sun.src = 'https://i.imgur.com/yDYW1I7.png';
sun.width = 30;
sun.height = 30;
Chart.pluginService.register({
afterUpdate: function(chart,chart2) {
$.each(chart.config.data.datasets[0].data, function(index, value){
if(value < 25){
chart.config.data.datasets[0]._meta[0].data[index]._model.pointStyle = 'triangle';
} else{
chart.config.data.datasets[0]._meta[0].data[index]._model.pointStyle = sun;
}
});
}
});
var config = {
type: 'line',
data: {
labels: ['','10', '500', '1000', '2000', '3000', '4000', '6000', '8000', '10000'],
datasets: [{
label: 'Esquerda',
fill: false,
backgroundColor: '#166a8f',
borderColor: '#166a8f',
pointBorderColor: 'rgb(65,105,225)',
pointBorderWidth: 3,
pointBackgroundColor: "#fff",
pointRadius: 10,
pointStyle: 'circle',
showLine: true,
data: [ NaN,
10,
10,
20,
5,
40,
80
],
}, {
label: 'Dashed',
fill: false,
pointRadius: 0,
borderColor: '#000',
borderDash: [5, 5],
data: [
25,
25,
25,
25,
25,
25,
25,
25,
25,
25
],
}]
},
options: {
legend: {
display: false
},
elements: {
line: {
tension: 0.000001
}
},
responsive: true,
title: {
display: true,
fontSize: 30,
text: 'Titulo 1'
},
tooltips: {
enabled: false,
mode: 'index',
intersect: false,
backgroundColor: 'rgba(0,0,0,0.8)'
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
position: 'top',
gridLines: {
display:true,
color: '#000',
lineWidth: 1
},
display: true,
scaleLabel: {
display: true,
labelString: 'Escrever algo aqui'
}
}],
yAxes: [{
ticks: {
mirror: false,
reverse:true
},
gridLines: {
display:true,
color: '#000',
lineWidth: 1
},
display: true,
scaleLabel: {
display: true,
labelString: 'Escrever algo aqui'
}
}]
}
}
};
var config2 = {
type: 'line',
data: {
labels: ['','10', '500', '1000', '2000', '3000', '4000', '6000', '8000', '10000'],
datasets: [{
label: 'Direito',
fill: false,
backgroundColor: '#166a8f',
borderColor: '#166a8f',
pointBorderColor: 'rgb(65,105,225)',
pointBorderWidth: 3,
pointBackgroundColor: "#fff",
pointRadius: 10,
pointStyle: 'circle',
showLine: true,
data: [ NaN,
10,
10,
20,
5,
40,
80
],
}, {
label: 'Dashed',
fill: false,
pointRadius: 0,
backgroundColor: '#166a8f',
borderColor: '#000',
borderDash: [5, 5],
data: [
25,
25,
25,
25,
25,
25,
25,
25,
25,
25
],
}]
},
options: {
legend: {
display: false
},
elements: {
line: {
tension: 0.000001
}
},
responsive: true,
title: {
display: true,
fontSize: 30,
text: 'Titulo 2'
},
tooltips: {
enabled: false,
mode: 'index',
intersect: false,
backgroundColor: 'rgba(0,0,0,0.8)'
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
position: 'top',
gridLines: {
display:true,
color: '#000',
lineWidth: 1
},
display: true,
scaleLabel: {
display: true,
labelString: 'Escrever algo aqui'
}
}],
yAxes: [{
ticks: {
mirror: false,
reverse:true
},
gridLines: {
display:true,
color: '#000',
lineWidth: 1
},
display: true,
scaleLabel: {
display: true,
labelString: 'Escrever algo aqui'
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
var ctx2 = document.getElementById('canvas2').getContext('2d');
window.myLine2 = new Chart(ctx2, config2);
};
控制台上返回的错误如下：
Uncaught TypeError: Cannot read property 'data' of undefined
at Number.<anonymous> (canvas2.php:65)
at Function.each (jquery-3.3.1.js:354)
at Object.afterUpdate (canvas2.php:59)
at Object.notify (Chart.js:6754)
at Chart.update (Chart.js:4234)
at Chart.resize (Chart.js:4022)
at listener (Chart.js:4621)
at Chart.js:10777
at Chart.js:10669
我想将两个图形都放在同一个页面上，两个图形都带有自定义指针。
我已尽我所能尝试了所有方法，但没有成功。任何帮助将不胜感激。
这是CodePen链接，其中包含完整的代码：https://codepen.io/leonardofurlan/pen/WgMyNo