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

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

FusionChartsチャートをエクスポートするにはどうすればよいですか？

FusionChartsチャートで問題をデバッグするにはどうすればよいですか？チャートレンダリングプロセス。デバッグモードを有効にするには、チャート構成でデバッグモードオプションをtrueに設定します。その後、ブラウザのコンソールのログを表示できます。

ホームページ

ウェブフロントエンド

jsチュートリアル

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

Joseph Gordon-Levitt

Feb 17, 2025 pm 12:51 PM

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は、幅広いカスタマイズオプションを提供します。色、フォント、境界、背景などをカスタマイズできます。これらのオプションは、チャート構成で設定できます

FusionChartsチャートをエクスポートするにはどうすればよいですか？

FusionChartsは、組み込みのエクスポート機能を提供します。画像、PDF、またはSVGとしてチャートをエクスポートできます。エクスポートを有効にするには、チャート構成でエクスポート型オプションをtrueに設定する必要があります。

FusionChartsチャートで問題をデバッグするにはどうすればよいですか？チャートレンダリングプロセス。デバッグモードを有効にするには、チャート構成でデバッグモードオプションをtrueに設定します。その後、ブラウザのコンソールのログを表示できます。

以上がAngular 2とFusionChartsを使用してチャートコンポーネントを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1662

CakePHP チュートリアル

1419

Laravel チュートリアル

1313

PHP チュートリアル

1262

C# チュートリアル

1235

Related knowledge

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptの進化：現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptエンジン：実装の比較 Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

JavaScript：Web言語の汎用性の調査 Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合） Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

C/CからJavaScriptへ：すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合） Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

See all articles

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

キーテイクアウト

Angular 2 vs Angular 1.x

チャートの作成

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

また、

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

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

FusionChartsチャートをエクスポートするにはどうすればよいですか？

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック