使用 Angular2 进行 PrimeNg 图表标签旋转
PrimeNg chart label rotation with Angular2
我对使用 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 文档,但我无法找到真正给我想要的行为的东西。
在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
}
感谢@jordanwillis
我通过从 primeng 图表迁移到使用 chart.js>2.0 版本的 ng2charts 解决了这个问题。这允许我对我的图表执行高级自定义 labels/font-size/rotation..
我对使用 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 文档,但我无法找到真正给我想要的行为的东西。
在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
}
感谢@jordanwillis 我通过从 primeng 图表迁移到使用 chart.js>2.0 版本的 ng2charts 解决了这个问题。这允许我对我的图表执行高级自定义 labels/font-size/rotation..