Chart.js -在X轴上设置日期格式

q5iwbnjs  于 2022-12-23  发布在  Chart.js
关注(0)|答案(1)|浏览(232)

我使用的是chart.js版本3.9.1
我的X轴数据是日期和时间格式,例如2022-12-16 08:18:58
我希望能够保留完整的时间戳,以便在悬停时可以看到所有详细信息,但对于x轴上的显示,最好只显示时间部分,例如08:18
我试图减少一点杂乱,同时减少x轴上的标签所占用的垂直空间。
可以像这样格式化x轴吗?我该怎么做?
目前我的图表如下所示:

ejk8hzay

ejk8hzay1#

答案是我需要使用chart.bundle.js,其中显然包含moment.js,它有助于日期/时间解析。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>

我从ChartJS - format datetime X axis when displaying data from MySql table找到这个
建议的帖子(对原始问题的评论)然后允许我更精确地控制格式。
所以我最后

scales: {
   xAxes: [{
      type: 'time',
      time: {
        unit: 'hour',
        displayFormats: {
           'hour': 'HH:MM',
        }
      }
   }],
},  // end scales

我只能找到chart.bundle.js版本2.9.3之前的版本,所以我确实尝试过分别包含chart.js和moment.js,但无法使其工作。我将花更多的时间来解决这个问题,以便使用chart.js的更高版本。尽管如此,moment.js看起来是"项目结束",所以我不确定是否有替代方案,也不确定如何使用chart.js--但这是另一个问题
谢谢你的帮助
更新:这是chart.js v4.1.1解决方案

<script src="https://cdn.jsdelivr.net/npm/chart.js@^4"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

秤配置:

scales: {
       x: {
          type: 'time',
          time: {
            unit: 'hour',
            displayFormats: {
               'hour': 'HH:MM',
            }
          }
       },
    },  // end scales

相关问题