Chart JS，ng2-Charts - 如何使标签位于饼图右侧而不是顶部？

Question

我正在使用图表 js https://www.npmjs.com/package/chart.js and ng2-charts https://www.npmjs.com/package/ng2-charts 来渲染圆环图。

但是，我希望标签显示在 圆环图 的右侧，请问我该怎么做？

  public monthStatsLabel: Label[] = ['Total days', 'Present', 'Leave'];
  public monthStatsData: MultiDataSet = [
    [31,28,2]
  ];
  public monthStatsType: string = 'doughnut';
  public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
    console.log(event, active);
  }

<canvas baseChart
                    [data]="monthStatsData"
                    [labels]="monthStatsLabel"
                    [chartType]="monthStatsType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)"></canvas>

Answer 1

首先，在您的 component.ts:

中导入 ChartOptions 对象

import { ChartOptions } from 'chart.js';

在您的 component.ts:

中用它创建一个新变量

public options: ChartOptions = {
  legend: {
    display: true,
    position: 'right'  // <=========== change this to the position you like.
  },
  title: {
    display: true,
    text: "Employee Details",
  }
  // ... and so on. see below about options
}

现在，在您的 component.html 中，将 options 变量添加到 <canvas>:

<canvas baseChart
                [data]="monthStatsData"
                [labels]="monthStatsLabel"
                [chartType]="monthStatsType"
                [options]="options" 
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></canvas>

Read more about ng2-chart options and customization here

Answer 2

对 ng2-Charts 一无所知，但您可能需要添加一些东西

[options] = "chartOptions" 

到您的基本图表和

  public chartOptions: legend = {
    position: 'right'
  };