如何在ng2-Charts中将X轴标签包装成多行(X轴标签格式)?

时间:2019-01-07 17:23:40

标签: javascript angular chart.js ng2-charts

如何在https://valor-software.com/ng2-charts/制成的条形图中将x轴标签包装成多行(2条线)?

预期结果应类似于this。请参见X轴标签。

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

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

但是在ng2-charts中有可能实现相同的目标吗?任何人在使用ng2-charts时都会遇到此问题;如果是这样,请让我知道您如何以角度的方式解决这个问题。

1 个答案:

答案 0 :(得分:3)

仅当您想通过按空格(“”)来包装标签时,才有一些解决方法。

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

图表现在看起来像这样。 enter image description here