将Chart.JS的Y轴设置为时间 [英] Format Y axis of Chart.JS as Time
问题描述
我在下面有这张表，我想使用TIME缩放Y轴（时间不是一天中的总时间，分钟，秒，因此可能超过24小时）似乎无法获取它可以正常工作，我得到的只是一个空白屏幕，请确保这是一个语法错误，但找不到它！谢谢
I have this chart below, I want to scale the Y axis using the TIME (the time isn't time of day it is total hours,mins, seconds so could be over 24 hours) just can't seem to get it to work, all I get is a blank screen, sure it's a syntax error but can't spot it! Thanks
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'
}
}
}]
}
}
});
推荐答案
时间刻度仅适用于X轴。
Time scale works only for X axis.
但是对于Y，您可以使用 linear 缩放并以 1970-01-01 为单位表示日期（以毫秒为单位）（通常的 Date 对象确实）。
But for Y you can use a linear scale and express each time as date in milliseconds since 1970-01-01 (how the usual Date object does).
PLUNKER 或使用以下示例：
PLUNKER or use the following example:
$(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>
说明
您可以在X轴上具有年份，该年份可以是线性，时间或类别标度。
You can have the years on X axis which can be a linear, time or category scale.
在此示例中，X轴是时间标度。
In this example X axis is a time scale.
以下代码用于生成 X 和 Y 轴：
The following code is used to generate values for X and Y axis:
let data = years.map((year, index) => ({
x: moment(`${year}-01-01`),
y: moment(`1970-02-01 ${times[index]}`).valueOf()
}));
对于 X 轴，我使用了 moment js 在相应年份的第一天创建日期。
For X axis I used moment js to create a date on the first day of the corresponding year.
对于 Y 轴我使用 moment js 创建自 1970-01-01 以来的日期（以毫秒为单位）。在这种情况下，所有小时数与一天相结合以形成日期。 1970-02-01 是为了防止 1970-01-01 可能发生的边缘情况。然后，自 1970-01-01 起，这些毫秒用于 Y 轴 linear标度。
For Y axis I used moment js to create the date in milliseconds since 1970-01-01. In this case all hours are combined with a day to form a date. 1970-02-01 in order to prevent an edge cases that may happen for 1970-01-01. Then these milliseconds, since 1970-01-01, are used with the Y axis linear scale.
Y 轴 tick.callback 用于将相应的毫秒格式格式化为一个小时。因此，使用格式 h A 来获取例如 1 AM、1PM、12AM、12PM，... 。
Y axis tick.callback is used to format the corresponding milliseconds to an hour. Thus using the format h A to obtain for example 1 AM, 1 PM, 12 AM, 12 PM, ....
这篇关于将Chart.JS的Y轴设置为时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
