將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軸格式化爲時間

回答

相關問題