我已经纠结了好几个小时,但是仍无法解决这个问题。
我试图创建一个(我以为简单的)线性图,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>
编辑:问题在于x轴不延伸到24小时之前的now()。此外,数据集中有3个值,但只显示了两个。您甚至可以将x值编辑为任何您想要的值,整个图形仍然保持不变。
编辑2:
能帮我把这个搞对吗?我已经粘贴了我的数据如下: 我想要实现的目标:
- 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>