如何在图表上有两个以上数字的 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: {

  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>