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

Question

我有以下使用chart.js的折线图示例.我想表明:

1. 悬停时图例和标签的指针光标
2. 在线悬停上显示所有标签数据

 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: 'label',
            },
            hover: {
                mode: 'label'
            },
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div style='width:80%'>
<canvas id="line-chart" width="800" height="450"></canvas>
</div>

Answer 1

更好的方法

不需要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';
         }
      }
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div style='width:80%'>
   <canvas id="line-chart" width="800" height="450"></canvas>
</div>

Answer 2

• 从 Chart js 版本 3.5.1 开始，onHover() 选项看起来略有不同，并且查找点的方法也发生了变化。

• “target”在“e.native”下再嵌套一层

• 通过将交互模式设置为“索引”，我可以在悬停时在一个工具提示中看到我的组合图表值。

  options: {
     interaction: { mode: 'index' },
     onHover: function (e) {
       const points = this.getElementsAtEventForMode(
         e,
         'index', { axis: 'x', intersect: true },
         false
       );
  
       if (points.length) e.native.target.style.cursor = 'pointer';
       else e.native.target.style.cursor = 'default';
     }
  }
  

Answer 3

对于任何正在寻找 Chart.js v3.5.1 的 Typescript 解决方案的人来说，扩展@joshfindit 的答案：

onHover: (event, activeElements) => {
   (event?.native?.target as HTMLElement).style.cursor =
        activeElements?.length > 0 ? 'pointer' : 'auto';
}

Answer 4

使用Chart.js 2.x，我发现这种方法更加优雅。只需在选项中添加：

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

希望能帮助到你。