时间图表.js

Question

我正在学习如何使用图表.js并且我想要一个图表，该图形以格式为“h？h：mm”在一天中的不同时间（x轴）显示随机值。

在 x 轴中，我想要一个小时的固定步骤，从上午 12 点 （0：00） 开始，到上午 8 点（8：00）结束。

和数据，例如（x=4:45，y=67）在te对应的x刻度（4:00和5:00之间的3/4）

我尝试了以下方法：

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的空间相同）。

PD：我也读过关于使用这个时刻的文章。js图表。js包，因为时间图：https://www.chartjs.org/samples/latest/scales/time/line.html

Answer 1

首先，您应该省略＜code＞标签和一个＜code＞y

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

对于上述数据，必须按如下方式定义 xAxes.time 选项：

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

此外，您还可以定义＜code＞xAxis。勾选选项，如下所示：

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

正如你已经注意到的，图表。js内部使用了这个时刻。js的时间轴功能。因此，您应该使用图表的捆绑版本。js，包括力矩。js在一个文件中。

请看看下面的可运行代码，看看它是如何工作的。

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

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