ChartJS - 旋转后对齐轴标签答案

【问题标题】：ChartJS - aligning axis labels after rotationChartJS - 旋转后对齐轴标签
【发布时间】：2019-09-20 12:28:01
【问题描述】：

我正在使用 Chart.js 生成 BarChart。如何对齐标签，以便旋转 90 并且所有标签都对齐到每个标签的开头。目前，所有标签都与每个标签的末尾对齐。

我正在尝试显示所有标签以从相同的垂直位置开始 - 复仇者联盟的“A”所在的位置。目前所有标签都在相同的垂直位置结束 - War 的 'r' 所在的位置。

我需要文本向右（而不是向左）并从下到上（而不是从上到下）

public barChartOptions: ChartOptions = {
responsive: true,
legend: {
    display: false
  },
   scales: {
    xAxes: [{
      ticks: {
        // maxRotation: 90,
        minRotation: 90,
        labelOffset: 0,
        padding:-140
      },
    }]
  },
 };

Stackblitz 链接：https://ng2-charts-bar-template-tdpncj.stackblitz.io

Stackblitz 代码链接：https://stackblitz.com/edit/ng2-charts-bar-template-tdpncj

【问题讨论】：

能否在stackblitz.io上分享代码
你在哪里使用这个 chartjs，比如（在 Angular 中）
你是想在底部显示所有的labal还是如何
@harkeshkumar stackblitz.com/edit/ng2-charts-bar-template-tdpncj - 在这里你可以看到代码。我正在使用角。我试图显示所有标签都从相同的垂直位置开始 - 所以在这种情况下，复仇者联盟的“A”是。我只是玩了一下填充。

标签： chart.js

【解决方案1】：

你可以这样说：

xAxes: [{
   ticks: {
      minRotation: -90,
      labelOffset: 0,
      padding: -30
   },
}]

唯一的问题是文字会朝左

【讨论】：

真的！实际上，这就是我在我的项目中用来挽回面子的方式。但是那个“唯一”的问题是我的“最大”问题——因为客户根本不喜欢这种方式——说它是“相反的”。

【解决方案2】：

您可以像这样对齐标签，但问题可能是您使用句柄的文本长度大小问题，然后它对您有用，Sey minRotation: 360 这样旋转为 90，并且所有标签都对齐到每个标签的开头

如果您认为文本大小无法缩短，那么我建议您使用minRotation: 0，这样它会向您显示每个朋友都喜欢的正确文本

export class AppComponent  {
  public barChartOptions: ChartOptions = {
    responsive: true,
    legend: {
        display: false
      },
       scales: {
       xAxes: [{
        ticks: {
          minRotation: 360,
          labelOffset: 0,
          padding: -30
      },
}]
      },
  };
  public barChartLabels: Label[] = ['A', 'Br', 'In', 'Aq', 'V', 'Mis'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [];

  public barChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81, 56, 55, 40] }
  ];

  constructor() { }

  ngOnInit() {
  }
}

还可以在这里查看更新的代码

https://stackblitz.com/edit/ng2-charts-bar-template-42mpft?file=src/app/app.component.ts

【讨论】：