目前,我的图表有一个粉色圆圈,当用户在图表上横向悬停时,会出现一个粉色圆圈,跟踪图表的线条 . 但是,当粉红色球越过数据点时,工具提示不会显示,我该如何实现?

我的图表的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,

    }
});