Question

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

我有一个时间数组，其中包含这样的持续时间（分钟，秒，毫秒），我将其用作数据集：

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

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

{
  type: 'line',

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

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

我感兴趣的是比较时间，但每个解决方案似乎都使用Date对象进行了复杂处理。

Answer 1

您可以设置parser选项，以正确的格式读取时间值。

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

以下是您的示例作为解析器集的片段：

＆＃13;

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'
          }
        }
      }]
    }
  }
});

＆＃13;

<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>

＆＃13;

但是我注意到最小值是y轴的顶部，而reverse选项似乎不适用于时间轴。因此，如果您更喜欢顶部的最大值，则必须在勾选callback中自行反转。

＆＃13;

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');
            }
          }
        }
      }]
    }
  }
});

＆＃13;

<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>

＆＃13;

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

1 个答案: