如何使用ChartJS清楚地显示条形图标签？

Question

在我的Angular项目中，我想使用ChartJS绘制条形图。该图表的数据数量是随机的和可变的。有时候可能很大。

当数字大时，标签彼此重叠，如：

我想知道如何自动调整空间并正确显示标签吗？

源代码为： Javascript：

  // Bar chart mock data
  barChartOptions:any = {
  scaleShowVerticalLines: true,
  responsive: true
  };
  barChartLabels:string[] = ['2018-10-02 15:26:41', ...];
  barChartType:string = 'horizontalBar';
  barChartLegend:boolean = true;
  barChartData:any[] = [{data: data, label: 'Kilometre per Litre'}];

html

<div style="display: block">
   <canvas baseChart id="mpgChart"
       [datasets]="barChartData"
       [labels]="barChartLabels"
       [options]="barChartOptions"
       [legend]="barChartLegend"
       [chartType]="barChartType"
       (chartHover)="chartHovered($event)"
       (chartClick)="chartClicked($event)"></canvas>
</div>

scss

 #mpgChart{
    height: 100%;
    width: 100%;
  }

Answer 1

尝试设置autoSkip: true。这就是您在普通Chart.JS中的处理方式，不确定在Angular2 Chart.js中如何进行处理

scales: {
  xAxes: [{
    ticks: {
      autoSkip: true
    }
  }]
}

您还可以添加minRotation: 30，以旋转文本以提高文本的可读性

**编辑**

  barChartOptions:any = {
      scaleShowVerticalLines: true,
       scales: {
        xAxes: [{
          ticks: {
            autoSkip: true
          }
         }]
      },
      responsive: true
  };