如何通过Chart.js在x轴显示特定的时间标签？

Question

我每天都在收集温度和相对湿度的数据。我想用 Chart.js 显示这些数据，目前可以显示我的所有数据。但是我想知道如何通过Chart.js在x轴上显示特定的时间标签？

如您所见，x 轴上的时间标签太“拥挤”了。我搜索了 Chart.js 文档并尝试添加 autoskip 和 autoskippadding 但它未能显示目标时间标签。

    xAxes: [{
      ticks: {
        autoSkip: true,
        autoSkipPadding: 60
      }
    }]

因此，由于这些数据是每分钟收集一次，而且数据量非常大，如何才能仅在 x 轴上显示特定时间标签（00:00，01:00, 02:00...等等)这样可以防止太“拥挤”吗？非常感谢任何建议，谢谢！

Answer 1

您可以将 x-axis 定义为 time cartesian axis，如下所示：

scales: {
  x: {
    type: 'time',
    time: {
      parser: 'HH:mm:ss',
      unit: 'hour',
      displayFormats: {
        hour: 'HH:mm'
      },
      tooltipFormat: 'D MMM YYYY - HH:mm:ss'
    }
  }
}

请查看下面您修改后的代码，看看它是如何工作的。此代码现在使用 chartjs-adapter-moment together with moment. Feel free to use a different adapter.

$(function() {
  getXlsxData();
});

function getXlsxData() {
  var xlsxUrl =
    "https://script.google.com/macros/s/AKfycbw9PQRojIml3x5gnMMiKihnTh9aLODd86ankhoz0ETIu0a8tcVh1ZIc4R08hlw8nHF8pA/exec?id=1Bvzqyu_NvPdL-zsOShbKF5me2bjtVVWQCK9MDA2KW58&sheet=Today"
  var xlsxData = $.getJSON(xlsxUrl, function(data) {
    $.each(data.Today, function(i, el) {
      labels.push(el.Time);
      TodayTemperature.push(el.CurrentTemp);
      TodayRH.push(el.CurrentRH);
    });
    load_chart();
  });
}
var labels = [],
  TodayTemperature = [],
  TodayRH = []

function load_chart() {
  var myChart = new Chart('alldata', {
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
        label: 'Temperature（°C）',
        fill: false,
        data: TodayTemperature,
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132, 0.8)',
        borderWidth: 1,
        radius: 0,
      }, {
        label: 'Relative Humidity （%）',
        fill: false,
        data: TodayRH,
        backgroundColor: 'rgb(255, 159, 64)',
        borderColor: 'rgb(255, 159, 64, 0.8)',
        hidden: true,
        borderWidth: 1,
        radius: 0,
      }, ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        position: 'bottom',
      },
      layout: {
        padding: {
          top: 35,
          right: 15,
        }
      },
      scales: {
        x: {
          type: 'time',
          time: {
            parser: 'HH:mm:ss',
            unit: 'hour',
            displayFormats: {
              hour: 'HH:mm'
            },
            tooltipFormat: 'D MMM YYYY - HH:mm:ss'
          }
        }
      }
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
<canvas id="alldata" height="200"></canvas>

如何通过Chart.js在x轴显示特定的时间标签？

How to display specific time label in x-axis by Chart.js?

javascript

charts

chart.js