我',使用图表js,现在我需要渲染一个持续时间。
我需要在 X 轴上有类别,在 Y 轴上有持续时间。
有没有办法将 x 轴上的持续时间转换为:
40 -> 40 分钟
150 -> 2:30(或其他格式,但 y 轴上的值以 60 为基数转换,用于将分钟转换为小时,而不是十进制!)
我尝试过
scales: {
yAxes: [{
type: 'time',
time: {
unit: 'minute',
displayFormats: {
hour: 'h:mm:ss a'
}
}
}]
//
}
没有成功。
这是我的完整代码
var canvas = document.getElementById("graficotest1");
var ctx = canvas.getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [
'modo 1',
'modo 2,
'modo 13'
],
datasets: [
{
label: '# Durata reale',
data: [
3100,
615,
705
],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
hoverBackgroundColor: 'red'
},
{
label: '# Ore in',
data: [
0,
0,
465
],
backgroundColor: '#DEF797',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
hoverBackgroundColor: 'yellow'
},
]
},
options: {
scales: {
//
yAxes: [{
type: 'time',
time: {
unit: 'minute',
displayFormats: {
hour: 'h:mm:ss a'
}
}
}]
//
},
//
title: {
display: false,
text: 'stat 1'
},
//scaleShowGridLines: false
}
});
我需要将图表中的所有值(如 3100、615、705(分钟))转换为小时:分钟
谢谢
最佳答案
我在互联网上查了一下,有一个简单的 hack 可以做到这一点,为什么我使用这个 hack 是因为如果我将 Y 轴设置为日期,图表不会渲染并抛出错误。
请在下面找到用于实现日期 Y 轴的配置。
var options = {
scaleOverride: true,
scaleSteps: 8,
scaleStepWidth: 1800,
scaleStartValue: 0,
responsive: true,
maintainAspectRatio: false,
scaleLabel: function(valuePayload) {
console.log(new Date(valuePayload.value * 1000).toISOString());
return new Date(valuePayload.value * 1000).toISOString().substr(12, 7);
},
multiTooltipTemplate: function(valuePayload) {
return valuePayload.datasetLabel + " " + new Date(valuePayload.value * 1000).toISOString().substr(12, 7)
},
title: {
display: false,
text: 'stat 1'
}
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(data, options);
Github 上的以下问题包含在 Y 轴上实现时间轴的漂亮方法。
GITHUB 问题: here
下面的 fiddle 包含修改后的代码,其中日期 Y 轴可见,
JSFiddle: here
关于javascript - Chart js - Y 轴上时间刻度(以小时和分钟为单位)的条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45824519/