Angular 2とFusionChartsを使用してチャートコンポーネントを構築します-jsチュートリアル-php.cn

Angular 2とFusionChartsを使用してチャートコンポーネントを構築します

キーテイクアウト

構築チャートコンポーネントにAngular 2を利用して、拡張言語サポートとDOM管理を含むAngular 1.xよりも改善を活用しています。 JavaScriptを直接コーディングすることにより、専用のAngular 2プラグインが不足しているにもかかわらず、視覚的に魅力的なチャートを作成するために、FusionChartsをAngular 2とAngular 2と統合します。
FusionChartsの注釈機能を採用して、チャート軸に会社のロゴを追加するなど、チャートをカスタマイズします。
この記事は、Vildan Softicによってピアレビューされました。 SetePointコンテンツを最高にするためにSitePointのピアレビュアーのすべてに感謝します！
チャートの場合、FusionChartsが提供するJavaScriptチャートライブラリを使用します。チャートの優れたコレクションを提供し、すべての主要なブラウザと互換性があります。 FusionChartsはAngular専用のプラグインを提供していますが、Angular 2とはまだ互換性がありません。したがって、私はそれを使用するつもりはなく、代わりにJavaScriptとAngular 2を使用して直接コードします（

）。

私たちがプロットするチャートは、興味深い統計、つまり5つのトップテクノロジー企業（Amazon、Apple、Facebook、Google、Microsoft）の収益を描写し、2014年と2015年の収益データを切り替えるオプションがあります。最初にAngular 2でチャートを作成する段階的なプロセスを実行します。基本チャートを作成した後、注釈の追加やチャートデータの更新などの高度なトピックについて説明します。相変わらず、このチュートリアルのコードをGithub Repoからダウンロードすることも、記事の最後にある完成したチャートのデモにジャンプすることもできます。

Angular 2 vs Angular 1.x

Angular 2には、以前のメジャーバージョン（Angular 1.x）にいくつかの大きな変更があります。たとえば、TypeScriptやDARTなどの言語のサポート、およびDOMの更新を計算する方法です。 Angular 1の概念とテクニックがAngular 2にどのようにマッピングされるかについて詳しく知りたい場合は、公式のクイックリファレンスを確認できます。アプリをAngular 1.xからAngular 2に移行することに興味がある場合は、公式移行ガイドを読むことができます。

Angular 2はTypeScriptとDARTをサポートしていますが、Native JavaScriptを使用して、このチュートリアルでAngular 2アプリケーションを作成します。 TypeScriptまたはDARTを使用すると、不必要なビルドステップも導入されます。

セットアップ

Angular 2プロジェクトで起きて実行する方法はたくさんあります。最も簡単なのは、おそらく公式サイトに向かい、5分間のクイックスタートチュートリアルに従うことです。ただし、このアプローチに対するわずかな注意事項は、マシンにノードとNPMがインストールされていることに依存していることです。これのガイドはありますが、これらをインストールせずにこのチュートリアルをフォローしたい場合は、次のテンプレートを使用できます。

チャートコンポーネントの作成

コンポーネントは、Angular 2アプリケーションの構成要素です。それらは、ビューといくつかのロジックで構成されるコードの再利用可能な部分です。 Angular 1に精通している場合は、テンプレートとコントローラーを使用したディレクティブと考えることができます。

チャートコンポーネントの基礎は次のとおりです

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title</span>></span>Angular 2 FusionCharts Demo<span><span></title</span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link</span> href<span>='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'</span> rel<span>='stylesheet'</span>></span>
</span>
    <span><!-- 2. Load Angular 2 specific libraries -->
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script</span> src<span>="https://static.fusioncharts.com/code/latest/fusioncharts.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script</span> src<span>='main.js'</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart</span>></span>Loading...<span><span></angular-chart</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

ログイン後にコピー

何が起こっているのかを見てみましょう。

アプリの名前を付けて使用するIIFE（すぐに呼び出された関数式）から始めます。 window.chartappを引数として渡します。これは、定義されていない場合は空のオブジェクトに初期化されます。これは、私たちのアプリケーションが住む場所です。グローバルオブジェクト上の単一のプロパティで。 IIFEの内部では、Ng.Core（Angularのコアコンポーネントのコレクション）からコンポーネントとクラスのメソッドをチェーンすることにより、コンポーネント（AppComponent）を作成します。コンポーネントメソッドを渡しています。

セレクター：ホストHTML要素を指定する単純なCSSセレクター。 Angularは、このセレクターに一致するHTML要素に遭遇するたびに、コンポーネントのインスタンスを作成および表示します。

<span>(function(chartApp){
</span>  chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({
</span>    <span>selector: 'angular-chart',
</span>    <span>template: '<div>Chart will render here</div>'
</span>  <span>}).<span>Class</span>({
</span>    <span>constructor: function(){}
</span>  <span>});
</span>
  <span>document.addEventListener('DOMContentLoaded', function() {
</span>    ng<span>.platform.browser.bootstrap(chartApp.<span>AppComponent</span>);
</span>  <span>});
</span><span>})(window.chartApp || (window.chartApp = {}));
</span>

ログイン後にコピー

テンプレート：コンポーネントがレンダリングされたときに使用されるテンプレート。現在、プレースホルダー

要素を含む文字列を渡していますが、理想的には、これを独自のテンプレートに移動する必要があります。

クラスの方法は、テンプレートに動作とイベントバインディングを追加する場所です。

基本的なコンポーネントを定義したため、Angularのブラウザブートストラップ関数を使用して初期化します。

この時点でブラウザでコードを実行し、「チャートがここにレンダリングされる」というメッセージを表示できるはずです。

チャートの作成

2014年のチャートの作成といくつかのデータの表示に進みましょう。

これを行うには、チャートインスタンスのすべての構成パラメーターを含むオブジェクトを渡すFusionChartsコンストラクター関数を使用する必要があります。

タイプ：作成したいチャートのタイプ

renderat：チャートがレンダリングされるdomセレクター
幅と高さ：チャート寸法
ID：生成されたチャートのID
dataformat：DataSourceオプションに渡されたデータの形式
dataSource：実際のチャートの構成と、表示するデータ

完全な構成ファイルです。

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title</span>></span>Angular 2 FusionCharts Demo<span><span></title</span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link</span> href<span>='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'</span> rel<span>='stylesheet'</span>></span>
</span>
    <span><!-- 2. Load Angular 2 specific libraries -->
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script</span> src<span>="https://static.fusioncharts.com/code/latest/fusioncharts.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script</span> src<span>='main.js'</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart</span>></span>Loading...<span><span></angular-chart</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

ログイン後にコピー

チャートオプションが実際に何をしているのかわからない場合、またはチャートの外観を構成する方法を知りたい場合は、fusionchartsドキュメントのチャート属性ページを参照できます。

私たちがしなければならない他のことは、私たちのチャートをレンダリングするコンテナを含めるようにテンプレートを更新することです。これを行うには（以前に行ったように）コンポーネントのテンプレートプロパティに文字列を指定するか、テンプレートを独自のファイルに移動してTemplateUrlを使用して参照してください。

いずれにせよ、これは私たちのテンプレートがどのように見えるべきかです。

<span>(function(chartApp){
</span>  chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({
</span>    <span>selector: 'angular-chart',
</span>    <span>template: '<div>Chart will render here</div>'
</span>  <span>}).<span>Class</span>({
</span>    <span>constructor: function(){}
</span>  <span>});
</span>
  <span>document.addEventListener('DOMContentLoaded', function() {
</span>    ng<span>.platform.browser.bootstrap(chartApp.<span>AppComponent</span>);
</span>  <span>});
</span><span>})(window.chartApp || (window.chartApp = {}));
</span>

ログイン後にコピー

これまでのところ、これまでのデモです：

<span>new FusionCharts({
</span>  <span>"type": "column2d",
</span>  <span>"renderAt": "chart-container",
</span>  <span>"width": "550",
</span>  <span>"height": "400",
</span>  <span>"id": "revenue-chart",
</span>  <span>"dataFormat": "json",
</span>  <span>"dataSource": {
</span>    <span>"chart": {
</span>      <span>"yAxisName": "Revenue (In USD Billion)",
</span>      <span>"yAxisMaxValue": "200",
</span>      <span>...
</span>    <span>},
</span>    <span>"data": [{
</span>      <span>"label": "Amazon",
</span>      <span>"value": "88.99"
</span>    <span>}, {
</span>      <span>"label": "Apple",
</span>      <span>"value": "182.8"
</span>    <span>}
</span>    <span>...
</span>    <span>]
</span>  <span>}
</span><span>});
</span>

ログイン後にコピー

プランクのロード…

このデモのコードをPlunkerで表示できます。しかし、これは絶対に必要ではありません。チャルトアップコンストラクターですべてを直接実行することで同じ結果を得ることができます。

言及すべきその他の唯一のことは、初期化コードがFusionCharts.Readyメソッド内にラップされていることです。これにより、FusionChartsライブラリがロードされる前にチャートインスタンス化コードが呼び出されます。

基本チャートの準備が整っていると、名前の代わりに会社のロゴを使用したり、2015年の新しいデータでチャートを更新したりするなど、さらに機能を追加する時が来ました。

アノテーションの追加

X軸に会社のロゴを追加するには、FusionChartsの強力な機能の1つであるAnnotations

chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({
</span>  <span>selector: 'angular-chart',
</span>  <span>templateUrl: 'chart.html'
</span><span>}).<span>Class</span>({
</span>  <span>...
</span><span>});
</span>

ログイン後にコピー

を使用します。 FusionChartsオブジェクトの注釈により、チャートの指定された位置でカスタムシェイプまたは画像を描画できます。

チャートの中心に会社のロゴを追加するとします。注釈とマクロを使用して行うことができます。マクロはチャートの中心の座標を提供し、注釈ではその場所に画像を追加できます。たとえば、動的な注釈を使用して、チャートのデータに依存する位置に関する情報を取得すると、物事が面白くなります。列が終わる場所に何かを描きたいと想像してください。 Dynamic Annotation Macro $ dataSet.0.set.1.1.Endxおよび$ dataset.0.set.1.endyを使用して、列のエンドポイントのxおよびy座標を決定し、そこに何かを描画できます。注釈の詳細と、このFusionChartsドキュメントページでそれらの使用方法をご覧ください。

チャートでは、動的な注釈マクロを使用して、各列の開始座標と終了座標を取得します。そこで、それぞれの会社のロゴを描きます。また、チャート属性「showlabels」を使用してデフォルトのx軸ラベルを無効にします。

上記の目標を達成するには、次のコードをチャートの構成に追加します。

上記のコードで

：

タイプは、注釈のタイプを設定しています。

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title</span>></span>Angular 2 FusionCharts Demo<span><span></title</span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link</span> href<span>='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'</span> rel<span>='stylesheet'</span>></span>
</span>
    <span><!-- 2. Load Angular 2 specific libraries -->
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script</span> src<span>="https://static.fusioncharts.com/code/latest/fusioncharts.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script</span> src<span>='main.js'</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart</span>></span>Loading...<span><span></angular-chart</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

ログイン後にコピー

urlは画像のアドレスを設定しています。

上記のコードを追加した後、X軸にレンダリングされている会社のロゴが表示されるはずです。注釈の使用と他に可能なことの詳細については、ドキュメントページ（上記）を参照してください。

データの構造化。

したがって、さまざまな年に異なるデータセットを定義できるように、データを構成する方法を検討する必要があります。前述のように、FusionChartsは、構成オプションがデータプロパティを含めることを期待しています。これには、ラベル/値ペアのセットを含む配列が必要です。

複数のデータセットを処理する1つの方法は、コンストラクター関数の上部にあるデータセットオブジェクトを定義し、エイリアスを使用してコンストラクターに接続することです。

次に、FusionChartsコンストラクターに渡す構成オプションで、できることができます。

トグルのチャートデータの更新

また、

2015年

ボタンをクリックしてトグルして2014年のデータを表示すると、2015年のデータでチャートを更新したいと思います。。

<span>(function(chartApp){
</span>  chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({
</span>    <span>selector: 'angular-chart',
</span>    <span>template: '<div>Chart will render here</div>'
</span>  <span>}).<span>Class</span>({
</span>    <span>constructor: function(){}
</span>  <span>});
</span>
  <span>document.addEventListener('DOMContentLoaded', function() {
</span>    ng<span>.platform.browser.bootstrap(chartApp.<span>AppComponent</span>);
</span>  <span>});
</span><span>})(window.chartApp || (window.chartApp = {}));
</span>

ログイン後にコピー

2つのボタンを追加しましょう。これは、このアクションを実行し、スタイリングを提供するために使用されます。次のようにコンポーネントテンプレートを修正します：

イベントリスナーを追加し、Angular 2にNGCLASSディレクティブを追加するための新しい構文に注意してください。これらは、いくつかのブレースと括弧を除いて、Angular 1とほぼ同じです。

選択したCSSクラスをボタン要素に適用することにより、現在選択した年を強調するためのNGCLASSディレクティブを追加しました。これは、ボタンのクリック時に更新されるコンポーネントのSelectedYearプロパティに基づいています。

コンポーネントがコンストラクターの上部に次の行を追加することでコンポーネントがレンダリングするときに、現在選択された年を2014年に設定できます。

ボタンクリックを処理するロジックは、新年変更関数に追加されます。

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title</span>></span>Angular 2 FusionCharts Demo<span><span></title</span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link</span> href<span>='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'</span> rel<span>='stylesheet'</span>></span>
</span>
    <span><!-- 2. Load Angular 2 specific libraries -->
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script</span> src<span>="https://static.fusioncharts.com/code/latest/fusioncharts.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script</span> src<span>='main.js'</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart</span>></span>Loading...<span><span></angular-chart</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

ログイン後にコピー

このためには、チャート構成オプションと実際のチャートデータの両方を必要とするFusionChartのSetChartDataメソッドを使用します。最初にチャート属性を保存してから参照する代わりに、getChartDataメソッドを使用して、既にレンダリングされているチャートからチャート属性を取得し、年間特定のデータでそのデータを変更します。

<span>(function(chartApp){
</span>  chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({
</span>    <span>selector: 'angular-chart',
</span>    <span>template: '<div>Chart will render here</div>'
</span>  <span>}).<span>Class</span>({
</span>    <span>constructor: function(){}
</span>  <span>});
</span>
  <span>document.addEventListener('DOMContentLoaded', function() {
</span>    ng<span>.platform.browser.bootstrap(chartApp.<span>AppComponent</span>);
</span>  <span>});
</span><span>})(window.chartApp || (window.chartApp = {}));
</span>

ログイン後にコピー

ボタンと上記のHTMLを追加した後、それらのボタンのクリックハンドラーをクリックすると、それらのボタンをクリックすると、その年のデータをチャートにロードする必要があります。

demo

<span>new FusionCharts({
</span>  <span>"type": "column2d",
</span>  <span>"renderAt": "chart-container",
</span>  <span>"width": "550",
</span>  <span>"height": "400",
</span>  <span>"id": "revenue-chart",
</span>  <span>"dataFormat": "json",
</span>  <span>"dataSource": {
</span>    <span>"chart": {
</span>      <span>"yAxisName": "Revenue (In USD Billion)",
</span>      <span>"yAxisMaxValue": "200",
</span>      <span>...
</span>    <span>},
</span>    <span>"data": [{
</span>      <span>"label": "Amazon",
</span>      <span>"value": "88.99"
</span>    <span>}, {
</span>      <span>"label": "Apple",
</span>      <span>"value": "182.8"
</span>    <span>}
</span>    <span>...
</span>    <span>]
</span>  <span>}
</span><span>});
</span>

ログイン後にコピー

そして、これが最終的なデモです。

プランクのロード…

このデモのコードをPlunkerで表示できます。または、githubリポジトリからコードをダウンロードすることもできます。

プランカーをクリックすると、config.jsonファイルのデータセットプロパティを直接定義していることがわかります。これにより、コンポーネントの物事がずっときちんと維持されます。

シンプルな角度チャートを構築することから始めてから、注釈やその他のFusionChartsのAPIを使用して、より多くの機能を追加しました。しかし、これは氷山の一角にすぎず、Angular 2とFusionChartsの両方を使用してさらに多くのことができます。自分で探索できるもの：

より多くのチャートを含める：列チャートは、データセットを表すための最良の方法ではないとは限りません。ユースケースに応じて、ウォーターフォール、レーダー、ゲージなどのさまざまなチャートを使用する場合があります。このチュートリアルで説明されているプロセスを使用して、別のチャートをプロットして、それを正常に行うことができるかどうかを確認してみてください。 >

アプリにチャートを含める：ハイブリッドモバイルアプリを作成している場合は、Ionic 2（Ionicの最新バージョン）がAngular 2に基づいていることに注意する必要があります。イオンアプリのチャートを作成するためのベースとしてのこのチュートリアルも同様です。

その他のイベントを探索してください。このチュートリアルでは、SetChartDataメソッドの使用方法を説明しましたが、アプリのユーザーエクスペリエンスを強化するために使用できるイベントや方法がたくさんあります。上記のリンクされたページをチェックして、FusionChartsが提供するさまざまなイベントと方法の詳細をご覧ください。

自分でチャートを作成しようと困難に直面している場合は、AngularまたはFusionChartsのドキュメント（問題に応じて）を参照するか、以下にコメントを残してください。私は喜んで助けてくれます！

Angular2 fusionCharts

のチャートコンポーネントに関するよくある質問

angular2にFusionChartsをインストールするには、angular2にFusionChartsをインストールするには、最初にFusionChartsとAngular FusionChartsをNPM経由でインストールする必要があります。端末で次のコマンドを使用してください。

npmインストールfusioncharts

npmインストール後、インストール後、FusionChartsとAngular FusionChartsをコンポーネントファイルにインポートします。次に、ngmoduleインポートアレイにFusionChartSmoduleを追加します。 NPM経由でFusionChartsとAngular FusionChartsをインストールした後、Angular CLIプロジェクトにインポートできます。 ngmoduleインポートアレイにFusionChartSmoduleを追加することを忘れないでください。

Angular2のFusionChartsを使用して基本チャートを作成するには、基本チャートを作成するには、最初にチャート構成を定義する必要があります。成分。これには、チャートタイプ、データソース、その他のオプションが含まれます。次に、テンプレートのFusionChartsコンポーネントを使用してチャートをレンダリングします。チャートの構成を変更してチャートをカスタマイズできます。

Angular2のFusionChartsで作成できるチャートの種類はありますか？、エリア、ドーナツなど。また、組み合わせチャート、ズームラインチャート、ツリーマップなどの高度なチャートを作成することもできます。各チャートタイプには独自の構成オプションがあり、ニーズに合わせてカスタマイズできます。FusionChartsチャートのデータを更新するにはどうすればよいですか？チャート構成のデータソースを変更する必要があります。 FusionChartsは、データソースが変更されたときにチャートを自動的に更新します。 SetJsondataまたはSetChartDataメソッドを使用してデータをプログラムで更新することもできます。 FusionChartsとAngular FusionChartsをTypeScriptファイルにインポートし、通常のJavaScriptファイルで使用するように使用できます。 dataplotclick、chartclick、beforerenderなど、聴くことができるイベント。これらのイベントを処理するには、コンポーネントのイベントハンドラーを定義し、テンプレートのFusionChartsコンポーネントにバインドする必要があります。 FusionChartsは、幅広いカスタマイズオプションを提供します。色、フォント、境界、背景などをカスタマイズできます。これらのオプションは、チャート構成で設定できます