PrimeNg 图表标签旋转与 Angular2答案

【问题标题】：PrimeNg chart label rotation with Angular2PrimeNg 图表标签旋转与 Angular2
【发布时间】：2017-03-24 18:04:06
【问题描述】：

我对使用 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 文档，但我找不到真正给我想要的行为的东西。

【问题讨论】：

wat 是您为 datasets 数组获得的最终 json。更新nbError的值是什么
nbError 是number。最终的 json 看起来像 {[nameProcess: string, nbError: number]}

标签： angular charts chart.js primeng

【解决方案1】：

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

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

如果无法更改大小，请查看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
}

【讨论】：

感谢@jordanwillis 的回复。你是对的，通过显着增加我能够看到它水平显示的大小。但是，在我目前的情况下，这不是一个选择。我还尝试按照您指定的方式配置 de yAxes 甚至 xAxes，但最终结果保持不变。
看起来 PrimeNg 是 using a very old version of chart.js (v2.1.3)。当前版本是 v2.5.0。我猜旋转选项在 v2.1.3 中没有实现，这就是为什么它对你不起作用。
非常感谢您提供这些信息。我想我会尝试使用 highcharts-ng 或者只是回到chart.js（没有primeng），如果它可以解决我的问题

【解决方案2】：

感谢@jordanwillis 我通过从primeng图表迁移到使用chart.js> 2.0版本的ng2charts解决了这个问题。这让我可以对我的图表标签/字体大小/旋转执行高级自定义..

【讨论】：