我如何在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

在绘制时间序列时，应使用time axis type。要使用它，您首先需要更正您的数据集：

1. 日期必须以明确的格式（即ISO-8601）：YYYY-MM-DD提供。
2. 您的日期必须按时间顺序排序。您的问题在图像和代码中都显示2018-01 after 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>

Answer 2

您应该使用time xAxis获得更多有关时间的选项。

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

您必须导入moment.js才能获得更多选项，以计算和显示数据。我使用了它，所以您可以以德语日期格式显示标签（不知道是否需要，只是看到您来自德国，并且您使用德语日期格式进行输入）。

以下是格式化工具提示的代码：

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

Here's all the code in a JSBin

PS：您输入的日期是错误的'2018-01-01'而不是'2019-01-01'，并且标签和数据中都不需要日期，因此数据会映射到标签上。