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

Question

我能够通过options.scales.xAxes.time.tooltipFormat格式化当我在线图上悬停在数据点上时显示的工具提示，但似乎无法对x轴刻度标签进行格式化。我的data.labels是由moment对象组成的数组。它们显示为"MMM DD, YYYY"（例如Feb 23, 2012），但我想去掉年份。

- wetjosh

---

请查看此CodePen https://codepen.io/shivabhusal/pen/ayyVeL?editors=1010 - Shiva

Answer 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。如果您可以控制数据范围和图表大小，则更好的方法是强制使用单位，如下所示：

请注意，本人已将所有单位的显示格式设置为 MMM DD。如果您能够掌控数据范围和图表大小，更好的方法是强制使用单位，例如：

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

---

Fiddle - http://jsfiddle.net/prfd1m8q/

---

- potatopeelings

---

我相信在你的第二个代码片段中，unit和unitStepSize应该被包含在time对象内。更新的jsfiddle。我尝试进行了编辑，但是因为偏离了您发布时的原意而被拒绝了。 - tchan

谢谢@tchan！已更正。 - potatopeelings

有没有想法如何将日期（月份）翻译成英语以外的其他语言？ - Caio Mar

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

Answer 2

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

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

- Moustafa Shama

---

我认为在IE11中存在一个问题，该解决方案将所有日期显示为“无效日期”，而Chrome和Firefox则正常工作。 - Cedric

编辑：实际上，似乎是new Date没有起作用，因为我正在对一个字符串进行操作，例如“Feb 2017”。而IE似乎并不喜欢这样。 - Cedric

Answer 3

我有一个不同的用例，我希望根据图表中数据的起始时间和结束时间之间的时间跨度来使用不同的格式。我发现这是最简单的方法。

最初的回答：

let 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

---

你好 @Rob Raymond！你能否也看一下我的问题 https://stackoverflow.com/questions/62086503/how-to-format-x-axis-based-on-how-long-between-start-and-end-time-of-data-in-cha 吗？我有类似的问题，但是无法解决。 - Estri. P Lestari

Answer 4

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

//convert the date to a standard format
var dt = new Date(date);
//take only the date and month and push them to your label array

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

请在您的图表演示中使用此数组。

- shafeerambatt