Question

我使用角度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标签以便水平显示它们？我仔细查看了primeNgCharts和chart.js文档，但是我找不到真正给我想要行为的东西。

Answer 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
}

Answer 2

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

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

2 个答案: