Как отформатировать значения шкалы времени оси X в Chart.js v2

Я могу отформатировать всплывающие подсказки, когда я наводил курсор на datapoint на линейной диаграмме через options.scales.xAxes.time.tooltipFormat, но я не могу сделать это для галочки x-axis. Мой data.labels - это массив объектов момента. Они отображаются как "MMM DD, YYYY" (например, 23 февраля 2012 г.), но я хочу удалить год.

Ответ 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'
        }
        ...

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

Ответ 2

согласно странице документации диаграммы js раздел настройки галочки. вы можете отформатировать значение каждого тика с помощью функции обратного вызова. например, я хотел изменить язык отображаемых дат, чтобы всегда быть немецким. в тиках частей опций оси

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

Ответ 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";
    }