x轴上的Chart.js v3.x时间序列

所以我基本上是在拉扯我的头发，因为我不能让它连续工作几个小时

我试着做一个（我假设是简单的）线图，在x轴上以小时为单位，在y轴上以视图数为单位。到目前为止，我一直试图将x轴范围设置为-24小时

我的代码如下。我做错了什么

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<div style="width: 500px; height: 500px;"><canvas id="myChart" width="400" height="400"></canvas></div>
    
<script>
    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: '# of Votes',
                data: [{x:'1619701200',y:41},{x:'1619704800',y:9},{x:'1619708400',y:21}]
            }]
        },
        options: {
        scales: {
            x: {
                type: 'time',
                min: Date.now() - (24 * 60 * 60 * 1000),
                max: Date.now()
            }
        }
    }
    });

    </script>

var ctx=document.getElementById（'myChart'）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：[]，
数据集：[{
标签：“#投票数”，
数据：[{x:'1619701200'，y:41}，{x:'1619704800'，y:9}，{x:'1619708400'，y:21}]
}]
},
选项：{
比例：{
x:{
键入：“时间”，
最小值：Date.now（）-（24*60*60*1000），
马克斯：日期。现在（）
}
}
}
});

编辑：问题是x轴没有延伸到现在（）之前的24小时。此外，数据集中有3个值，但仅显示两个值。您甚至可以根据需要编辑x值，并且整个图形保持不变

EDIT2:

有人能帮我把这个弄对吗？我已将数据粘贴到下面： 我正在努力实现的目标：

X轴从现在开始到24小时之前，刻度之间的间隔为1小时，格式为“d-m-Y H:00:00”。现在的数据是以秒为单位的，如果我需要更改，请让我知道

Y轴从0到数据集中的最大值

我必须包括哪些CDN？我发现chart.js、moments、adapters等上的文档非常不清楚，我在互联网上找到的所有内容都是以前的版本

谢谢

<div style="width: 500px; height: 500px;"><canvas id="myChart" width="400" height="400"></canvas></div>
    <script>
        new Chart(document.getElementById("myChart"), {
        type: 'line',
        data: {
            labels: ['1619701200','1619704800','1619708400','1619715600','1619719200','1619722800','1619726400','1619730000','1619733600','1619737200','1619744400','1619773200','1619780400','1619784000','1619787600','1619791200','1619794800','1619798400','1619802000','1619809200','1619812800','1619816400','1619820000','1619823600','1619856000'],
            datasets: [{ 
                data: [41,9,21,80,277,151,68,88,82,48,12,1,97,36,81,21,63,49,44,15,10,44,81,4,9],
                label: "Views",
                borderColor: "#3e95cd",
                fill: false
            },
            { 
                data: [1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,4,1,1],
                label: "Visitors",
                borderColor: "#3e95cd",
                fill: false
            }
            ]
        }
  </script>

新图表（document.getElementById（“myChart”）{
键入：“行”，
数据：{
标签：['1619701200'、'1619704800'、'1619708400'、'1619715600'、'1619719200'、'1619722800'、'1619726400'、'1619730000'、'1619733600'、'1619737200'、'1619744400'、'1619773200'、'1619780400'、'1619784000'、'1619787600'、'1619791200'、'1619794800'、'161979898400'、'161989200'、'1619812800'、'1619856000'、'，
数据集：[{
数据：[41,9,21,80277151,68,88,82,48,12,1,97,36,81,21,63,49,44,15,10,44,81,4,9]，
标签：“视图”，
边框颜色：“3e95cd”，
填充：假
},
{ 
数据：[1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,4,1,1,1]，
标签：“访客”，
边框颜色：“3e95cd”，
填充：假
}
]
}

它需要更多的设置，我已经搜索过了，通过尝试/错误-归功于此-这些是结果

见：

/*
资料来源：https://jsfiddle.net/microMerlin/3wfoL7jc/
*/
var ctx=document.getElementById（'myChart'）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
数据集：[{
标签：“#投票数”，
数据：[{
x:'1619701200'，
y:41
}, {
x:'1619704800'，
y:9
}, {
x:'1619708400'，
y:21
}]
}]
},
选项：{
回答：是的，
比例：{
xAxes：[{
最小值：Date.now（）-（24*60*60*1000），
max:Date.now（），
类型：“线性”，
位置：“底部”，
//对,，
滴答声：{
//贝吉纳泽罗：是的，
userCallback：函数（t，i）{
/*log（“t:+t.toString（））；
log（“i:+i.toString（））*/
返回i；
}
}
}]
}
}
})；

---

我们希望您保留您的头发：-）

对于最新版本的

Chart.js

Chart.js

v3.2.1（与v2.xx不向后兼容）

备选案文1：

//获取Chart.js的最新版本，现在是v3.2.1
//您需要moment.js和适配器才能使time或timeseries在x轴上工作
const startDate=新日期（1619701200*1000）；
//数据中的第一个标签，乘以1000得到毫秒，
//从现在开始的最后24小时，请参阅下面的进一步内容
常量myLabels=[]；
让nextHour=开始日期；
让i=0；//提示：在for循环外部声明i以获得更好的性能
对于（i；i<24；i++）{
nextHour=新日期（（1619701200+（i*3600））*1000）；
myLabels.push（下一步）；
};
const ctx=document.querySelector（'canvas'）.getContext（'2d'）；
const myChart3x=新图表（ctx{
键入：“行”，
数据：{
标签：myLabels，
数据集：[{
数据：[41,9,21,80277151,68,88,82,48,12,1,97,36,81,21,63,49,44,15,10,44,81,4,9]，
标签：“视图”，
边框颜色：“3e95cd”，
填充：假
},
{
数据：[1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,4,1,1,1]，
标签：“访客”，
边框颜色：“3e95cd”，
填充：假
}
]
},
选项：{
比例：{
x:{
键入：“timeseries”，
时间：{
单位：'小时'，//我复制/粘贴了你的代码以创建一个，我看不到任何错误-，你能回答你的问题并解释你面临的问题和想要的结果吗？你真是天赐良机！！谢谢你MUCH@B.Smit谢谢你的评论-我很高兴它解决了你的问题。你在解释问题、添加编辑等方面付出了巨大的努力。。因此，你应该在回答问题时付出同样的努力。