将Chart.JS的Y轴格式化为时间

我在下面有这张图表，我想用TIME来缩放Y轴（时间不是一天中的时间，它是总小时，分钟，秒，所以可能超过24小时）似乎无法让它工作，我得到的只是一个空白屏幕，确定它是一个语法错误，但无法发现它！谢谢将Chart.JS的Y轴格式化为时间

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' 
        } 
       } 
     }] 
     } 
    } 
});

来源

2017-05-09 Mike Todd

你使用'moment.js'吗？ –

不，我不是，但现在已经添加它，仍然无法正常工作。我可以将DATA作为秒数，但希望图表将时间显示为H：mm：ss –

时间刻度只适用于X轴。

It can only be placed on the X axis.

但对于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/[email protected]"></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轴上年可以是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轴线I用于moment js上创建对应的一年的第一天的日期。

对于Y axis我用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, ...。

来源

2017-05-09 19:40:49 andreim

将Chart.JS的Y轴格式化为时间

回答

相关问题