我正在使用以下版本:
我正在尝试使用虚拟数据创建一个简单的演示 Doughnat 图表。问题是无论我尝试什么,图表上都没有显示这些值。我以它为例帮助自己,但我发现对于较新的版本,这种方法不起作用..这是我迄今为止尝试过的..
我的 app.module.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HeaderComponent } from './header/header.component'; import { FoodManagementModule } from './food-management/food-management.module'; import { NgChartsModule } from 'ng2-charts'; @NgModule({ declarations: [ AppComponent, HeaderComponent, ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, FoodManagementModule, NgChartsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
我的模板看起来像这样:
<div class="container"> <div class="row"> <div class="col-sm-6"> <canvas baseChart [datasets]="doughnutChartData" [labels]="doughnutChartLabels" [options]="doughnutChartOptions" [plugins]="doughnutChartPlugins" [legend]="doughnutChartLegend" [type]="doughnutChartType" > </canvas> </div> </div> </div>
在 TS 文件中,我导入了 pluginDataLabels 以及其他类型,如下所示:
import { ChartConfiguration, ChartDataset, ChartOptions, ChartType, } from "chart.js"; import * as pluginDataLabels from "chartjs-plugin-datalabels";
然后我试过这样:
public doughnutChartOptions: ChartConfiguration<'doughnut'>['options'] = { responsive: true, plugins: { datalabels: { display: true, anchor: 'center', align: 'center', font: { size: 20, }, color: "#000000" }, tooltip: { enabled: true, }, title: { display: true, text: 'Macros' }, legend: { display: true, }, }, }; // public doughnutChartOptions: ChartOptions = { // responsive: true, // plugins: { // datalabels: { // color: "#36A2EB", // display: true, // anchor: "end", // align: "end", // font: { // size: 20, // }, // }, // }, public doughnutChartLabels: string[] = ["Proteins", "Carbohydrates", "Fats"]; public doughnutChartType: ChartType = "doughnut"; public doughnutChartLegend: boolean = true; public doughnutChartPlugins = [pluginDataLabels]; public doughnutChartData: ChartDataset[] = [ { label: "Example", data: [33, 44, 55], datalabels: { color: "#36A2EB", display: true, }, }, ]; constructor() {} ngOnInit(): void { }
但似乎没有任何效果..当我使用旧版本并按照上面的示例进行操作时,一切正常,但我想用新版本来做..任何建议我做错了什么?
您没有按照文档中的说明注册插件
import {Chart} from 'chart.js'; import ChartDataLabels from 'chartjs-plugin-datalabels'; Chart.register(ChartDataLabels);