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

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

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

----------------------------------------------------
5:00   15:00   01:00   15:00   11:00   21:00   07:00

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

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


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

disbfnqx

disbfnqx1#

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

var last_date = ''; // global var outside config

      // Within config.scales.x.ticks add this callback:

      callback: function(val, index, ticks) {
        // Get value of tick (already formatted by time axis option)
        tick = this.getLabelForValue(val);

        // Extract parts of tick using regex 
        date = tick.match(/[a-z]+ \d+/i)[0];
        time = tick.match(/\d+:\d+/i)[0];
        ampm = tick.match(/[a-z]\.[a-z]\./i)[0];
        
        
        if (last_date !== date) {   // Show Date
           last_date = date
           return date + " " + time + " " + ampm
        } else {                    // Don't show
           return time + " " + ampm
        }
       }

字符串

相关问题