Chart.JS 隐藏原始 X 轴，仅显示截断时间标签

在 Chart.JS 中隐藏原始 X 轴，只显示截断的时间标签

问题

在 Chart.JS 中使用 options.scales.x.ticks 和 options.scales.x.time 配置 X 轴时，图表显示截断的时间标签，例如仅显示小时，但原始 X 轴也同时显示，这会导致图表上出现多余的信息。

解决方案

要隐藏原始 X 轴，需要在 options 对象中设置 display 属性，并将其设置为 false：

options: {
  scales: {
    xAxis: {
      display: false, // 隐藏原始 X 轴
      ...
    }
  }
}

步骤详解

1. 在 Chart.JS 配置对象中找到 options.scales.xAxis 部分。
2. 添加 display 属性并将其设置为 false。

效果

应用此更改后，原始 X 轴将被隐藏，只留下截断的时间标签，从而使图表更加简洁。

示例代码

以下是一个示例代码，展示了如何在 Chart.JS 中隐藏原始 X 轴：

import { Chart } from 'chart.js';

const canvas = document.getElementById('myChart');

const data = {
  labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
  datasets: [{
    label: 'My Dataset',
    data: [10, 15, 12, 18, 15, 10, 12, 16]
  }]
};

const options = {
  scales: {
    xAxis: {
      type: 'time',
      display: false,
      time: {
        unit: 'hour',
        tooltipFormat: 'HH:mm'
      }
    }
  }
};

const chart = new Chart(canvas, {
  type: 'line',
  data: data,
  options: options
});

结论

通过设置 display 属性，可以轻松地在 Chart.JS 中隐藏原始 X 轴，从而创建更简洁和有意义的图表。这对于需要显示截断时间标签的应用程序非常有用，例如仅显示小时或分钟。

常见问题解答

1. 为什么我的 X 轴仍然显示？

• 确保已正确设置 display: false 属性。
• 检查是否使用了其他图表库或插件，它们可能会覆盖 Chart.JS 的设置。

2. 如何更改截断时间标签的格式？

• 使用 time.tooltipFormat 选项来设置截断时间标签的格式。
• 例如，HH:mm 将显示为 "00:00"，而 h:mm a 将显示为 "12:00 AM"。

3. 如何隐藏 Y 轴？

• 使用 options.scales.yAxis.display 属性来隐藏 Y 轴。

4. 如何添加网格线？

• 使用 options.scales.xAxis.grid 和 options.scales.yAxis.grid 属性来添加网格线。

5. 如何添加标题？

• 使用 options.scales.xAxis.title 和 options.scales.yAxis.title 属性来添加标题。