web-dev-qa-db-ja.com

Angular Primeng：ERROR ReferenceError：Chart is not defined at UIChart.initChart（chart.js：53）

Angular Primeng：エラーReferenceError：UIChart.initChart（chart.js：53）でチャートが定義されていません

輸入：

"../node_modules/chart.js/dist/Chart.js",

"../node_modules/chart.js/dist/Chart.bundle.js",

"../node_modules/chart.js/dist/Chart.min.js",

"../node_modules/chart.js/dist/Chart.bundle.min.js"

import { Chart } from 'chart.js';

import { ChartModule } from 'primeng/primeng';
angularchartsprimengangular-chart
6
Radhika Kandasamy

あなたの質問とコードから、これを達成するためにどのような手順を踏んだかは明確ではありません。 Primengの​​ドキュメントに正しく従えば、これを簡単に実現できます。以下は、チャートを実行するために私が従った段階的な詳細です。

使ってます：

  • 角度6
  • プライミング：^ 6.0.0
  • chart.js：^ 2.7.2

まず、チャートjsをインストールします。

npm install chart.js --save

次に、chartjsをangular.jsonファイルに追加します。

"scripts": [
    "../node_modules/chart.js/dist/Chart.js",
]

スクリプトで「../」を使用する必要はありません。 node_moduleとangular.jsonファイルが同じレベルにある場合は、以下のように使用します。これがデフォルトの動作です。

 "scripts": [
    "node_modules/chart.js/dist/Chart.js",
]

app.module.ts内

質問で述べたように、ChartModuleのみをインポートし、Chart.jsからインポートしません。

import {ChartModule} from 'primeng/chart';

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

今はcomponent.html：

<p-chart type="line" [data]="data"></p-chart>

component.ts：

data: any;
ngOnInit() {

this.data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                {
                    label: 'First Dataset',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    fill: false,
                    borderColor: '#4bc0c0'
                },
                {
                    label: 'Second Dataset',
                    data: [28, 48, 40, 19, 86, 27, 90],
                    fill: false,
                    borderColor: '#565656'
                }
            ]
        }
}

それだけで十分です。

11
DirtyMind