Chartjs不显示定时数据答案

【问题标题】：Chartjs not displaying timed dataChartjs不显示定时数据
【发布时间】：2020-05-15 22:58:02
【问题描述】：

我是chartjs的新手，但是在谷歌搜索之后，我仍然无法弄清楚，为什么我没有得到数据图表。我正在使用“解析器”属性来解析字符串并提供具有最小/最大值的预期显示格式，但没有显示数据

    var ctx = document.getElementById("canvas");

    var chart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
    labels:  ["labelA", "labelB"],
    datasets: [{
        data: ["10:32", "00:12"],
        borderWidth: 1
    }]
    },
    options: {
    responsive: 'true',
    scales: {
        yAxes: [{
        ticks: {
            beginAtZero: true
        }
        }],
        xAxes: [{
        type: 'time',
        time: {
            parser: 'm:s',
            unit: 'minute',
            unitStepSize: 1,
            min: '00:00',
            max: '20:00',
            displayFormats: {
            'minute': 'mm:ss'
            }
        }
        }]
    }
    }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="canvas" height="100"></canvas>

【问题讨论】：

标签： javascript chart.js momentjs

【解决方案1】：

在我看来，您的代码看起来不错，应该可以工作。然而，从语义上讲，时间线的使用并不完全正确。您的条形实际上代表持续时间。

请查看您修改后的代码，该代码现在可以使用持续时间而不是时间：

function asSeconds(value) {
  const tokens = value.split(':');
  return Number(tokens[0]) * 60 + Number(tokens[1]);
}

function format(seconds) {
  return moment.utc(seconds * 1000).format("mm:ss");
}

new Chart('canvas', {
  type: 'horizontalBar',
  data: {
    labels: ['labelA', 'labelB'],
    datasets: [{
      label: 'My Dataset',
      data: ['10:32', '00:12'].map(v => asSeconds(v)),
      backgroundColor: ['red', 'blue'],
      borderWidth: 1
    }]
  },
  options: {
    responsive: 'true',
    scales: {
      xAxes: [{
        ticks: {
          min: 0,
          stepSize: 60,
          max: asSeconds('20:00'),
          callback: s => format(s)
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: (tooltipItem, data) => format(data.datasets[0].data[tooltipItem.index])
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="80"></canvas>

【讨论】：