我使用的是chart.js版本3.9.1我的X轴数据是日期和时间格式,例如2022-12-16 08:18:58我希望能够保留完整的时间戳,以便在悬停时可以看到所有详细信息,但对于x轴上的显示,最好只显示时间部分,例如08:18我试图减少一点杂乱,同时减少x轴上的标签所占用的垂直空间。可以像这样格式化x轴吗?我该怎么做?目前我的图表如下所示:
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
1条答案
按热度按时间ejk8hzay1#
答案是我需要使用chart.bundle.js,其中显然包含moment.js,它有助于日期/时间解析。
我从ChartJS - format datetime X axis when displaying data from MySql table找到这个
建议的帖子(对原始问题的评论)然后允许我更精确地控制格式。
所以我最后
我只能找到chart.bundle.js版本2.9.3之前的版本,所以我确实尝试过分别包含chart.js和moment.js,但无法使其工作。我将花更多的时间来解决这个问题,以便使用chart.js的更高版本。尽管如此,moment.js看起来是"项目结束",所以我不确定是否有替代方案,也不确定如何使用chart.js--但这是另一个问题
谢谢你的帮助
更新:这是chart.js v4.1.1解决方案
秤配置: