如何使用ng2-charts设置图表的宽度和高度?我正在制作条形图,就像ng2-chart网站上的演示一样。
public doughnutChartLabels:string[] = ['EMI', 'Car', 'Food', 'Fuel'];
data:number[] = [3350, 5450, 4100, 1000];
public doughnutChartType:string = 'doughnut';
options: { responsive: true, }
colorsEmptyObject: Array<Color> = [{}];
public datasets: any[] = [
{
data: this.data,
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}];
// events
public chartClicked(e:any):void {
console.log(e);
}
public chartHovered(e:any):void {
console.log(e);
}
答案 0 :(得分:7)
对于矩形图形(线条,条形),您可以在html中添加width
和height
标记:
<canvas baseChart width="2" height="1"
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[colors]="chartColors"
[legend]=true
chartType=line></canvas>
宽度和高度设置纵横比,而不是实际尺寸。
你可以为方形图形(甜甜圈,雷达,馅饼,极地)做到这一点,但它没有那么多意义。它将保持方形,但在侧面或顶部和底部有较大的衬垫。
相反,您可以在包含图表的div
上设置所需的确切尺寸:
<div style="display: block; width: 200px; height: 200px;">
<canvas baseChart
[data]="doughnutChartData"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>