Javascript Chartjs X轴标签和记号格式

Javascript Chartjs X轴标签和记号格式,javascript,charts,Javascript,Charts,我正在使用来显示时间序列折线图 我的设置如下 this.chartSetup = { type: 'line', data: { labels: this.times, datasets: [{ fill: true, lineTension: 0.1, backgroundColor: "rgba(75,192,192

我正在使用来显示时间序列折线图

我的设置如下

   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轴标签格式有关

  • 最初的早上6点标签被剪掉了

  • 如何更改X轴标签旋转(因此,可能90度将修复截断的第一个值)

  • 我的数据显示为6pm,但它显示了一个额外的X轴值(7pm)。我能处理掉这个吗


  • 在此提前感谢您的建议。

    1,2-设置最小旋转=90

    3-在x轴上设置最大值

    对我有效的是设置

    autoskip: true
    autoSkipPadding: 30
    

    在勾号配置中。

    哪个属性控制勾号的数量?它是不是
    graph\u options.options.scales.yAxes[0].ticks.afterBuildTicks