以网格线为中心的条形图，标签在网格线的下方(chart.js)

Question

我想创建一个条形图，其中的条形图在网格线之间居中.在这个合并请求之前，这种行为是可能的。https:/github.comchartjsChart.jspull4545

在最初的版本中，可以用offsetGridLines: false（类别比例）来实现。

我使用chart.js和ng2-charts用angular app创建了一个stackblitz。https:/stackblitz.comeditangular-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是否提供了在网格线之间居中排列条形图的可能性？

Answer 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.8)：每个类别的可用宽度在样本宽度内的百分比（0-1）。更多...

然而，如果其中一些条形图不在可见区域内，Chart.js仍然不会正确地布局它们。因此，你还需要通过定义一个适当的值来确保所有的条形图都显示在图表中。yAxis.ticks.min.

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

请看一下您的修改后的代码，如下所示 StackBlitz