目前,我的图表有一个粉色圆圈,当用户在图表上横向悬停时,会出现一个粉色圆圈,跟踪图表的线条 . 但是,当粉红色球越过数据点时,工具提示不会显示,我该如何实现?
我的图表的HTML:
<div class="graph-container">
<canvas class = "chart" id="xrpChart" height="220"></canvas>
</div>
使用Javascript:
const hoursPerDay = 24;
var i;
var ethDataset = [];
var eth = document.getElementById("ethChart").getContext('2d');
var time = [];
////////////////////////////////////////////
function timeOneDay(){//////////Init Time array for 24 hour
var formattedTime;
for(i =0; i < hoursPerDay ; i++){ //fill in all of the hours
formattedTime = (moment().subtract(i, "hours")).format("hA");
time.unshift(formattedTime); //add to beginning of array
}
}
timeOneDay(); //Just fills the Time array with the last 24 hours
///////////////////////////////////////////////////////////////
$.getJSON('https://min-api.cryptocompare.com/data/histohour?fsym=ETH&tsym=USD&limit=24', function(eth24Hour){
for(i =0; i < hoursPerDay; i++){
ethDataset.push(eth24Hour.Data[i].close); //fill ETH dataset with latest price action from last 24 hours
}
ethChart.update(); //ethDataset contains price info from last 24 hours
});
Chart.js(javascript)代码:
var ethChart = new Chart(eth, {
type: 'line',
data: {
labels: time,
datasets: [{
label: 'Price in USD',
data: ethDataset,
backgroundColor: [
'rgba(76, 175, 80, 0.2)'
],
borderColor: [
'rgba(0, 100, 0, 1)'
],
borderWidth: 1,
pointHoverBackgroundColor: 'rgb(255, 99, 132)' //pink dot
}]
},
options: {
elements:{
point:{
radius: 0
}
},
maintainAspectRatio: false,
}
});