chart.js 未在 x 轴上显示所有值答案

【问题标题】：chart.js not showing all values in x axischart.js 未在 x 轴上显示所有值
【发布时间】：2021-10-08 11:33:16
【问题描述】：

我正在尝试绘制多轴折线图。主要问题是在 x 轴上并非所有值都显示出来。它显示了一些随机值。有 2 组值，每组有 10 个值。所以 x 轴上应该有 20 个刻度。但它只显示 4。我添加了 'autoSkip: false' 但它不起作用。

var s1 = {
          label: 's1',
          borderColor: 'blue',
          spanGaps: false,
          lineTension: 0,
          data: [
            { x: '2017-01-06 7:00:00', y: 100 },
            { x: '2017-01-07 10:00:00', y: 101 },
            { x: '2017-01-08 18:00:00', y: 101 },
            { x: '2017-01-09 4:00:00', y: 101 },
            { x: '2017-01-10 19:00:00', y: 101 },
            { x: '2017-01-11 21:00:00', y: 101 },
            { x: '2017-01-12 6:00:00', y: 101 },
            { x: '2017-01-13 17:00:00', y: 101 },
            { x: '2017-01-14 15:00:00', y: 101 },
            { x: '2017-01-15 14:00:00', y: 101 },
          ]
        };
        
        var s2 = {
          label: 's2',
          borderColor: 'red',
          spanGaps: false,
          lineTension: 0,
          data: [
            { x: '2017-01-07 18:00:00', y: 90 },
            { x: '2017-01-08 3:00:00', y: 105 },
            { x: '2017-01-09 10:00:00', y: 101 },
            { x: '2017-01-10 19:00:00', y: 101 },
            { x: '2017-01-12 20:00:00', y: 101 },
            { x: '2017-01-16 23:00:00', y: 90 },
            { x: '2017-01-19 7:00:00', y: 105 },
            { x: '2017-01-21 14:00:00', y: 101 },
            { x: '2017-01-25 22:00:00', y: 101 },
            { x: '2017-01-29 11:00:00', y: 101 },
          ]
        };
        
        var chart = new Chart(ctx, {
          type: 'line',
          data: { 
            datasets: [s1, s2]
          
          },
          options: {
            scales: {
              yAxes: [{
                scaleLabel: {
                  display: true
                },
                ticks: {
                  suggestedMin: 0,
                  beginAtZero: true
                }
              }],
              xAxes: [{
                stacked: false,
                type: 'time',
                time: {
                  displayFormats: {
                    'millisecond': 'D MMM YYYY, hh:mm a',
                    'second': 'D MMM YYYY, hh:mm a',
                    'minute': 'D MMM YYYY, hh:mm a',
                    'hour': 'D MMM YYYY, hh:mm a',
                    'day': 'D MMM YYYY, hh:mm a',
                    'week': 'D MMM YYYY, hh:mm a',
                    'month': 'D MMM YYYY, hh:mm a',
                    'quarter': 'D MMM YYYY, hh:mm a',
                    'year': 'D MMM YYYY, hh:mm a',
                  }
                },
                scaleLabel: {
                  display: true,
                },
                ticks: {
                  stepSize: 1,
                  autoSkip: false
                }
              }]
            }
          }
        });

【问题讨论】：

标签： javascript chart.js2

【解决方案1】：

缺少的代码是：

unit: 'day',
unitStepSize: 2,

添加后，现在所有的 x 轴点都显示出来了。

xAxes: [{
                type: "time",
                time: {
                  unit: 'day',
                  unitStepSize: 2,
                  displayFormats: {
                    'millisecond': 'D MMM YYYY, hh:mm a',
                    'second': 'D MMM YYYY, hh:mm a',
                    'minute': 'D MMM YYYY, hh:mm a',
                    'hour': 'D MMM YYYY, hh:mm a',
                    'day': 'D MMM YYYY, hh:mm a',
                    'week': 'D MMM YYYY, hh:mm a',
                    'month': 'D MMM YYYY, hh:mm a',
                    'quarter': 'D MMM YYYY, hh:mm a',
                    'year': 'D MMM YYYY, hh:mm a',
                  }
                },
                scaleLabel: {
                  display: true,
                },
                ticks: {
                  autoSkip: false,
                  maxTicksLimit: 10
                }
              }]

【讨论】：