chart.js - chart.js 和时间戳作为可读日期

Question

我有一些带有时间戳和整数值的数据。现在我创建了一个散点图，因为我的时间戳不在同一频率，但值是在随机时间获取的。时间戳是 x 轴，值是 y 轴。现在我想将时间戳转换为可读的时间格式。所以我包括了时刻。但我就是无法让它显示我格式化的时间字符串。即使我更改代码，它也只是显示一些默认格式。这是如何运作的？标签在此处输入图像描述

这是我的代码：

    <script src="open/moment.js"></script>
<script src="open/Chart.min.js"></script>
<canvas id="hum1" style="width:1000px; height:500px;"></canvas>
<script>
	var x = new Chart(document.getElementById("hum1"), {
	   type: 'scatter',
	   data: {
		  datasets: [{
			 label: "Test",
			 pointStyle: 'line',
			 showLine: true,
			 fill: false,
			 borderColor: '#00ff00',
			 pointRadius: 0,
			 data: [],
		  },{
			 label: "Humidity 1",
			 showLine: true,
			 fill: true,
			 borderColor: '#0000FF',
			 pointRadius: 0,

			 data: [
			 
{x:1588353429.6027,y:400},
{x:1588353430.6634,y:0},
{x:1588353431.7241,y:0},
{x:1588353432.7848,y:0},
{x:1588353433.8455,y:400},
{x:1588353434.9062,y:400},
{x:1588353435.9668,y:400},
{x:1588353437.0274,y:400},
{x:1588353438.0881,y:400},
{x:1588353439.1487,y:400},
{x:1588353440.2093,y:400},
{x:1588353441.27,y:400},
{x:1588353442.3307,y:400},
{x:1588353443.3929,y:400},
{x:1588353444.4537,y:400},
{x:1588353445.5142,y:400},
{x:1588353723.1543,y:415},
{x:1588353724.216,y:0},
{x:1588353725.2782,y:0},
{x:1588353726.3402,y:0},
{x:1588353727.402,y:400},
{x:1588353728.463,y:400},
{x:1588353793.2418,y:415},
{x:1588353794.304,y:0},
{x:1588353795.3658,y:0},
{x:1588353796.4265,y:0},
{x:1588353797.4882,y:400},
{x:1588353798.5495,y:400},
{x:1588353799.6102,y:400},
{x:1588353800.6715,y:400},
{x:1588353801.7327,y:405},
{x:1588353802.7933,y:400},
{x:1588353803.8564,y:405},
{x:1588353804.9154,y:405},
{x:1588353805.9779,y:405},
{x:1588353807.0411,y:411},
			 
			 ],
		  }
		  ]
	   },
	   options: {
		  responsive: false,

		  legend: {
			position: 'bottom',
		  labels: {
			usePointStyle: true
         }
      },
		  
		          scales: {
                    xAxes: [{
							type: 'time',
							unit: 'minute',
							time:{
								displayFormats: {
									minute: 'HH:mm'
								}
							},
							ticks: {
								source: 'data',
								autoSkip: true

							},
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Timestamp'
                            }
                        }],
                    yAxes: [{
                            display: true,
                            ticks: {
                                beginAtZero: true,
                                steps: 10,
                                stepValue: 5,
                                max: 36282.75,
								min: 0 
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'Humidity [%]'
                            }

                        }]
                },
				title: {
                    display: true,
                    text: 'Filament hub 1'
                }
		  
	   }
	});
</script>

标签： chart.js

Answer 1

主要问题是您的时间戳是 Unix 时间戳（从 开始的秒数1 January 1970 UTC）。然而， JavaScriptDate对象使用毫秒，因为1 January 1970 UTC. data因此，在分配给图表配置之前，您应该将时间戳乘以 1000 。

data.forEach((o) => o.x *= 1000); 

我也稍微改变了xAxes如下的定义：

xAxes: [{
    type: 'time',        
    time: {
      unit: 'minute',
      displayFormats: {
        minute: 'HH:mm'
      },
      tooltipFormat: 'HH:mm'
    },
    scaleLabel: {
      labelString: 'Timestamp'
    }
  }],

请在下面查看您修改后的代码。

const data = [
  {x:1588353429.6027,y:400},
  {x:1588353430.6634,y:0},
  {x:1588353431.7241,y:0},
  {x:1588353432.7848,y:0},
  {x:1588353433.8455,y:400},
  {x:1588353434.9062,y:400},
  {x:1588353435.9668,y:400},
  {x:1588353437.0274,y:400},
  {x:1588353438.0881,y:400},
  {x:1588353439.1487,y:400},
  {x:1588353440.2093,y:400},
  {x:1588353441.27,y:400},
  {x:1588353442.3307,y:400},
  {x:1588353443.3929,y:400},
  {x:1588353444.4537,y:400},
  {x:1588353445.5142,y:400},
  {x:1588353723.1543,y:415},
  {x:1588353724.216,y:0},
  {x:1588353725.2782,y:0},
  {x:1588353726.3402,y:0},
  {x:1588353727.402,y:400},
  {x:1588353728.463,y:400},
  {x:1588353793.2418,y:415},
  {x:1588353794.304,y:0},
  {x:1588353795.3658,y:0},
  {x:1588353796.4265,y:0},
  {x:1588353797.4882,y:400},
  {x:1588353798.5495,y:400},
  {x:1588353799.6102,y:400},
  {x:1588353800.6715,y:400},
  {x:1588353801.7327,y:405},
  {x:1588353802.7933,y:400},
  {x:1588353803.8564,y:405},
  {x:1588353804.9154,y:405},
  {x:1588353805.9779,y:405},
  {x:1588353807.0411,y:411}
];
data.forEach((o) => o.x *= 1000); 

new Chart(document.getElementById("hum1"), {
  type: 'scatter',
  data: {
    datasets: [{
      label: "Humidity 1",
      pointStyle: 'line',
      showLine: true,
      fill: false,
      borderColor: '#0000FF',
      pointRadius: 0,
      data: data 
    }]
  },
  options: {
    responsive: false,
    legend: {
      position: 'bottom',
      labels: {
        usePointStyle: true
      }
    },
    scales: {
      xAxes: [{
        type: 'time',        
        time: {
          unit: 'minute',
          displayFormats: {
            minute: 'HH:mm'
          },
          tooltipFormat: 'HH:mm'
        },
        scaleLabel: {
          display: true,
          labelString: 'Timestamp'
        }
      }],
      yAxes: [{
        display: true,
        ticks: {
          beginAtZero: true,
          steps: 10,
          stepValue: 5,
          min: 0
        },
        scaleLabel: {
          display: true,
          labelString: 'Humidity [%]'
        }
      }]
    },
    title: {
      display: true,
      text: 'Filament hub 1'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="hum1" style="width:600px; height:230px;"></canvas>