Chart.js如何在折线图中显示标签和图例的光标指针

更好的方法

不需要jQuery来选择canvas element(line-chart).

1▸解决方案:

在图表选项中添加以下内容:

   legend: {
      onHover: function(e) {
         e.target.style.cursor = 'pointer';
      }
   },
   hover: {
      onHover: function(e) {
         var point = this.getElementAtEvent(e);
         if (point.length) e.target.style.cursor = 'pointer';
         else e.target.style.cursor = 'default';
      }
   }

2▸解决方案:

集提示的 mode到dataset:

tooltips: {
   mode: 'dataset'
}

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇ⧩

var line_chart = new Chart(document.getElementById("line-chart"), {
   type: 'line',
   data: {
      labels: ['May', 'June', 'July'],
      datasets: [{
         data: [15, 25, 15],
         label: "My Dataset1",
         borderColor: "#00F",
         fill: false
      }, {
         data: [35, 15, 25],
         label: "My Dataset2",
         borderColor: "#F00",
         fill: false
      }]
   },
   options: {
      tooltips: {
         mode: 'dataset',
      },
      legend: {
         onHover: function(e) {
            e.target.style.cursor = 'pointer';
         }
      },
      hover: {
         onHover: function(e) {
            var point = this.getElementAtEvent(e);
            if (point.length) e.target.style.cursor = 'pointer';
            else e.target.style.cursor = 'default';
         }
      }
   }
});

events: ['mousemove'], // this is needed, otherwise onHover is not fired
onHover: (event, chartElement) => {
    event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}