条在网格线之间居中，标签位于网格线下方 (chart.js)答案

【问题标题】：Bars centered between the grid lines with the label below the grid lines (chart.js)条在网格线之间居中，标签位于网格线下方 (chart.js)
【发布时间】：2020-09-09 00:48:44
【问题描述】：

我想创建一个条形图，其中条形位于网格线之间。在此合并请求之前，此行为是可能的： https://github.com/chartjs/Chart.js/pull/4545

在原始版本中，这可以通过 offsetGridLines: false（类别比例）来实现。

我使用chart.js 和ng2-charts 创建了一个带有角度应用程序的stackblitz： https://stackblitz.com/edit/angular-barchart-example-mg192a?file=src%2Fapp%2Fbarchart%2Fbarchart.ts

chart.js 2.6.0 的工作代码：

  public barChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true,
        scales: {
      xAxes: [{
        offset: true,
        gridLines: {
          offsetGridLines: false
        }
      }]
    }
  }

生成我想要的条形图（只有条形仍然可以在网格线之间居中）：

在当前版本的 Chart.js（我目前使用的是 2.9.3）中，条形图排列在网格线的右侧和左侧：

新版本的 chart.js 是否提供了在网格线之间居中条形的可能性？

【问题讨论】：

标签： javascript angular charts chart.js ng2-charts

【解决方案1】：

首先，您需要为两个数据集定义categoryPercentage: 1。

public barChartData:any[] = [
  {
    data: [55, 60, 75, 82, 56, 62, 80], 
    label: 'Company A',
    categoryPercentage: 1,
  },
  { data: [58, 55, 60, 79, 66, 57, 90], 
    label: 'Company B',
    categoryPercentage: 1,
  }
];

categoryPercentage（默认 0.8）：每个类别的可用宽度的百分比 (0-1) 应在样本宽度内。 more...

但是，如果其中一些条不包含在可见区域中，Chart.js 仍然无法正确布局条。因此，您还必须通过为yAxis.ticks.min 定义适当的值来确保所有条形都显示在图表中。

yAxes: [{
  ticks: {
    min: 50
  }
}]

请在以下StackBlitz查看您修改后的代码

【讨论】：

感谢您的回答:)。我想这个问题没有问得很好。困扰我的是，在当前版本中，条形图显示在网格线的右侧和左侧。但我希望网格线之间的条显示一年，年份标签显示在相应的网格线下方。所以正如第一张截图所示。