ChartJS 更改NG图表的图例位置(使用angular2)

sulc1iza  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(237)

如何更改图例的位置(默认情况下,图例显示在图表的顶部)?我使用的是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"
  ]
}];
wnavrhmk

wnavrhmk1#

根据ng2-charts的自述文件,您可以使用options更改ng2-charts本身未公开的任何属性。
[options]="options"添加到模板中,并将options变量添加到组件中:

private options: any = {
  legend: { position: 'left' }
}
x8goxv8g

x8goxv8g2#

使用ng-charts版本4.0.1,它是:

private options: any = {
  plugins: { legend: { position: 'left' } }
}

相关问题