chart表格的x轴标签拥挤

Question

vue使用chart.js发现x轴过于拥挤，需要修改网格线的宽度，该如何做

 scales: {
          // x轴
          xAxes: [
            {
              distribution: 'linear',
              type: 'time',
              time: {
                displayFormats: this.timeFormat
              },
              ticks: {
                autoSkip: false,
                maxRotation: 0
              },
              gridLines: {
                scaleStepWidth: 80
              }
            }
          ],
          // y轴
          yAxes: [
            {
              // 设置起止数据和步长
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
      this.chartLoading = true
    },

是在gridLines里修改嘛

Answer 1

已自行解决，附代码

xAxes: [
            {
              distribution: 'linear',
              type: 'time',
              time: {
                tooltipFormat: 'YYYY-MM-DD h:mm:ss',
                displayFormats: this.timeFormat
              },
              ticks: {
                source: 'data',
                autoSkip: true,
                maxRotation: 0,
                autoSkipPadding: 10
              },
              // 网格线配置
              gridLines: {
                display: true
              }
            }
          ],

Answer 2

两种方式，一种是将标签斜过来，比如axisLabel:{rotate:45},另一种是修改标签间隔，axisLabel:{interval:3}