javascript - 如何在图表上有两个以上数字的 Chartjs 中的 xAxe 上仅显示 2 个数字？ (折线图)

Question

我只想有一次 2018 年和一次 2019 年，当 2019 年的数据开始时，它实际上看起来像这样:

当我尝试只放置两个标签时，它只显示整个图表中的两个数字。

我想要实现的是，尽管我在图表上有很多数据，但 x 轴(两年)上的标签仅显示两次，所以并不是像现在这样的所有日子。我对整个网络开发并没有太多的经验，所以任何帮助都是值得赞赏的。提前致谢。

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')
      }
    }
  }

Here's all the code in a JSBin

PS:您的日期有误，例如“2018-01-01”而不是“2019-01-01”，并且将它们放入数据中时不需要额外的标签。