使用 Chart.js 从时间字符串中绘制单圈时间

2022-01-22 00:00:00 datetime charts javascript chart.js

我正在尝试使用 Chart.js 绘制一个显示一系列单圈时间趋势的折线图，但我正在努力将时间字符串解析为正确的格式.

I'm trying to plot a line graph with Chart.js that shows trends from a series of lap times but I'm struggling to parse the time strings into the correct format.

我有一个带有类似这样的圈数(分钟、秒、毫秒)的时间数组，我将其用作数据集:

I have a times array with lap durations like this (minutes, seconds, milliseconds) which I'm using as the dataset:

const times = ["1:32.599", "1:32.300", "1:31.000"]

在图表上绘制这些的最佳方法是什么?根据文档，Chart.js 支持 时间 轴使用矩.js 但它似乎没有解析这些字符串，大概是因为它们不是日期，因为它们是持续时间而不是特定的时间点.

What's the best approach to plotting these on a chart? According to the docs Chart.js supports Time axes using moment.js but it doesn't seem to parse these strings, presumably since they aren't dates, since they are durations rather than a specific point in time. 

{
  type: 'line',

  data: {
    labels: [] // list of races,
    datasets: [{
        label: "Best Lap",
        data: times,
      }]
    },

  options: {
    scales: {
      yAxes: [{
        type: 'time',
      }]
    }
  }
}

我感兴趣的只是比较时间，但每个解决方案似乎都使​​用 Date 对象令人费解.

All I'm interested in doing is comparing the times but every solution seems convoluted using Date objects.

推荐答案

你可以设置parser 选项以正确格式读取时间值.

You can set the parser option to read the time values in the correct format.

 yAxes: [{
    type: 'time',
    time: {
      parser: 'm:s.SSS'
    }
  }]

以下是您的示例，其中包含解析器集:

Below is your sample as a snippet with the parser set:

const times = ["1:32.599", "1:32.300", "1:31.000"];
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['1', '2', '3'], // list of races,
    datasets: [{
      label: "Best Lap",
      fill: false,
      data: times,
    }]
  },
  options: {
    scales: {
      yAxes: [{
        type: 'time',
        time: {
          parser: 'm:s.SSS',
          unit: 'seconds',
          unitStepSize: 5,
          min: '1:0.0',
          max: '2:0.0',
          displayFormats: {
            'seconds': 'm.s'
          }
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="myChart" width="200" height="200"></canvas>

但是我注意到最小值是 y 轴的顶部和 reverse 选项似乎不适用于时间轴.因此，如果您更喜欢顶部的最大值，您必须自己在刻度中反转它 回调.

However I've noticed that the min value is a the top of the y-axis and the reverse option doesn't seem to work with a time axis. So if you prefer the max value at the top you have to reverse it yourself in the tick callback.

const times = ["1:32.599", "1:32.300", "1:31.000"];
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['1', '2', '3'], // list of races,
    datasets: [{
      label: "Best Lap",
      fill: false,
      data: times,
    }]
  },
  options: {
    scales: {
      yAxes: [{
        type: 'time',
        time: {
          parser: 'm:s.SSS',
          unit: 'seconds',
          unitStepSize: 5,
          min: '1:0.0',
          max: '2:0.0',
          displayFormats: {
            'seconds': 'm.s'
          }
        },
        ticks: {
          callback: function(value, index, values) {
            //Ticks reverse does not work with time axes so we have to revert in this callback
            if (values[values.length - index] != undefined) {
              return moment(values[values.length - index].value).format('m.ss');
            }
          }
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="myChart" width="200" height="200"></canvas>

相关文章