angular - เปลี่ยนตำแหน่งคำอธิบายของ ng-charts (ใช้ angular2)
ฉันจะเปลี่ยนตำแหน่งของคำอธิบาย (legend) ที่โดยค่าเริ่มต้นปรากฏด้านบนของแผนภูมิได้อย่างไร? ฉันกำลังใช้ ng-charts และพยายามเปลี่ยนตำแหน่งตามเอกสาร แต่ดูเหมือนว่าจะไม่ได้ผล
เทมเพลตนี้มีสิ่งต่อไปนี้:
<canvas baseChart
[datasets]="datasets"
[labels]="labels"
[chartType]="type"
[colors]="colors"
[legend]="legend"
[position]="position">
</canvas>
และตัวแปรของส่วนประกอบคือ:
labels: string[] = [ 'EMI', 'Food', 'Fuel', 'bike' ];
type: string = 'doughnut';
legend: boolean = true;
position: string = 'left';
colors: Color[] = [{}];
datasets: any[] = [{
data: [ 3350, 5450, 4100, 1000 ],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}];
คำตอบ #1
ตามไฟล์ readme ของ ng2-charts คุณสามารถใช้ options เพื่อเปลี่ยนคุณสมบัติใด ๆ ที่ ng2-charts เองไม่ได้เปิดเผย
เพิ่ม [options]="options" ไปยังเทมเพลตของคุณ และเพิ่มตัวแปร options ไปยังคอมโพเนนต์ของคุณ:
private options: any = {
legend: { position: 'left' }
}
