我在下面有这个图表,我想使用TIME来缩放Y轴(时间不是一天的时间,它是总小时,分钟,秒可能超过24小时)似乎无法得到它工作,我得到的是一个空白屏幕,确定它是一个语法错误,但无法发现它!感谢
var ctx = document.getElementById("myChart3").getContext('2d');
var myChart3 = new Chart(ctx, {
type: 'line',
data: {
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [
{
label: "Time",
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#565452", "#321456", "#129864", "#326812", "#215984"],
data: ["11:46:07", "11:41:14", "11:55:26", "12:14:58", "11:54:55", "11:54:04", "12:28:29", "12:35:18"]
}
]
},
options: {
scales: {
yAxes: [{
type: 'time',
time: {
displayFormats: {
minutes: 'h:mm:ss a'
}
}
}]
}
}
});
答案 0 :(得分:3)
时间刻度仅适用于X轴。
但对于Y,您可以使用linear
比例,并将每次表示为自1970-01-01
以来的毫秒数(通常Date
对象的作用方式)。
PLUNKER 或使用以下示例:
$(function(){
const ctx = document.getElementById('myChart').getContext('2d');
let years = ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"];
let times = ["11:46:07", "11:41:14", "11:55:26", "12:14:58", "11:54:55", "11:54:04", "12:28:29", "12:35:18"];
let data = years.map((year, index) => ({
x: moment(`${year}-01-01`),
y: moment(`1970-02-01 ${times[index]}`).valueOf()
}));
let bckColors = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#565452", "#321456", "#129864", "#326812", "#215984"];
let myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: "Time",
backgroundColor: 'rgba(188, 229, 214, 0.7)',
pointBackgroundColor: bckColors,
data: data,
pointBorderWidth: 2,
pointRadius: 5,
pointHoverRadius: 7
}
]
},
options: {
scales: {
xAxes: [
{
type: 'time',
position: 'bottom',
time: {
displayFormats: {
years: 'YYYY'
},
unit: 'year'
}
}
],
yAxes: [
{
type: 'linear',
position: 'left',
ticks: {
min: moment('1970-02-01 00:00:00').valueOf(),
max: moment('1970-02-01 23:59:59').valueOf(),
stepSize: 3.6e+6,
beginAtZero: false,
callback: value => {
let date = moment(value);
if(date.diff(moment('1970-02-01 23:59:59'), 'minutes') === 0) {
return null;
}
return date.format('h A');
}
}
}
]
}
}
});
});

<html>
<head>
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/moment@2.14.1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="500" height="300"></canvas>
</body>
</html>
&#13;
<强>解释强>
您可以在X轴上显示年份,可以是linear
,time
或category
比例。
在此示例中,X轴是time
比例。
以下代码用于生成X
和Y
轴的值:
let data = years.map((year, index) => ({
x: moment(`${year}-01-01`),
y: moment(`1970-02-01 ${times[index]}`).valueOf()
}));
对于X
轴,我使用moment js
在相应年份的第一天创建日期。
对于Y
轴,我使用moment js
创建自1970-01-01
以来的毫秒数。在这种情况下,所有小时数与一天相结合以形成日期。 1970-02-01
以防止1970-01-01
可能发生的边缘情况。然后,1970-01-01
以来的这些毫秒与Y
轴linear scale
一起使用。
Y
轴tick.callback
用于将相应的毫秒格式化为一小时。因此,使用格式h A
来获取例如1 AM, 1 PM, 12 AM, 12 PM, ...
。