javascript - chartjs-plugin-datalabels viser ikke verdier på chartjs

Jeg bruker følgende versjoner:

  • Angular: 14.0.6
  • TypeScript: 4.7.4
  • chart.js: ^3.8.2
  • chartjs-plugin-annotation: ^1.4.0
  • chartjs-plugin-datalabels: ^2.0.0
  • ng2-charts: ^4.0.0

Og jeg prøver å lage et enkelt demo Doughnat-diagram med dummydata. Problemet er at verdiene ikke vises på diagrammet, uansett hva jeg har prøvd. Jeg hjalp meg selv ved å bruke dette som et eksempel, men jeg fant ut at med den nyere versjonen fungerer ikke denne tilnærmingen. Her er hva jeg har prøvd så langt.

Min 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 { }

Min mal ser slik ut:

      <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>

I TS-filen har jeg importert pluginDataLabels samt andre typer som følger:

import {
  ChartConfiguration,
  ChartDataset,
  ChartOptions,
  ChartType,
} from "chart.js";
import * as pluginDataLabels from "chartjs-plugin-datalabels";

og så har jeg prøvd slik:

 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 { }

Men ingenting ser ut til å fungere.. Når jeg bruker de gamle versjonene og følger eksemplet ovenfor, fungerer alt, men jeg vil gjøre det med den nyere versjonen.. Noen forslag til hva jeg gjør feil?

Svar #1

Du registrerer ikke pluginen som beskrevet i dokumentasjonen

import {Chart} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.register(ChartDataLabels);

Relaterte artikler