javascript - Chartjs X 轴标签和刻度格式

Question

我正在使用 Chartjs显示时间序列线图。

我的设置如下...

   this.chartSetup = {
          type: 'line',
          data: {
            labels: this.times,
            datasets: [{
              fill: true,
              lineTension: 0.1,
              backgroundColor: "rgba(75,192,192,0.4)",
              borderColor: "rgba(75,192,192,1)",
              label: title,
              data: this.vals,
              pointRadius: 0,
            }]
          },
          options: {
            spanGaps: true,
            legend: {
              position: 'bottom',
              labels: {
                boxWidth: 10
              }
            },
            tooltips: {
              enabled: false
            },
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              xAxes: [{
                ticks: {
                  stepSize: 6,
                  unitStepSize: 5
                },
                type: 'time',
                time: {
                  displayFormats: {
                    hour: 'h:mm a',
                    minute: 'h:mm a',
                  }
                }
              }],
            },
          }
        };

   Chart.defaults.global.animation.easing = "easeOutBounce";
   this.chart = new Chart(this.canvas.nativeElement, this.chartSetup);

我的图表看起来像下面的屏幕截图

数据是 X 轴(标签)的日期，Y 轴只是数字。时间数据从早上 6 点到下午 6 点(12 小时)

我这里有几个问题都与 X 轴标签格式有关。

1. 最初的 6am 标签正在被切断

2. 如何更改 X 轴标签旋转(因此可能 90 度会修复 chop 的第一个值)

3. 我的数据到 6pm，但它显示了一个额外的 X 轴值(7pm)。我可以摆脱这个吗？

在此先感谢您的任何建议。

Answer 1

对我有用的是设置

autoskip: true
autoSkipPadding: 30

在刻度配置中。