ค้นหาเว็บไซต์

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

บทความที่เกี่ยวข้อง