Блог

Я пытаюсь реализовать финансовую диаграмму в соответствии с этим руководством ниже:

https://valor-software.com/ng2-charts/

Я также нашел пример этой реализации здесь: https://stackblitz.com/edit/ng2-charts-financial-template?file=src/chartjs-chart-financial/chartjs-chart-financial.js

Я создаю новое приложение angular в VSC. Я сделал то же самое, что и в примере в stackblitz. Однако, когда я запускаю ng serve, я получил эту ошибку ниже:

 ERROR in ./src/app/app-chart-config.ts 4:0-222
"export 'BaseChartMetaConfig' was not found in 'ng2-charts'

ERROR in ./src/app/app-chart-config.ts 4:0-222
"export 'ChartDataSetsBase' was not found in 'ng2-charts'

ERROR in ./src/app/app-chart-config.ts 4:0-222
"export 'ChartDataSetsUnion' was not found in 'ng2-charts'

ERROR in ./src/app/app-chart-config.ts 4:0-222
"export 'ChartMetaConfig' was not found in 'ng2-charts'

ERROR in ./src/app/app-chart-config.ts 4:0-222
"export 'LegacyMetaConfig' was not found in 'ng2-charts'

ERROR in ./src/app/app-chart-config.ts 4:0-222
"export 'PromiscuousMetaConfig' was not found in 'ng2-charts'

ERROR in ./src/app/app-chart-config.ts 4:0-222
"export 'ScaleUnion' was not found in 'ng2-charts'

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve 'chartjs-adapter-luxon' in 'E:Chartjsfinancial3ng2-charts-financial-templatesrcapp'
  

Проблема, похоже, в файле app-chart-config.ts.

 import * as ng2Charts from '../../node_modules/ng2-charts';
import { AppChartMetaConfig } from './app-chart-meta-config';

// Generated by ng2-charts-schematics. This file should not need any modification.
// To add new features to the chart.js module, edit the file 'app-chart-meta-config.ts`

export * from './app-chart-meta-config';
export {
  ChartsModule,
  Color,
  Colors,
  defaultColors,
  ChartDataSetsBase,
  ChartDataSetsUnion,
  BaseChartMetaConfig,
  ChartMetaConfig,
  LegacyMetaConfig,
  PromiscuousMetaConfig,
  ScaleUnion,
  ThemeService,
  BaseChartDirective,
  Label,
} from 'ng2-charts';

export type AngularChart = ng2Charts.AngularChart<AppChartMetaConfig>;
export type ChartOptions = ng2Charts.ChartOptions<AppChartMetaConfig> amp;
  AppChartMetaConfig['additionalOptions'];
export type ChartDataSetsBar = ng2Charts.ChartDataSetsBar<AppChartMetaConfig>;
export type ChartDataSetsLine = ng2Charts.ChartDataSetsLine<AppChartMetaConfig>;
export type ChartDataSetsDoughnut = ng2Charts.ChartDataSetsDoughnut<
  AppChartMetaConfig
>;
export type ChartDataSetsRadar = ng2Charts.ChartDataSetsRadar<
  AppChartMetaConfig
>;
export type ChartDataSetsBubble = ng2Charts.ChartDataSetsBubble<
  AppChartMetaConfig
>;
export type ChartDataSetsScatter = ng2Charts.ChartDataSetsScatter<
  AppChartMetaConfig
>;
export type MultiDataSet = ng2Charts.MultiDataSet<AppChartMetaConfig>;
export type SingleDataSet = ng2Charts.SingleDataSet<AppChartMetaConfig>;
export type ChartType = ng2Charts.ChartType<AppChartMetaConfig>;
export type LinearScale = ng2Charts.LinearScale<AppChartMetaConfig>;
export type LogarithmicScale = ng2Charts.LogarithmicScale<AppChartMetaConfig>;
export type CategoryScale = ng2Charts.CategoryScale<AppChartMetaConfig>;
export type CartesianScale = ng2Charts.CartesianScale<AppChartMetaConfig>;
export type RadialScale = ng2Charts.RadialScale<AppChartMetaConfig>;
export type RadialLinearScale = ng2Charts.RadialLinearScale<AppChartMetaConfig>;
  

My app.module.ts:

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

Мой package.json

     {
  "name": "ng2-charts-financial-template",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.1.2",
    "@angular/common": "~10.1.2",
    "@angular/compiler": "~10.1.2",
    "@angular/core": "~10.1.2",
    "@angular/forms": "~10.1.2",
    "@angular/platform-browser": "~10.1.2",
    "@angular/platform-browser-dynamic": "~10.1.2",
    "@angular/router": "~10.1.2",
    "chart.js": "^2.9.4",
    "ng2-charts": "^2.4.2",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.2",
    "@angular/cli": "~10.1.2",
    "@angular/compiler-cli": "~10.1.2",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ng2-charts-schematics": "^0.1.7",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}
  

Похоже, что в ng2-charts отсутствует некоторый экспорт. Кто-нибудь знает, как это решить?

Заранее спасибо!

Приветствия, Марсело