javascript - Plot lap times with Chart.js from time strings - Stack Overflow

admin管理员组

文章数量:1405502

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

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',
      }]
    }
  }
}

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

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

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',
      }]
    }
  }
}

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

• javascript
• datetime
• charts
• chart.js

Share Improve this question Follow asked Jan 19, 2018 at 18:32 SmCTwelveSmCTwelve 5311 silver badge77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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./ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="myChart" width="200" height="200"></canvas>

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./ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="myChart" width="200" height="200"></canvas>

本文标签： javascriptPlot lap times with Chartjs from time stringsStack Overflow