angular バージョン 14 のリリースにより、スタンドアロン コンポーネントが導入され、NgModuleはオプションになりました。コードベースを構築および構造化する新しい方法を促進します。

この記事では、チャートを作成し、Angular スタンドアロン コンポーネントを公式の Highcharts Angular ラッパーと共に使用および統合する方法を説明します。

始めましょう

Angular の最新バージョンでプロジェクトを作成するには、まず次のコマンドで angular-cli パッケージを更新します。
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

このプロジェクトでは、以下を使用しています。

• 角度 14。
• ハイチャート V10.1.0。
• ハイチャート角度。

• ノード: 14.17.0
• npm 8.3.1
• Angular CLI: 14.0.2。

1. このタイプの環境に慣れていない場合は、Angular の公式ドキュメントで、ローカル環境ワークスペースのセットアップ方法と、スタンドアロン コンポーネントの詳細について説明しています。

2. highcharts-angularHighcharts ライブラリをインストールするには、次の命令を実行しますnpm install highcharts-angular --save。

3. パッケージをインポートするには、ファイルに移動し、パッケージからapp.module.tsモジュールをインポートします。HighchartsChartModulehighcharts-angular

4. Highcharts チャートを作成するには、Highcharts をインストールしますnpm install highcharts --save。

5.app.compoent.tsスタンドアロン コンポーネントとして宣言し、HighchartsChartModuleNgModule (オプション) の代わりに内部の imports 配列をインポートします。ルートなどのアプリケーション レベルの依存関係、main.ts での依存関係の挿入構成、app.component.tsまたはその他のコンポーネントでのコンポーネント レベル。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [HighchartsChartModule],
})

import './polyfills';
import {
  bootstrapApplication
} from '@angular/platform-browser';
import {
  AppComponent
} from './app/app.component';

bootstrapApplication(AppComponent);

以下のコメントであなたの考えや質問を自由に共有してください。

私たちのブログをチェックして、Highcharts を使用するための最良のヒントについて学んでください。

作者: ハルーン・アンサリ

Haroon Ansari はコンピューター サイエンス エンジニアです。彼は、javascript、Angular、および .NET で長年の経験を持っています。彼はデータの視覚化が大好きで、オープン ソース プロジェクトに貢献しています。Haroon をツイッター @haroonansari1 とLinkedInでフォローしてください。