我正在使用图表.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”）。您可能还应该使用相同的格式来显示工具提示。xAxisxAxes: [{&nbsp; type: 'time',&nbsp; time: {&nbsp; &nbsp; unit: 'hour',&nbsp; &nbsp; tooltipFormat: 'hA'&nbsp;&nbsp; }}],请注意，图表.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, {&nbsp; type: 'line',&nbsp; data: {&nbsp; &nbsp; labels: labels,&nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; label: '# temperature',&nbsp; &nbsp; &nbsp; data: datas,&nbsp; &nbsp; &nbsp; backgroundColor: 'rgba(255, 99, 132, 0.2)',&nbsp; &nbsp; &nbsp; borderColor: 'rgba(255, 99, 132, 1)',&nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; }]&nbsp; },&nbsp; options: {&nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; type: 'time',&nbsp; &nbsp; &nbsp; &nbsp; time: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; unit: 'hour',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tooltipFormat: 'hA'&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; beginAtZero: true&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; }&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>&nbsp;<canvas id="myChart" height="90"></canvas>