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

3 回答

• 1

  更好的方法

  不需要jQuery来选择canvas元素（ line-chart ） .

  1 ▸ Solution :

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

  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 ▸ Solution :

  将工具提示的 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>
  

  回复于 2024-05-17T18:08:33+08:00
• 1

  您可以使用jquery抓取图表选择器 line-chart .

  hover: {
    onHover: function(e, el) {
        $("#line-chart").css("cursor", el[0] ? "pointer" : "default");
      }
    }
  

  jsfiddle

  回复于 2024-05-17T18:08:33+08:00
• 10

  使用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';
  }
  

  希望能帮助到你 .

  回复于 2024-05-17T18:08:33+08:00