如何在图表上有两个以上数字的 Chartjs 中的 xAxe 上仅显示 2 个数字？

Question

我只想有一次 2018 年和一次 2019 年，当 2019 年的数据开始时，它实际上是这样的：

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

我想要实现的是，尽管图表上有很多数据，但我的 x 轴（两年）上的标签仅显示两次，因此并非所有日子都像现在这样。我在整个 Web 开发方面并没有太多经验，因此感谢您提供任何帮助。提前致谢。

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

您应该使用时间 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

当您绘制时间序列时，您应该使用时间轴类型。要使用它，您首先需要更正数据集：必须以明确的格式（即ISO-8601）提供日期：YYYY-MM-DD.您的日期必须按时间顺序排列。您的问题显示2018-01 在 2018-10图像和代码之后，这显然是一个错误。完成此操作后，您可以根据需要简单地将时间轴配置为仅显示年份：options: {&nbsp; scales: {&nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; type: "time",&nbsp; &nbsp; &nbsp; time: {&nbsp; &nbsp; &nbsp; &nbsp; unit: "year"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }}下面是一个使用您的数据集的完整示例（如上文详述的更正）。请注意，您不需要提供，labels因为时间轴会自动计算刻度标签。var config = {&nbsp; type: 'line',&nbsp; data: {&nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; label: 'Modell',&nbsp; &nbsp; &nbsp; data: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-01-01',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -4.50&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-01-04',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -4.05&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-01-11',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -3.76&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-01-18',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -3.64&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-01-25',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -3.38&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-10-26',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -4.43&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-11-02',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -3.47&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-11-09',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -3.34&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-11-16',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -3.62&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-11-23',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -4.20&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-11-30',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -3.70&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-12-07',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -4.04&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-12-14',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -3.75&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-12-21',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -4.46&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-12-28',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -4.50&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2018-12-31',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -4.50&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2019-02-01',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -3.09&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2019-02-08',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -3.24&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: '2019-02-15',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: -2.88&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; fill: false&nbsp; &nbsp; }]&nbsp; },&nbsp; options: {&nbsp; &nbsp; responsive: true,&nbsp; &nbsp; title: {&nbsp; &nbsp; &nbsp; display: true,&nbsp; &nbsp; &nbsp; text: 'TAM Eurosectors Defensiv'&nbsp; &nbsp; },&nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; type: "time",&nbsp; &nbsp; &nbsp; &nbsp; time: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; unit: "year"&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; scaleLabel: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labelString: '2018 - 2019'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; }&nbsp; }};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>