使用 Angular2 进行 PrimeNg 图表标签旋转

Question

我对使用 angular 2 的 primeNg 图表有疑问。我可以在我的组件中使用以下代码显示图表：

 fillChartData(data){     
      this.chartData = {
          labels: data.map( x =>  x.nameProcess ),
          datasets: [
              {
                  label: 'error',
                  data: data.map( x =>  x.nbError ),
                  backgroundColor: 'rgba(100,149,237,0.5)',
              }],
           options: {
             animation:{
               animateScale:true
             }
           }
          };
      setTimeout(() =>  this.chart.reinit()); //TODO
  }

我的html代码：

<div class="col-lg-8 col-md-6">
     <div class="card" >
         <div class="card-content" id="barC">
             <h4 class="title title-centered" >{{title}}</h4>
             <p-chart  #chart2 type="bar" [data]="chartData" (click)="chartClicked($event)"></p-chart>
         </div>
     </div>
</div>

以及我在浏览器上得到的图表： enter image description here

但现在我想水平显示 x 标签，而不是像它们显示的那样。有没有办法旋转 x-label 以便水平显示它们？我仔细查看了 primeNgCharts 和 chart.js 文档，但我无法找到真正给我想要的行为的东西。

Answer 1

在chart.js中，刻度刻度标签旋转是自动执行的，由每个标签的可用量space决定。如果没有足够的空间水平放置标签，则会旋转它们。

与刻度标签的尺寸相比，您的图表图像看起来相当小。如果您可以增加图表的大小，那么它们可能会水平显示。

如果无法更改大小，请检查 minRotation 和 maxRotation 勾选选项。您可以使用这些属性来指定标签在不适合时应旋转多少。请注意，这些选项仅在实际旋转标签时使用（例如，它们不会影响小到足以首先水平旋转的标签）。

您可以在 scales.ticks 中配置这些属性。它看起来像这样。

fillChartData(data){     
  this.chartData = {
    labels: data.map( x =>  x.nameProcess ),
    datasets: [{
      label: 'error',
      data: data.map( x =>  x.nbError ),
      backgroundColor: 'rgba(100,149,237,0.5)',
    }],
    options: {
      animation:{
        animateScale:true
      },
      scales: [{
        yAxes: {
          ticks: {
            minRotation: 0,
            maxRotation: 0,
          }
        }
      }]
    }
  };

  setTimeout(() =>  this.chart.reinit()); //TODO
}

Answer 2

感谢@jordanwillis 我通过从 primeng 图表迁移到使用 chart.js>2.0 版本的 ng2charts 解决了这个问题。这允许我对我的图表执行高级自定义 labels/font-size/rotation..

使用 Angular2 进行 PrimeNg 图表标签旋转

PrimeNg chart label rotation with Angular2

angular

charts

chart.js

primeng