如何在 ng2-Charts 中将 X 轴标签包装成多行（X 轴标签格式）？

Question

如何在 https://valor-software.com/ng2-charts/ 制作的条形图中将 x 轴标签包装成多行（2 行）？

预期结果应该像 this。请参阅 X 轴标签。

Ng2-charts 基于 Chart.js 并找到了以下有助于解决此问题的链接 (PR)。

https://github.com/chartjs/Chart.js/commit/d1b411f4fc2d7b9cafa2d235c9ee008d149a22e3 https://github.com/chartjs/Chart.js/pull/2704

然而，在 ng2-charts 中是否可以实现相同的效果？任何人在使用 ng2-charts 时都遇到过这个问题；如果是这样，请告诉我您如何以 angular 方式解决此问题。

Answer 1

仅当您想通过按 space (" ") 拆分来包装标签时才有一些解决方法。

scales: {         
      xAxes: [
        {
          ticks: {
            callback: function(label, index, labels) {
              if (/\s/.test(label)) {
                return label.split(" ");
              }else{
                return label;
              }              
            }
          }
        }
      ]
    }

图表现在看起来像这样。

如何在 ng2-Charts 中将 X 轴标签包装成多行（X 轴标签格式）？

How to wrap X axis labels to multi-lines (X axis label formatting) in ng2-Charts?

javascript

chart.js

ng2-charts

angular