Question

我'，使用chartjs，现在我需要渲染持续时间。

我需要在X轴上有类别，在Y轴上有持续时间。

有没有办法将x ax的持续时间转换为：

40 - ＆gt; 40分钟

150 - ＆gt; 2:30（或其他一些格式化的，但是在y轴上转换为y的值，以小时为单位转换分钟，而不是在十进制中！）

我试过

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

我在互联网上检查过，有一个简单的黑客来做这个，为什么我使用黑客是因为如果我将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

以下小提琴包含修改后的代码，其中日期Y轴可见，

JSFiddle： here

图表js - 在Y轴上以小时和分钟为单位的时间刻度的条形图

1 个答案: