如何始终显示最近的N个x轴标签

Question

我有很多方法可以在图表上找到要点：

在小屏幕上，最后的x轴标签总是会被弄掉，但实际上我想将其保留在图表上：

是否有任何方法可以设置标签优先级或类似的设置，以便始终显示N个x轴标签？有什么想法吗？

Answer 1

您可以定义xAxis的最大数量（请参见Tick Options）。这需要在最后一个数据点之后的一段时间。

ticks: {
  max: new Date("2020-03-01")
}

在实际程序中，您可能想从最后一个数据点计算max值，而不是使用硬编码值。

const data = [{
  name: "series1",
  series: [{
    "date": "2015-02-28T00:00:00.000Z",
    "value": 4946
  }, {
    "date": "2015-03-31T00:00:00.000Z",
    "value": 7174
  }, {
    "date": "2015-04-30T00:00:00.000Z",
    "value": 6981
  }, {
    "date": "2015-05-31T00:00:00.000Z",
    "value": 9461
  }, {
    "date": "2015-06-30T00:00:00.000Z",
    "value": 13387
  }, {
    "date": "2015-07-31T00:00:00.000Z",
    "value": 24302
  }, {
    "date": "2015-08-31T00:00:00.000Z",
    "value": 9994
  }, {
    "date": "2015-09-30T00:00:00.000Z",
    "value": 14999
  }, {
    "date": "2015-10-31T00:00:00.000Z",
    "value": 17700
  }, {
    "date": "2015-11-30T00:00:00.000Z",
    "value": 50822
  }, {
    "date": "2015-12-31T00:00:00.000Z",
    "value": 50919
  }, {
    "date": "2016-01-31T00:00:00.000Z",
    "value": 48754
  }, {
    "date": "2016-02-29T00:00:00.000Z",
    "value": 29803
  }, {
    "date": "2016-03-31T00:00:00.000Z",
    "value": 67236
  }, {
    "date": "2016-04-30T00:00:00.000Z",
    "value": 96319
  }, {
    "date": "2016-05-31T00:00:00.000Z",
    "value": 124185
  }, {
    "date": "2016-06-30T00:00:00.000Z",
    "value": 141557
  }, {
    "date": "2016-07-31T00:00:00.000Z",
    "value": 132527
  }, {
    "date": "2016-08-31T00:00:00.000Z",
    "value": 140417
  }, {
    "date": "2016-09-30T00:00:00.000Z",
    "value": 135075
  }, {
    "date": "2016-10-31T00:00:00.000Z",
    "value": 191392
  }, {
    "date": "2016-11-30T00:00:00.000Z",
    "value": 227628
  }, {
    "date": "2016-12-31T00:00:00.000Z",
    "value": 243538
  }, {
    "date": "2017-01-31T00:00:00.000Z",
    "value": 293096
  }, {
    "date": "2017-02-28T00:00:00.000Z",
    "value": 345766
  }, {
    "date": "2017-03-31T00:00:00.000Z",
    "value": 519761
  }, {
    "date": "2017-04-30T00:00:00.000Z",
    "value": 448786
  }, {
    "date": "2017-05-31T00:00:00.000Z",
    "value": 572362
  }, {
    "date": "2017-06-30T00:00:00.000Z",
    "value": 580894
  }, {
    "date": "2017-07-31T00:00:00.000Z",
    "value": 660067
  }, {
    "date": "2017-08-31T00:00:00.000Z",
    "value": 709063
  }, {
    "date": "2017-09-30T00:00:00.000Z",
    "value": 812561
  }, {
    "date": "2017-10-31T00:00:00.000Z",
    "value": 874424
  }, {
    "date": "2017-11-30T00:00:00.000Z",
    "value": 1076463
  }, {
    "date": "2017-12-31T00:00:00.000Z",
    "value": 1049066
  }, {
    "date": "2018-01-31T00:00:00.000Z",
    "value": 1239827
  }, {
    "date": "2018-02-28T00:00:00.000Z",
    "value": 1081402
  }, {
    "date": "2018-03-31T00:00:00.000Z",
    "value": 1556783
  }, {
    "date": "2018-04-30T00:00:00.000Z",
    "value": 1443372
  }, {
    "date": "2018-05-31T00:00:00.000Z",
    "value": 1491657
  }, {
    "date": "2018-06-30T00:00:00.000Z",
    "value": 1606459
  }, {
    "date": "2018-07-31T00:00:00.000Z",
    "value": 1814560
  }, {
    "date": "2018-08-31T00:00:00.000Z",
    "value": 2231426
  }, {
    "date": "2018-09-30T00:00:00.000Z",
    "value": 2199441
  }, {
    "date": "2018-10-31T00:00:00.000Z",
    "value": 2752529
  }, {
    "date": "2018-11-30T00:00:00.000Z",
    "value": 2849511
  }, {
    "date": "2018-12-31T00:00:00.000Z",
    "value": 2902949
  }, {
    "date": "2019-01-31T00:00:00.000Z",
    "value": 3373373
  }, {
    "date": "2019-02-28T00:00:00.000Z",
    "value": 3369580
  }, {
    "date": "2019-03-31T00:00:00.000Z",
    "value": 4114746
  }, {
    "date": "2019-04-30T00:00:00.000Z",
    "value": 4097378
  }, {
    "date": "2019-05-31T00:00:00.000Z",
    "value": 4232173
  }, {
    "date": "2019-06-30T00:00:00.000Z",
    "value": 3995196
  }, {
    "date": "2019-07-31T00:00:00.000Z",
    "value": 4589346
  }, {
    "date": "2019-08-31T00:00:00.000Z",
    "value": 4575779
  }, {
    "date": "2019-09-30T00:00:00.000Z",
    "value": 4556959
  }, {
    "date": "2019-10-31T00:00:00.000Z",
    "value": 5275366
  }, {
    "date": "2019-11-30T00:00:00.000Z",
    "value": 5433849
  }, {
    "date": "2019-12-31T00:00:00.000Z",
    "value": 4935529
  }, {
    "date": "2020-01-29T00:00:00.000Z",
    "value": 4764600
  }]
}, {
  name: "series2",
  series: [{
    "date": "2016-10-31T00:00:00.000Z",
    "value": 648388
  }, {
    "date": "2016-11-30T00:00:00.000Z",
    "value": 693729
  }, {
    "date": "2016-12-31T00:00:00.000Z",
    "value": 773365
  }, {
    "date": "2017-01-31T00:00:00.000Z",
    "value": 975006
  }, {
    "date": "2017-02-28T00:00:00.000Z",
    "value": 1082831
  }, {
    "date": "2017-03-31T00:00:00.000Z",
    "value": 1350222
  }, {
    "date": "2017-04-30T00:00:00.000Z",
    "value": 1289953
  }, {
    "date": "2017-05-31T00:00:00.000Z",
    "value": 1499037
  }, {
    "date": "2017-06-30T00:00:00.000Z",
    "value": 1605640
  }, {
    "date": "2017-07-31T00:00:00.000Z",
    "value": 1726461
  }, {
    "date": "2017-08-31T00:00:00.000Z",
    "value": 1853198
  }, {
    "date": "2017-09-30T00:00:00.000Z",
    "value": 1885029
  }, {
    "date": "2017-10-31T00:00:00.000Z",
    "value": 2168899
  }, {
    "date": "2017-11-30T00:00:00.000Z",
    "value": 2369837
  }, {
    "date": "2017-12-31T00:00:00.000Z",
    "value": 2118275
  }, {
    "date": "2018-01-31T00:00:00.000Z",
    "value": 2708846
  }, {
    "date": "2018-02-28T00:00:00.000Z",
    "value": 2523632
  }, {
    "date": "2018-03-31T00:00:00.000Z",
    "value": 2862202
  }, {
    "date": "2018-04-30T00:00:00.000Z",
    "value": 2618252
  }, {
    "date": "2018-05-31T00:00:00.000Z",
    "value": 3179610
  }, {
    "date": "2018-06-30T00:00:00.000Z",
    "value": 3110572
  }, {
    "date": "2018-07-31T00:00:00.000Z",
    "value": 3433279
  }, {
    "date": "2018-08-31T00:00:00.000Z",
    "value": 4107825
  }, {
    "date": "2018-09-30T00:00:00.000Z",
    "value": 3785735
  }, {
    "date": "2018-10-31T00:00:00.000Z",
    "value": 4079134
  }, {
    "date": "2018-11-30T00:00:00.000Z",
    "value": 4072219
  }, {
    "date": "2018-12-31T00:00:00.000Z",
    "value": 3606818
  }, {
    "date": "2019-01-31T00:00:00.000Z",
    "value": 4512291
  }, {
    "date": "2019-02-28T00:00:00.000Z",
    "value": 4334171
  }, {
    "date": "2019-03-31T00:00:00.000Z",
    "value": 4657378
  }, {
    "date": "2019-04-30T00:00:00.000Z",
    "value": 4633421
  }, {
    "date": "2019-05-31T00:00:00.000Z",
    "value": 4803755
  }, {
    "date": "2019-06-30T00:00:00.000Z",
    "value": 4633593
  }, {
    "date": "2019-07-31T00:00:00.000Z",
    "value": 5140042
  }, {
    "date": "2019-08-31T00:00:00.000Z",
    "value": 5040706
  }, {
    "date": "2019-09-30T00:00:00.000Z",
    "value": 5256548
  }, {
    "date": "2019-10-31T00:00:00.000Z",
    "value": 5982276
  }, {
    "date": "2019-11-30T00:00:00.000Z",
    "value": 5633371
  }, {
    "date": "2019-12-31T00:00:00.000Z",
    "value": 4892260
  }, {
    "date": "2020-01-29T00:00:00.000Z",
    "value": 4887260
  }]
}];

new Chart(document.getElementById('myChart'), {
    type: 'line',
    data: {
        datasets: [
          {
              label: data[0].name,
              fill: false,
              backgroundColor: 'red',
              borderColor: 'red',
              data: data[0].series.map(x => ({ x: new Date(x.date), y: x.value }))
          }, {
              label: data[1].name,
              fill: false,
              backgroundColor: 'green',
              borderColor: 'green',
              data: data[1].series.map(x => ({ x: new Date(x.date), y: x.value }))
          }
        ]
    },
    options: {
        responsive: true,
        title: {
            display: false
        },
        legend: {
            display: true,
            position: 'top'
        },      
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'month',
                    displayFormats: {
                        'month': 'MMM YYYY',
                    },
                    tooltipFormat: 'MMM YYYY'
                },
                ticks: {
                  max: new Date("2020-03-01")
                }
            }],
        }
    }
});

canvas {
  max-width: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="120"></canvas>