如何在 Chart.js v2 中格式化 x 轴时间刻度值

Posted 2023-02-16

【中文标题】如何在 Chart.js v2 中格式化 x 轴时间刻度值

【英文标题】：How to format x-axis time scale values in Chart.js v2

【发布时间】：2016-08-31 21:52:07

【问题描述】：

当我通过options.scales.xAxes.time.tooltipFormat 将鼠标悬停在折线图上的数据点上时，我能够格式化工具提示，但对于 x 轴刻度标签，我似乎无法这样做。我的data.labels 是一个矩对象数组。它们显示为 "MMM DD, YYYY"（例如 2012 年 2 月 23 日），但我想放弃年份。

【问题讨论】：

查看此代码笔codepen.io/shivabhusal/pen/ayyVeL?editors=1010

【参考方案1】：

只需将所有选定时间单位的displayFormat设置为MMM DD

options: 
  scales: 
    xAxes: [
      type: 'time',
      time: 
        displayFormats: 
           'millisecond': 'MMM DD',
           'second': 'MMM DD',
           'minute': 'MMM DD',
           'hour': 'MMM DD',
           'day': 'MMM DD',
           'week': 'MMM DD',
           'month': 'MMM DD',
           'quarter': 'MMM DD',
           'year': 'MMM DD',
        
        ...

请注意，我已将所有单元的显示格式设置为MMM DD。如果您可以控制数据范围和图表大小，更好的方法是强制一个单位，就像这样

options: 
  scales: 
    xAxes: [
      type: 'time',
      time: 
        unit: 'day',
        unitStepSize: 1,
        displayFormats: 
           'day': 'MMM DD'
        
        ...

---

小提琴 - http://jsfiddle.net/prfd1m8q/

【讨论】：

我相信你的第二个代码 sn-p，unit 和 unitStepSize 应该包含在 time 对象中。 Updated jsfiddle。我尝试进行编辑，但由于偏离了您发帖的初衷而被拒绝...

谢谢@tchan！已更正。

知道如何将日期（月份）翻译成英语以外的其他语言吗？

如果 var 是一个字符串（例如 '2021-03-10'）而不是像 moment 时间对象这样易于管理的对象，您最好告诉 jschart 如何通过添加 @ 来解析该字符串987654334@ 到time 方法。总的来说，脚本看起来像 type: 'time', time: parser: 'YYYY-MM-DD', unit: 'day', unitStepSize: 1, displayFormats: 'day': 'MMM DD',

【参考方案2】：

根据 Chart js 文档页面 tick configuration section。您可以使用回调函数格式化每个刻度的值。例如，我想将显示日期的区域设置更改为始终为德语。在轴选项的刻度部分

ticks: 
    callback: function(value)  
        return new Date(value).toLocaleDateString('de-DE', month:'short', year:'numeric'); 
    ,
,

【讨论】：

我认为 IE11 使用该解决方案存在问题，它将所有日期显示为“无效日期”，而 Chrome 和 Firefox 工作正常。

编辑： 似乎是new Date实际上并没有工作，因为我在Feb 2017之类的字符串上这样做。而 IE 似乎并没有那么享受。

【参考方案3】：

您可以在将日期添加到数组之前对其进行格式化。我就是这样做的。我用过 AngularJS

//将日期转换为标准格式

var dt = new Date(date);

//只取日期和月份并将它们推送到您的标签数组中

$rootScope.charts.mainChart.labels.push(dt.getDate() + "-" + (dt.getMonth() + 1));

在图表演示中使用此数组

【参考方案4】：

我有一个不同的用例，我想要基于图表中数据的开始时间和结束时间之间的时间长度不同的格式。我发现这是最简单的方法

    xAxes = 
        type: "time",
        time: 
            displayFormats: 
                hour: "hA"
            
        ,
        display: true,
        ticks: 
            reverse: true
        ,
        gridLines: display: false
    
    // if more than two days between start and end of data,  set format to show date,  not hrs
    if ((parseInt(Cookies.get("epoch_max")) - parseInt(Cookies.get("epoch_min"))) > (1000*60*60*24*2)) 
        xAxes.time.displayFormats.hour = "MMM D";
    

【讨论】：

你好@Rob Raymond！你能不能也看看我的问题***.com/questions/62086503/…。我有类似的问题，但无法解决