web-dev-qa-db-ja.com

ng-chartsの凡例の位置を変更します（angular2を使用）

凡例の位置を変更するにはどうすればよいですか（デフォルトではグラフの上部に表示されます）？ ng-chartsを使用していて、 documentation に従って位置を変更しようとしていますが、機能していないようです。

chart

テンプレートには次のものが含まれています。

<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"
  ]
}];
angulartypescriptchart.jsng2-charts
9
sridharan

ng2-chartsの-​​ readme に従って、optionsを使用して、ng2-charts自体によって公開されていないプロパティを変更できます。

テンプレートに[options]="options"を追加し、コンポーネントにoptions変数を追加します。

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