[我正在使用chart.js，我将时间值发送给我的api作为时间戳记，知道我需要将其以日期格式显示在图表中

Question

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
   type: 'line',
   data: {
       labels: {{ labels}},//labels are the time values                         
       datasets: [{
           label: '# temperature',
           data: {{ datas}},
           backgroundColor: [
               'rgba(255, 99, 132, 0.2)',
               'rgba(54, 162, 235, 0.2)',
               'rgba(255, 206, 86, 0.2)',
               'rgba(75, 192, 192, 0.2)',
               'rgba(153, 102, 255, 0.2)',
               'rgba(255, 159, 64, 0.2)'
           ],
           borderColor: [
               'rgba(255, 99, 132, 1)',
               'rgba(54, 162, 235, 1)',
               'rgba(255, 206, 86, 1)',
               'rgba(75, 192, 192, 1)',
               'rgba(153, 102, 255, 1)',
               'rgba(255, 159, 64, 1)'
           ],
           borderWidth: 1
       }]
   },
   options: {
       scales: {
           yAxes: [{
               ticks: {
                   beginAtZero: true
               }
           }]

       }
   }
});

Answer 1

您需要将xAxis定义为具有与数据匹配的单位的time cartesian axis。 “小时”的默认display format为“ hA”（例如“ 2PM”）。您可能还应该使用相同的格式来显示工具提示。

xAxes: [{
  type: 'time',
  time: {
    unit: 'hour',
    tooltipFormat: 'hA' 
  }
}],

[请注意，Chart.js使用Moment.js作为时间轴的功能。因此，您应该使用在单个文件中包含Moment.js的Chart.js的bundled version。

请查看belo可运行的代码段。

const labels = [1585725538000, 1585729616000, 1585742414000, 1585812498000, 1585842536000, 1585918521000, 1585938665000, 1585948685000];
const datas = [15, 16, 15, 17, 12, 13, 11, 12];

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: '# temperature',
      data: datas,
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255, 99, 132, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'hour',
          tooltipFormat: 'hA' 
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="myChart" height="90"></canvas>