ChartJS： xAxis Labels 的完整日期？

Question

我一直在制作时间刻度折线图，注意到当所有数据点足够靠近时，xAxis标签会自动转换为时间。我尝试了不同的xAxis时间单位，但没有成功。

这是一个简单的代码代码示例，其中xAxis标签是按小时的。如果您将时刻更改为三月而不是四月，xAxis标签是按日期的。有没有办法强制xAxis标签始终为日期和时间？

xAxes: [{
                    type: 'time',
                    time: {
                        parser: timeFormat,
                        // unit: 'day',
                        // unit: 'hour',
                        tooltipFormat: 'll HH:mm'
                    },

https://codepen.io/ccwakes/pen/abvzewW

谢谢

Answer 1

您可以根据Chart.js留档的显示格式使用属性time.displayFormats。有关允许的格式字符串，请参阅Moment.js。

time: {
  unit: 'hour',
  displayFormats: {
    hour: 'MMM DD HH:mm'
  },
  tooltipFormat: 'MMM DD HH:mm'
}

请在下面查看您修改后的代码。

js lang-js prettyprint-override">new Chart(document.getElementById('canvas'), {
  type: 'line',
  data: {
    datasets: [{
      label: 'Dataset 1',
      backgroundColor: 'red',
      borderColor: 'red',
      fill: false,
      data: [
        { x: '2020-04-10 13:00', y: 60 }, 
        { x: '2020-04-12 06:00', y: 100 }, 
        { x: '2020-04-12 13:00', y: 5 }
      ],
    }, {
      label: 'Dataset 2',
      backgroundColor: 'blue',
      borderColor: 'blue',
      fill: false,
      data: [
        { x: '2020-04-10 13:00', y: 45 }, 
        { x: '2020-04-11 13:00', y: 65 }, 
        { x: '2020-04-12 06:00', y: 80 }, 
        { x: '2020-04-12 13:00', y: 65 }
      ]
    }]
  },
  options: {
    title: {
      text: 'Time Scale'
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'hour',
          displayFormats: {
            hour: 'MMM DD HH:mm'
          },
          tooltipFormat: 'MMM DD HH:mm'
        },
        scaleLabel: {
          display: true,
          labelString: 'Date'
        }
      }],
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Value'
        }
      }]
    },
  }
});

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