как я могу показать только 2 числа на xAxe в Chartjs, имеющих более двух чисел на графике? (линейный график)

Question

Я просто хочу иметь один раз 2018 и один раз 2019, когда начинаются данные с 2019 года, на самом деле это выглядит так:

Когда я пытаюсь поставить только две меткион просто показывает два числа по всей диаграмме.

Я хотел бы добиться того, чтобы метки на моей оси х (два года) отображались только два раза, хотя у меня много данных ографик, так что не все дни, как сейчас. У меня нет особого опыта в веб-разработке, поэтому любая помощь приветствуется. Заранее спасибо.

var config = {
  type: 'line',
  data: {
    labels: ['26.10.2018', '02.11.2018', '09.11.2018', '16.11.2018', '23.11.2018', '30.11.2018', '07.12.2018', '14.12.2018', '21.12.2018', '28.12.2018', '31.12.2018', '01.01.2018', '04.01.2019', '11.01.2019', '18.01.2019', '25.01.2019', '01.02.2019', '08.02.2019', '15.02.2019', '22.02.2019', '01.03.2019'],
    datasets: [{
      label: 'Modell',
      data: [{
          x: '26.10.2018',
          y: -4.43
        }, {
          x: '02.11.2018',
          y: -3.47
        }, {
          x: '09.11.2018',
          y: -3.34
        }, {
          x: '16.11.2018',
          y: -3.62
        }, {
          x: '23.11.2018',
          y: -4.20
        }, {
          x: '30.11.2018',
          y: -3.70
        }, {
          x: '07.12.2018',
          y: -4.04
        }, {
          x: '14.12.2018',
          y: -3.75
        }, {
          x: '21.12.2018',
          y: -4.46
        }, {
          x: '28.12.2018',
          y: -4.50

        }, {
          x: '31.12.2018',
          y: -4.50
        },
        {
          x: '01.01.2018',
          y: -4.50
        }, {
          x: '04.01.2018',
          y: -4.05

        }, {
          x: '11.01.2018',
          y: -3.76
        }, {
          x: '18.01.2018',
          y: -3.64
        }, {
          x: '25.01.2018',
          y: -3.38
        }, {
          x: '01.02.2019',
          y: -3.09
        }, {
          x: '08.02.2019',
          y: -3.24
        }, {
          x: '15.02.2019',
          y: -2.88
        }
      ],
      fill: false,
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'TAM Eurosectors Defensiv'
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: '2018 - 2019'
        }
      }]
    }
  }
};

Answer 1

Вы должны использовать time xAxis для гораздо большего количества опций относительно времени.

  scales: {
    xAxes: [{
      type: 'time',
      time: { 
        unit: 'year'
      }
    }]
  },

Вы должны импортировать moment.js для получения дополнительных опций с вычислениеми отображение ваших данных. Я использовал его, чтобы вы могли отображать метки в немецком формате даты (не знаю, нужно ли вам это, только что увидел, что вы из Германии, и вы используете немецкий формат даты для ввода).

Воткод для ваших отформатированных всплывающих подсказок:

  tooltips: {
    callbacks: {
      title: function(tooltipItem, data){
        return moment(tooltipItem[0].label).format('DD.MM.YYYY')
      }
    }
  }

Вот весь код в JSBin

PS: у вас неправильные даты, например, «2018-01-01»вместо '2019-01-01' и вам не нужны дополнительные метки, когда вы помещаете их в свои данные.

Answer 2

При построении временного ряда вы должны использовать тип оси времени . Чтобы использовать его, сначала необходимо исправить свой набор данных:

1. Даты должны быть должны быть предоставлены в однозначном формате (что означает ISO-8601 ): YYYY-MM-DD.
2. Ваши даты должны быть отсортированы в хронологическом порядке. Ваш вопрос показывает 2018-01 после 2018-10 на изображении и в коде, что явно является ошибкой.

Как только это будет сделано, вы можете просто настроить ось временидля отображения только нужных лет:

options: {
  scales: {
    xAxes: [{
      type: "time",
      time: {
        unit: "year"
      }
    }
  }
}

Ниже приведен полностью рабочий пример использования вашего набора данных (исправлено, как описано выше). Обратите внимание, что вам не нужно указывать labels, поскольку временная ось автоматически рассчитывает метки тиков.

var config = {
  type: 'line',
  data: {
    datasets: [{
      label: 'Modell',
      data: [{
          x: '2018-01-01',
          y: -4.50
        }, {
          x: '2018-01-04',
          y: -4.05

        }, {
          x: '2018-01-11',
          y: -3.76
        },
        {
          x: '2018-01-18',
          y: -3.64
        }, {
          x: '2018-01-25',
          y: -3.38

        }, {
          x: '2018-10-26',
          y: -4.43
        }, {
          x: '2018-11-02',
          y: -3.47

        }, {
          x: '2018-11-09',
          y: -3.34
        },
        {
          x: '2018-11-16',
          y: -3.62
        }, {
          x: '2018-11-23',
          y: -4.20

        }, {
          x: '2018-11-30',
          y: -3.70
        },
        {
          x: '2018-12-07',
          y: -4.04
        }, {
          x: '2018-12-14',
          y: -3.75

        }, {
          x: '2018-12-21',
          y: -4.46
        }, {
          x: '2018-12-28',
          y: -4.50

        }, {
          x: '2018-12-31',
          y: -4.50
        }, {
          x: '2019-02-01',
          y: -3.09
        },
        {
          x: '2019-02-08',
          y: -3.24
        }, {
          x: '2019-02-15',
          y: -2.88
        }
      ],
      fill: false
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'TAM Eurosectors Defensiv'
    },
    scales: {
      xAxes: [{
        type: "time",
        time: {
          unit: "year"
        },
        scaleLabel: {
          display: true,
          labelString: '2018 - 2019'
        }
      }]
    }
  }
};

new Chart(document.getElementById("chart"), config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>