Angular-highcharts-quick-guide
Angular Highcharts-概要
*HighChart Angular Wrapper* は、Angularアプリケーション内でエレガントで機能豊富なHighchartsビジュアライゼーションを提供するオープンソースの角度ベースのコンポーネントであり、Angularコンポーネントとシームレスに使用できます。 Angularアプリケーション内の適切な例を使用して、Highchartsのすべての基本コンポーネントを説明する章があります。特徴
- 互換性-最新のブラウザはすべて、iPhone/iPadブラウザおよびInternet Explorer 6以降でサポートされています。 最新のブラウザは、グラフィックレンダリングにSVGを使用し、従来のInternet ExplorerのグラフィックはVMLを使用して描画されます。
- *純粋なTypeScript *-完全なHighcharts APIがTypeScriptで利用可能であるため、JavaScriptは必要ありません。
- * Flashなし*-Highchartsはネイティブブラウザーテクノロジーを使用し、最新のモバイルデバイス上でチャートを変更せずに実行できるため、FlashプレーヤーやJavaなどのクライアント側プラグインの要件はありません。
- きれいな構文-ほとんどのメソッドはチェーン可能であるため、チャートの構成オプションはJSONと同じくらい厳密な構文を使用して管理できます。
- 動的-チャート作成後はいつでもシリーズとポイントを動的に追加できます。 サポートされているイベントフック。 サーバーの相互作用がサポートされています。
- ドキュメント化された-Highcharts APIは、多数のコードと構文の例とともに完全にドキュメント化されています。
Angular Highcharts-環境設定
このチュートリアルでは、HighchartsとAngular Frameworkで作業を開始するための開発環境を準備する方法について説明します。 この章では、Angular 6に必要な環境設定について説明します。 Angular 6をインストールするには、次のものが必要です-
- ノード番号
- Npm
- 角度CLI
- コードを書くためのIDE
Nodejsは8.11より大きく、npmは5.6より大きくなければなりません。
ノード番号
nodejsがシステムにインストールされているかどうかを確認するには、ターミナルで node -v と入力します。 これは、現在システムにインストールされているnodejsのバージョンを確認するのに役立ちます。
C:\>node -v
v8.11.3何も印刷されない場合は、システムにnodejsをインストールします。 nodejsをインストールするには、nodejsのホームページhttps://nodejs.org/en/download/にアクセスし、OSに基づいてパッケージをインストールします。
nodejsのホームページは次のようになります-
OSに基づいて、必要なパッケージをインストールします。 nodejsがインストールされると、npmも一緒にインストールされます。 npmがインストールされているかどうかを確認するには、ターミナルでnpm -vと入力します。 npmのバージョンが表示されます。
C:\>npm -v
5.6.0Angular 6のインストールは、angular CLIを使用して非常に簡単です。 コマンドのリファレンスを取得するには、angularのホームページhttps://cli.angular.io/にアクセスしてください。
*npm install -g @ angular/cli* と入力して、システムにangle cliをインストールします。Angular CLIをインストールすると、ターミナルに上記のインストールが取得されます。 任意のIDE、つまりWebStorm、Atom、Visual Studio Codeなどを使用できます。
ハイチャートをインストールする
次のコマンドを実行して、作成されたプロジェクトにhighchartモジュールをインストールします。
highchartsApp>npm install highcharts --save
+ [email protected]
added 1 package in 137.534s次のコマンドを実行して、作成されたプロジェクトにhighchartラッパーモジュールをインストールします。
highchartsApp>npm install highcharts-angular --save
+ [email protected]
added 1 package in 20.93shighchartsApp.module.tsファイルに次のエントリを追加します
import { HighchartsChartComponent } from 'highcharts-angular';
declarations: [
...
HighchartsChartComponent
],Angular-highcharts-configuration-syntax
角度ハイチャート-折れ線グラフ
折れ線グラフは、折れ線/スプラインベースのグラフの描画に使用されます。 このセクションでは、さまざまな種類の折れ線グラフとスプラインベースのグラフについて説明します。
| Sr.No | Chart Type & Description |
|---|---|
| 1 |
基本的な折れ線グラフ。 |
| 2 |
データラベル付きのグラフ。 |
| 3 |
時系列を使用したグラフ。 |
| 4 |
反転軸を持つスプライングラフ。 |
| 5 |
熱/雨のシンボルを使用したスプラインチャート。 |
| 6 |
プロットバンド付きのスプライングラフ。 |
角度ハイチャート-面グラフ
エリアチャートは、エリアベースのチャートを描画するために使用されます。 このセクションでは、さまざまなタイプの面積ベースのチャートについて説明します。
| Sr.No. | Chart Type & Description |
|---|---|
| 1 |
基本的な面グラフ。 |
| 2 |
負の値を持つ面グラフ。 |
| 3 |
互いに積み上げられた領域を持つグラフ。 |
| 4 |
パーセンテージでデータを示すグラフ。 |
| 5 |
データに欠損点があるチャート。 |
| 6 |
反転軸を使用するエリア。 |
| 7 |
スプラインを使用した面グラフ。 |
Angular Highcharts-棒グラフ
棒グラフは、棒グラフを描くために使用されます。 このセクションでは、さまざまなタイプの棒グラフを説明します。
| Sr.No. | Chart Type & Description |
|---|---|
| 1 |
基本的な棒グラフ。 |
| 2 |
棒が積み上げられた棒グラフ。 |
| 3 |
Bar Chart with negative values 負の値を持つ棒グラフ。 |
Angular Highcharts-縦棒グラフ
縦棒グラフは、縦棒ベースのグラフを描画するために使用されます。 このセクションでは、さまざまなタイプの列ベースのチャートについて説明します。
| Sr.No. | Chart Type & Description |
|---|---|
| 1 |
基本的な縦棒グラフ。 |
| 2 |
負の値を持つ縦棒グラフ。 |
| 3 |
列が互いに積み上げられたグラフ。 |
| 4 |
積み上げおよびグループ化された形式の列を持つグラフ。 |
| 5 |
Column with stacked percentage 積み上げパーセンテージのグラフ。 |
| 6 |
列にラベルが回転した縦棒グラフ。 |
| 7 |
範囲を使用した縦棒グラフ。 |
Angular-highcharts-pie-charts Angular-highcharts-scatter-chart
Angular Highcharts-ダイナミックチャート
動的なチャートは、チャートのレンダリング後にデータを変更できるデータベースのチャートを描画するために使用されます。 このセクションでは、さまざまなタイプの動的チャートについて説明します。
| Sr.No. | Chart Type & Description |
|---|---|
| 1 |
毎秒更新されるスプラインチャート。 |
| 2 |
ポイント追加機能を備えたチャート。 |
Angular Highcharts-組み合わせ
組み合わせチャートは、混合チャートを描画するために使用されます。たとえば、円グラフ付きの棒グラフ。 このセクションでは、さまざまなタイプの組み合わせチャートについて説明します。
| Sr.No. | Chart Type & Description |
|---|---|
| 1 |
列、線、および円グラフ。 |
| 2 |
二重軸、線、および列を持つグラフ。 |
| 3 |
複数の軸を持つグラフ。 |
| 4 |
回帰線を含む散布図。 |
Angular Highcharts-立体チャート
3Dチャートは、3次元チャートを描くために使用されます。 このセクションでは、さまざまなタイプの3Dチャートについて説明します。
| Sr.No. | Chart Type & Description |
|---|---|
| 1 |
3D縦棒グラフ。 |
| 2 |
3D散布図。 |
| 3 |
3D円グラフ。 |
Angular Highcharts-マップチャート
マップチャートは、ヒートマップまたはツリーマップチャートの描画に使用されます。 このセクションでは、さまざまなタイプのマップチャートについて説明します。
| Sr.No. | Chart Type & Description |
|---|---|
| 1 |
ヒートマップ。 |
| 2 |
ツリーマップ。 |
