我正在使用图表.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

您需要将时间笛卡尔轴定义为与数据匹配的单位。默认显示格式为“小时”（例如“2PM”）。您可能还应该使用相同的格式来显示工具提示。xAxis




xAxes: [{

  type: 'time',

  time: {

    unit: 'hour',

    tooltipFormat: 'hA' 

  }

}],

请注意，图表.js使用矩.js作为时间轴的功能。因此，您应该使用图表的捆绑版本.js该版本在单个文件中包含 Moment.js。

请看一下 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>