Question

我有一个包含多个数据点/行的图表。目前，如果您将鼠标悬停在数据点附近，它将显示该点的标签/值。

我喜欢以下内容：当您将鼠标悬停在图表上的任何位置时，它会在单个标签中同时显示该x值的所有数据点的标签+值。

例如，让我们采用给定的数据集：

Date (x-labels): ['Jan 01','Jan 02','Jan 03']
Apples Sold: [3,5,1]
Oranges Sold: [0,10,2]
Gallons of Milk Sold: [5,7,4]

当您将鼠标悬停在图表的中间位置时，位于＆lt; 1月02日＆＃39;上方。垂直空间，标签应显示：

Jan 02
-----------------------
Apples Sold: 5
Oranges Sold: 10
Gallons of Milk Sold: 7

有一种简单的方法可以实现这一目标吗？

感谢。

Answer 1

对于 Chart.js 3.3.2，您可以使用@baburao 的方法进行一些更改。您可以检查 documentation。将 tooltip 放入 plugins。示例：

...
options: {
    plugins: {
        tooltip: {
            mode: 'nearest',
            intersect: false
        }
    }
}
...

Answer 2

您可以尝试使用JavaScript跟踪用户鼠标并根据位置返回该位置的数据。

＆＃13;

document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop
  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
 
}

＆＃13;

Answer 3

可以在绘制如下数据后实现此目的： HTML

<div class="container">
  <h2>Chart.js — Line Chart Demo</h2>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"> 
</script>

CSS

.container {
  width: 80%;
  margin: 15px auto;
}

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
function convert(str) {
  var date = new Date(str),
    mnth = ("0" + (date.getMonth() + 1)).slice(-2),
    day = ("0" + date.getDate()).slice(-2);
  return [date.getFullYear(), mnth, day].join("-");
}
var date = ["Tue Jun 25 2019 00:00:00 GMT+0530 (India Standard Time)"];
 var y1 = [12];
 var y2 = [32];
 var y3 = [7];
var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [], datep=[];
console.log(date.length)
if(date.length=="1"){
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["",convert(date[0]),""],
    datasets: [{
      label:"Tweets",
      backgroundColor: "rgba(153,255,51,0.4)",
      fill:false,
      borderColor:"rgba(153,255,51,0.4)",
      data: [null,y1[0],null]
    }, {
      label:"Retweets",
      backgroundColor: "rgba(255,153,0,0.4)",
      fill:false,
      borderColor:"rgba(255,153,0,0.4)",
      data: [null,y2[0],null]
    },{
      label:"Favourites",
      backgroundColor: "rgba(197, 239, 247, 1)",
      fill:false,
      borderColor:"rgba(197, 239, 247, 1)",
      data:[null,y3[0],null]
      }
      ]
  },
  options: {
         scales: {
            xAxes: [{
               gridLines: {
                  display: false
               }
            }],
            yAxes: [{
               ticks: {
                  display: true
               },
               gridLines: {
                  display: false,
               // drawBorder: false //maybe set this as well
               }
            }]
         },
        }
});}
else{
for (var i = 0; i < date.length; i++) {
  datep.push(convert(date[i]))
  dataPoints1.push(y1[i]); 
  dataPoints2.push(y2[i]); 
  dataPoints3.push(y3[i]); 
}
console.log(datep)
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: datep,
    datasets: [{
      label:"Tweets",
      backgroundColor: "rgba(153,255,51,0.4)",
      fill:false,
      borderColor:"rgba(153,255,51,0.4)",
      data: dataPoints1
    }, {
      label:"Retweets",
      backgroundColor: "rgba(255,153,0,0.4)",
      fill:false,
      borderColor:"rgba(255,153,0,0.4)",
      data: dataPoints2
    },{
      label:"Favourites",
      backgroundColor: "rgba(197, 239, 247, 1)",
      fill:false,
      borderColor:"rgba(197, 239, 247, 1)",
      data:dataPoints3
      }
      ]
  },
  options: {
         scales: {
            xAxes: [{
               gridLines: {
                  display: false
               }
            }],
            yAxes: [{
               ticks: {
                  display: true
               },
               gridLines: {
                  display: false,
               // drawBorder: false //maybe set this as well
               }
            }]
         },
        }
});
}

或chk这个小提琴https://jsfiddle.net/gqozfb4L/

Chart.js - 悬停标签以显示x轴上所有数据点的数据

3 个答案: