时间图chart.js [英] Time graphs chart.js

问题描述

我正在学习如何使用 chart.js ，我想要一个图表，以"h?h:mm"格式显示一天中不同时段(x轴)的随机值.

I'm learning how to use chart.js and I want a graph that displays random values in different hours of the day (x axis) with format "h?h:mm".

在x轴上，我希望固定一个小时，从12 AM(0:00)开始到8 AM(8:00)结束.

In the x axis I want a fixed step of one hour, starting at 12 AM (0:00) and ending at 8 AM (8:00).

例如，数据(例如，x = 4:45，y = 67)对应于x刻度(在4:00和5:00之间是3/4)

And the data, for example (x = 4:45, y = 67) in te corresponding x tick (3/4 between 4:00 and 5:00)

我尝试了以下操作:

var cfg = {
  type: 'line',
  data: {
    labels: ['00:00', '01:35', '02:20', '03:05', '04:07', '04:57', '05:25', '06:08', '07:10'],
    datasets: [{
      data: [
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45)
      ],
      label: "Improved ETA",
      borderColor: "#e67e22",
      borderWidth: 2,
      fill: false,
      lineTension: 0
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    title: {
      display: true,
      text: 'Improved ETA',
      fontSize: 14,
      fontFamily: 'Arial',
      fontColor: '#000'
    },
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        ticks: {
          padding: 12
        },
        gridLines: {
          color: 'rgba(0, 0, 0, 0.06)',
          zeroLineColor: 'rgba(0, 0, 0, 0.06)',
          drawTicks: false
        }
      }],
      yAxes: [{
        ticks: {
          suggestedMin: 0,
          suggestedMax: 80,
          padding: 12
        },
        scaleLabel: {
          display: true,
          labelString: 'mins'
        },
        gridLines: {
          color: 'rgba(0, 0, 0, 0.06)',
          zeroLineColor: 'rgba(0, 0, 0, 0.06)',
          drawTicks: false
        }
      }]
    }
  }
};

window.onload = function() {
  var ctx = document.getElementById('foo').getContext('2d');
  window.myLine = new Chart(ctx, cfg);
};

<div style="width: 600px; height: 400px;">
  <canvas id="foo"></canvas>
</div>

但不是我想要的，因为X轴刻度线采用标签(x数据)的值.更糟糕的是，刻度之间的间隔始终是相同的(例如，从10:30到10:40的间隔与8:00到9:00相同).

But is not what I want, because the X axis ticks take the values of the labels (x data). And what is even worse the space between ticks is always the same (e.g from 10:30 to 10:40 there is the same space as 8:00 to 9:00).

PD:由于时间图，我还阅读了有关使用moment.js chart.js包的信息:

PD: I also have read about using moment.js chart.js bundle because of the time graph: https://www.chartjs.org/samples/latest/scales/time/line.html

推荐答案

首先，您应该省略 labels ，但将数据定义为

First you should omit labels but define your data as individual points, where each element has a t and an y property.

data: [
  { t: '4:45', y: 67 },
  { t: '6:12', y: 45 },
  { t: '7:33', y: 56 },
],

使用上述数据， xAxes.时间 选项必须定义如下:

With above data, xAxes.time option will have to be defined as follows:

time: {
  parser: 'H:mm',
  unit: 'hour',
  stepSize: 1,
  displayFormats: {
    hour: 'H:mm'
  },
  tooltipFormat: 'H:mm'
},

此外，您可以定义 xAxis.ticks 选项如下:

Further you can define the xAxis.ticks option as follows:

ticks: {
  min: '0:00', 
  max: '8:00' 
}

您已经注意到，Chart.js内部使用 Moment.js 来实现时间轴.因此，您应该使用捆绑版本在单个文件中包含Moment.js的Chart.js.

As you already noticed, Chart.js internally uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.

请查看下面的可运行代码，并查看其工作原理.

Please take a look at the runnable code below and see how it works.

new Chart('myChart', {
  type: 'line',
  data: {
    datasets: [{
      label: 'My Dataset',      
      data: [
        { t: '4:45', y: 67 },
        { t: '6:12', y: 45 },
        { t: '7:33', y: 56 },
      ],
      borderColor: 'blue',
      fill: 'false',
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          parser: 'H:mm',
          unit: 'hour',
          stepSize: 1,
          displayFormats: {
            hour: 'H:mm'
          },
          tooltipFormat: 'H:mm'
        },
        ticks: {
          min: '0:00', 
          max: '8:00' 
        }
      }]      
    }
  }
});

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

这篇关于时间图chart.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！