时间戳

首页 > 解决方案 > 如何在 x 轴上显示半小时刻度

chart.js - 如何在 x 轴上显示半小时刻度

问题描述

我有过去 36 小时的数据记录。这些应该显示在我的 Chart.js -Chart 中，以便每 30 分钟有一个刻度。如果数据集落在 xx:45，则不应四舍五入到 30 分钟间隔。

我感觉我还没有正确理解刻度和单位这两个术语。我想每 30 分钟有一条垂直线，但数据集应该在 x 轴上自由分布。

{
...
   type: "time",
   time: {
       unit: "minute",
       displayFormats: {
           minute: "HH:mm"
       },
       stepSize: 30
   },
   gridLines: {
       drawOnChartArea: true,
       color: ["transparent", ...Array(Math.max(0, countDays(bedCapacities) - 2)).fill("#DFF2FA"), "#303740"],
       zeroLineColor: "#DFF2FA",
       drawBorder: true,
       tickMarkLength: -20
   },
   ticks: {
       fontColor: "#CCCCCC",
       fontSize: 11,
       fontStyle: "bold",
       labelOffset: 20,
       source: "auto"
}

标签： chart.js

解决方案

这是我的设置，使用 v3.6.0。你可以忽略y轴，让你知道我的作品。

scales: {
        x: {
          type: 'time',
          time: {
            unit: 'minute',
            stepSize: 30
          },
          min: tradingDuration().openTime,
          max: tradingDuration().closeTime
          // title: {
          //   display: true,
          //   text: 'Date'
          // }
        },
        y: {
          min: limitDown,
          max: limitUp
        }
      },

推荐阅读