gpt4 book ai didi

javascript - 从 0 开始 Chart.js 时间刻度

转载 作者:行者123 更新时间:2023-11-29 23:38:55 24 4
gpt4 key购买 nike

在这个 Chart.js 时间尺度中,为什么“3 月 11 日”不从 0 开始?我试图让它从零开始,但它是随机开始的。任何见解将不胜感激!

enter image description here

https://jsfiddle.net/askhflajsf/7yped1d5/ (使用最新的master branch build)

var barChartData = {
labels: ["2013-03-09", "2013-03-16", "2013-03-23", "2013-03-30", "2013-04-06"],
datasets: [{
borderColor: "#3e95cd",
data: [10943, 29649, 6444, 2330, 36694],
fill: false,
borderWidth: 2
},
{
borderColor: "#ff3300",
data: [9283, 1251, 6416, 2374, 9182],
fill: false,
borderWidth: 2
}]
};

Chart.defaults.global.defaultFontFamily = "'Comic Sans MS'";
// Disable pointers
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.elements.point.hoverRadius = 0;

var ctx = document.getElementById("bar-chart").getContext("2d");
new Chart(ctx, {
type: 'line',
data: barChartData,
options: {
responsive: true,
legend: {
display: true,
position: "right"
},
title: {
display: false
},
scales: {
xAxes: [{
type: "time",
ticks: {
minRotation: 90
}
}]
}
}
});
<script src="http://www.chartjs.org/dist/master/Chart.bundle.min.js"></script>
<canvas id="bar-chart"></canvas>

最佳答案

这似乎是设计使然,您为什么不对此做一个简单的解决方法。使用 moment.js 进行时间操作,并将数据作为 linear 类型而不是 date 类型加载到 x 轴,这基本上提供了相同的输出。

JSFiddle:here

代码:

var timeOperations = ["2013-03-09", "2013-03-16", "2013-03-23", "2013-03-30", "2013-04-06"].map(function(value){
return moment(value, "YYYY-MM-DD").format('MMM-DD').toString();
});
var barChartData = {
labels: timeOperations,
datasets: [{
borderColor: "#3e95cd",
data: [10943, 29649, 6444, 2330, 36694],
fill: false,
borderWidth: 2
},
{
borderColor: "#ff3300",
data: [9283, 1251, 6416, 2374, 9182],
fill: false,
borderWidth: 2
}]
};

关于javascript - 从 0 开始 Chart.js 时间刻度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45764447/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com