javascript - Chart js - Y 轴上时间刻度(以小时和分钟为单位)的条形图

Question

我'，使用图表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(分钟))转换为小时:分钟

谢谢

Answer 1

我在互联网上查了一下，有一个简单的 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