Chart.js在X轴刻度上显示日期,但仅当日期与前一个刻度不同时

jjjwad0x  于 2023-08-05  发布在  Chart.js
关注(0)|答案(1)|浏览(201)

我正在尝试使用Chart.js(版本4.2.1)构建一个带有时间刻度的折线图。
在这个尺度上,我让Chart.js解析要显示的刻度。
这一切工作正常,但现在我想通过显示滴答的实际日期来提高此图表的可用性。只有当报价与前一报价在不同的日期时,才应显示此信息
例如:Example chart
在这个示例中,X轴只显示滴答的小时部分,这使得用户很难理解滴答发生在哪一天。将完整日期添加到每个刻度将使图表过于拥挤。
为了更清楚地说明我想要实现的目标:而不是将X轴刻度渲染为:

  1. ----------------------------------------------------
  2. 5:00 15:00 01:00 15:00 11:00 21:00 07:00

字符串
我想把它们呈现为:

  1. ----------------------------------------------------
  2. 5:00 15:00 01:00 15:00 11:00 21:00 07:00
  3. Jan 1 Jan 2. Jan 3 Jan 4


我尝试更改时间刻度的displayFormats,但这会更改所有刻度的格式。我只是想改变刻度,当一个新的日期开始在规模上。

disbfnqx

disbfnqx1#

使用ticks.callback,如下所示。
举例来说:

  1. var last_date = ''; // global var outside config
  2. // Within config.scales.x.ticks add this callback:
  3. callback: function(val, index, ticks) {
  4. // Get value of tick (already formatted by time axis option)
  5. tick = this.getLabelForValue(val);
  6. // Extract parts of tick using regex
  7. date = tick.match(/[a-z]+ \d+/i)[0];
  8. time = tick.match(/\d+:\d+/i)[0];
  9. ampm = tick.match(/[a-z]\.[a-z]\./i)[0];
  10. if (last_date !== date) { // Show Date
  11. last_date = date
  12. return date + " " + time + " " + ampm
  13. } else { // Don't show
  14. return time + " " + ampm
  15. }
  16. }

字符串

展开查看全部

相关问题