更改 ng-charts 的图例位置（使用 angular2）

Question

如何更改图例的位置（默认显示在图表顶部）？我正在使用 ng-charts，我正在尝试根据 documentation 更改位置，但它似乎不起作用。

模板包含以下内容：

<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"
  ]
}];

Answer 1

根据 ng2-charts 的 readme，您可以使用 options 更改 ng2-charts 本身未公开的任何属性。

将 [options]="options" 添加到您的模板，并将 options 变量添加到您的组件：

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

更改 ng-charts 的图例位置（使用 angular2）

Change legend position of ng-charts (using angular2)

typescript

chart.js

ng2-charts

angular