Angular ChartJS 左对齐图例 - JavaScript

在使用 Angular 和 ChartJS 创建图表时，可能需要将图例左对齐。这是如何实现的简短介绍。

步骤

1. 在 app.module.ts 中导入 ChartJS 模块

import { ChartsModule } from 'ng2-charts';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 在 app.component.ts 中定义图表配置项

public pieChartOptions: ChartOptions = {
  responsive: true,
  legend: {
    position: 'left'
  }
};

3. 在 app.component.ts 中定义数据和标签

public pieChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May'];

public pieChartData: SingleDataSet = [200, 400, 600, 800, 1000];

4. 在 app.component.ts 中定义图表类型

public pieChartType: ChartType = 'pie';

5. 在 app.component.html 文件中使用 ngx-chart 组件

<div style="display: block;">
  <canvas baseChart
          [data]="pieChartData"
          [labels]="pieChartLabels"
          [chartType]="pieChartType"
          [options]="pieChartOptions"
          [legend]="true"
  ></canvas>
</div>

结论

通过在 app.component.ts 中定义 pieChartOptions 并将其 position 属性设置为 left，可以将 ChartJS 图例左对齐。