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

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

我想要的是：当您在图表上的任何位置悬停时，它将在单个标签中同时显示该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]

当您将鼠标悬停在图形中间“Jan 02”垂直空间上方时，标签应显示：

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

有没有一个简单的方法来实现这一点

---

谢谢。

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

document.querySelector（'.button'）。onmousemove=（e）=>{
常量x=e.pageX-e.target.offsetLeft
常数y=e.pageY-e.target.offsetTop
e、 setProperty（'--x'，`${x}px`）
e、 setProperty（'--y'，`${y}px`）
}

有没有一个简单的方法来实现这一点

是的！！有一个非常简单的方法来实现这一点。如果你读了这本书，你会很容易发现这一点

无论如何，基本上您需要将图表选项中的工具提示模式设置为，以便实现所需的行为

...
options: {
   tooltips: {
      mode: 'index'
   }
}
...

此外，您可能需要设置以下各项：

...
options: {
   tooltips: {
      mode: 'index',
      intersect: false
   },
   hover: {
      mode: 'index',
      intersect: false
   }
}
...

这将使所有预期的悬停/标签交互都将在以最接近的x值悬停在图形上的任何位置时发生

从文件中： #索引
在同一索引中查找项。如果“相交”设置为true，则 第一个相交项用于确定数据中的索引。如果 相交假x方向上最近的项目用于 确定索引

以下是一个工作示例：

var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
var图表=新图表（ctx{
键入：“行”，
数据：{
标签：['Jan 01'、'Jan 02'、'Jan 03']，
数据集：[{
标签：“出售的苹果”，
数据：[3,5,1]，
边框颜色：“rgba（255,99,132,0.8）”，
填充：假
}, {
标签：“出售的橙子”，
数据：[0,10,2]，
边框颜色：“rgba（255206860.8）”，
填充：假
}, {
标签：“出售的牛奶加仑数”，
数据：[5,7,4]，
边框颜色：“rgba（54162235,0.8）”，
填充：假
}]
},
选项：{
工具提示：{
模式：“索引”，
交集：错
},
悬停：{
模式：“索引”，
交集：错
}
}
});
您可以通过如下方式绘制数据来实现此目的：
Html

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
               }
            }]
         },
        }
});
}

var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
函数转换（str）{
var日期=新日期（str），
mnth=（“0”+（date.getMonth（）+1））.slice（-2），
day=（“0”+date.getDate（））.slice（-2）；
return[date.getFullYear（），mnth，day].join（“-”；
}
var日期=[“2019年6月25日星期二00:00:00 GMT+0530（印度标准时间）”；
变量y1=[12]；
变量y2=[32]；
变量y3=[7]；
变量dataPoints1=[]、dataPoints2=[]、dataPoints3=[]、datep=[]；
console.log（date.length）
如果（日期长度=“1”）{
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：[“”，转换（日期[0]），“”，
数据集：[{
标签：“推特”，
背景颜色：“rgba（153255,51,0.4）”，
填充：假，
边框颜色：“rgba（153255,51,0.4）”，
数据：[null，y1[0]，null]
}, {
标签：“转发”，
背景颜色：“rgba（255153,0,0.4）”，
填充：假，
边框颜色：“rgba（255153,0,0.4）”，
数据：[null，y2[0]，null]
},{
标签：“收藏夹”，
背景色：“rgba（197239247,1）”，
填充：假，
边框颜色：“rgba（197239247,1）”，
数据：[null，y3[0]，null]
}
]
},
选项：{
比例：{
xAxes：[{
网格线：{
显示：假
}
}],
雅克斯：[{
滴答声：{
显示：真
},
网格线：{
显示：假，
//drawBorder:false//也可以设置此值
}
}]
},
}
});}
否则{
对于（变量i=0；i

或者检查这把小提琴是否正确、完整；请接受。谢谢，这正是我想要的。现在我只需要弄清楚如何将intersect设置为false，1）显示相交点，2）减少动画的跳跃性。JFYI：这是社区拒绝的，不是我（你可以看到）。。。虽然，我认为这是有道理的，因为你的编辑并没有真正解决最初的问题。但是我仍然可以批准你的e
.container {
  width: 80%;
  margin: 15px auto;
}

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
               }
            }]
         },
        }
});
}