Chartjs X 轴标签和刻度格式答案

【问题标题】：Chartjs X axis label and tick formattingChartjs X 轴标签和刻度格式
【发布时间】：2017-08-11 03:18:42
【问题描述】：

我正在使用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 轴标签格式有关。

最初的早上 6 点标签正在被切断
如何更改 X 轴标签旋转（所以可能 90 度将修复截断的第一个值）
我的数据转到 6pm，但它显示了一个额外的 X 轴值（7pm）。我可以摆脱这个吗？

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

【问题讨论】：

标签： javascript charts

【解决方案1】：

对我有用的是设置

autoskip: true
autoSkipPadding: 30

在滴答配置中。

【讨论】：

【解决方案2】：

1,2 - 设置 minRotation = 90
3 - 在 x 轴上设置最大值

【讨论】：

哪个属性控制刻度数？是graph_options.options.scales.yAxes[0].ticks.afterBuildTicks 吗？