Chart.js - 为什么我的数据集标签在悬停时一直显示在一起，而第一个小时会覆盖第二个

问题描述

我必须在一个图表中显示包含两个不同数据集的折线图。 第一个数据小时覆盖第二个数据小时并在悬停时一起显示。 我的代码正确还是我遗漏了什么？

var whatsAttendance = [{x: "2021-05-13 06:31:41",y: 2,id: '1A'},{x: "2021-05-13 14:29:37",y: 3,id: '2A'}];
var telegramAttendance = [{x: "2021-05-13 08:48:12",y: 1,id: '1B'},{x: "2021-05-13 13:28:59",y: 4,id: '2B'}];

 var ctx = document.getElementById("lineChart").getContext('2d');

这段代码是设置图表线的数据。

 var chartData = {
                    datasets: [
                        {
                            label: 'Whatsapp',borderWidth: 2,borderColor: "#7CFC00",pointBackgroundColor: "#7CFC00",pointBorderColor: "#7CFC00",pointHoverBackgroundColor: "#7CFC00",pointHoverBorderColor: "#7CFC00",fill: false,data: whatsAttendance.map(o => ({ x: o.x,y: Number(o.y)}))
                        },{
                            label: 'Telegram',borderColor: "#1E90FF",pointBackgroundColor: "#1E90FF",pointBorderColor: "#1E90FF",pointHoverBackgroundColor: "#1E90FF",pointHoverBorderColor: "#1E90FF",data: telegramAttendance.map(o => ({ x: o.x,]
                };

这里是图表线配置

 var lineChart = new Chart(ctx,{
                type: 'line',data: chartData,options: {
                    title: {
                        display: true,text: 'Atendimentos chatbot',fontSize: 18
                    },legend: {
                        display: true,position: "bottom"
                    },scales: {
                        xAxes: [{
                            type: 'time',position: 'bottom',time: {
                                unit: 'hour',displayFormats: {hour: 'HH:mm'},tooltipformat: "HH:mm",min: moment(Date.Now()).format('YYYY-MM-DD [01:00]'),max: moment(Date.Now()).format('YYYY-MM-DD [24:00]')
                            },}]
                    }
                }
            });
        })
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）