如何在 Chartjs 中通过 moment.js 使用字符串时间数据

Question

我有一个单圈时间数组，如下所示的字符串：

['00:01:41.413000', '00:01:38.790000', '00:01:38.917000', '00:01:38.470000', '00:01:37.906000', '00:01:37.997000', '00:01:37.774000', '00:01:37.669000', '00:01:37.890000', '00:01:37.739000', '00:01:37.593000', '00:01:37.778000', '00:01:37.701000', '00:01:37.707000', '00:01:37.826000', '00:01:37.851000', '00:01:37.987000', '00:01:38.068000', '00:01:38.017000', '00:01:38.123000', '00:01:38.172000', '00:01:38.192000', '00:01:38.231000', '00:01:38.399000', '00:01:38.641000', '00:01:38.575000', '00:01:38.927000', '00:01:39.265000', '00:01:47.873000', '00:01:58.989000', '00:01:36.688000', '00:01:36.824000', '00:01:37.022000', '00:01:36.871000', '00:01:37.100000', '00:01:36.968000', '00:01:36.984000', '00:01:37.071000', '00:01:36.957000', '00:01:36.962000', '00:01:37.380000', '00:01:36.865000', '00:01:36.582000', '00:01:36.414000', '00:01:36.618000', '00:01:36.500000', '00:01:36.628000', '00:01:36.739000', '00:01:36.602000', '00:01:37.055000', '00:01:37.132000', '00:01:36.842000', '00:01:36.843000', '00:01:36.748000', '00:01:36.427000', '00:01:36.387000', '00:01:36.402000', '00:01:36.171000', '00:01:35.967000', '00:01:36.343000', '00:01:36.013000', '00:01:36.931000']

我想使用 Chart.js 和 moment.js 将此数据用作线性图表的图形数据，而不必将其转换为毫秒等。我希望数据的格式为“mm:ss.SSS”在图表上。我不知道如何使用 Chart.js 中的时刻和时间笛卡尔解析器来做到这一点

我能找到的唯一相关资源是 Chartjs 的过时版本。我尝试过将字符串转换为毫秒时刻并设置：

time: {
  parser: "mm:ss.SSS",
  unitStepSize: 5,

  displayFormats: {
    seconds: "m.s",
   },
},

在 y 轴上显示数据，但轴上有 0:00。我的不带时间解析器的完整图表如下：

  new Chart(ctx, {
    type: "line",
    data: {
      // Generates an array from 1 to total laps to label the axis
      labels: Array.from({ length: totalLaps }, (_, i) => i + 1),
      datasets: datasets,
    },
    options: {
      scales: {
        x: {
          title: {
            display: true,
            text: "Lap number",
            padding: {
              top: 24,
            },
          },
        },
        y: {
          title: {
            display: true,
            text: "Lap time",
            padding: {
              bottom: 24,
            },
          },
        },
      },

      // Styles the tooltip hover

      plugins: {
        tooltip: {
          enabled: true,
          backgroundColor: "rgba(0, 0, 0, 0.7)",
          titleColor: "#ffffff",
          borderColor: "rgba(255, 255, 255, 0.5)",
          borderWidth: 1,
          padding: 16,

          titleFont: {
            size: 16,
          },
          bodyFont: {
            size: 16,
          },

          titleAlign: "center",
          titleMarginBottom: 8,
          cornerRadius: 8,
          displayColors: false,

          useHTML: true,

          callbacks: {
            title: (tooltipItems) => `Lap ${tooltipItems[0].label}`,
            label: (tooltipItem) => {
              const dataset = datasets[tooltipItem.datasetIndex];
              const value = tooltipItem.raw;

              const lapCompound = dataset.laps[tooltipItem.dataIndex][1];

              return `${dataset.label}: ${value} [${lapCompound}]`;
            },
          },
        },
      },
    },
  });```

Answer 1

也许您确实需要转换为 ms，但仅将其格式化为 mm:ss.SSS 以便显示。要格式化刻度，您可以使用

ticks.callback

选项 (docs)。要格式化工具提示，您可以使用类似的方法，使用

callbacks.label

选项 (docs)

结果应如下所示：

function timeToMs(timeString) {
  // convert time string to ms
  // use AI for code
}

function formatMs(ms) {
  // convert ms to mm:ss:SSS
  // use AI for code
}


new Chart(ctx, {
  type: "line",
  data: {
    // ...
  },
  options: {
    scales: {
      y: {
        ticks: {
          callback: function(value) {
            return formatMs(value);
          }
        }
      },
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            return `${formatMs(context.parsed.y)}`;
          }
        }
      }
    }
  },
});