时间戳

首页 > 解决方案 > 条在网格线之间居中，标签位于网格线下方 (chart.js)

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

问题描述

我想创建一个条形图，其中条形位于网格线之间。在此合并请求之前，这种行为是可能的： 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 是否提供了在网格线之间居中条形的可能性？

标签： javascriptangularchartschart.jsng2-charts

解决方案

首先，您需要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) 应在样本宽度内。更多的...

但是，如果其中一些条不包含在可见区域中，Chart.js 仍然无法正确布局条。因此，您还必须通过为yAxis.ticks.min.

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

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

推荐阅读