キーテイクアウト
- 構(gòu)築チャートコンポーネントにAngular 2を利用して、拡張言語サポートとDOM管理を含むAngular 1.xよりも改善を活用しています。 JavaScriptを直接コーディングすることにより、専用のAngular 2プラグインが不足しているにもかかわらず、視覚的に魅力的なチャートを作成するために、FusionChartsをAngular 2とAngular 2と統(tǒng)合します。 データセット間を切り替えることができる動(dòng)的チャートコンポーネントを開発し（たとえば、2014年と2015年の主要なハイテク企業(yè)の収益統(tǒng)計(jì)）、インタラクティブ性とユーザーエンゲージメントの向上。
- FusionChartsの注釈機(jī)能を採用して、チャート軸に會(huì)社のロゴを追加するなど、チャートをカスタマイズします。 Angular 2およびFusionChartsを使用したさらなる機(jī)能と統(tǒng)合の可能性を調(diào)査し、より複雑な構(gòu)成とチャートタイプの基本チャートコンポーネントを読者に拡張することを奨勵(lì)しています。
- この記事は、Vildan Softicによってピアレビューされました。 SetePointコンテンツを最高にするためにSitePointのピアレビュアーのすべてに感謝します！ Web開発者として、見逃せないものがあれば、Angular 2です。これは、Googleからの人気のあるJavaScriptフレームワークの完全な書き直しであり、すべての正しい理由で常にニュースになっています。これは、以前のバージョンよりもいくつかの大きな改善を提供しているため、美しいチャートを構(gòu)築するために今日それを選択しています。
- チャートの場合、FusionChartsが提供するJavaScriptチャートライブラリを使用します。チャートの優(yōu)れたコレクションを提供し、すべての主要なブラウザと互換性があります。 FusionChartsはAngular専用のプラグインを提供していますが、Angular 2とはまだ互換性がありません。したがって、私はそれを使用するつもりはなく、代わりにJavaScriptとAngular 2を使用して直接コードします（ 注：プラグインを使用することをお?jiǎng)幛幛筏蓼埂％ⅴ抓辘茿ngular 1を使用しています
私たちがプロットするチャートは、興味深い統(tǒng)計(jì)、つまり5つのトップテクノロジー企業(yè)（Amazon、Apple、Facebook、Google、Microsoft）の収益を描寫し、2014年と2015年の収益データを切り替えるオプションがあります。最初にAngular 2でチャートを作成する段階的なプロセスを?qū)g行します?；茎隶悌`トを作成した後、注釈の追加やチャートデータの更新などの高度なトピックについて説明します。 相変わらず、このチュートリアルのコードをGithub Repoからダウンロードすることも、記事の最後にある完成したチャートのデモにジャンプすることもできます。
Angular 2 vs Angular 1.x
Angular 2には、以前のメジャーバージョン（Angular 1.x）にいくつかの大きな変更があります。たとえば、TypeScriptやDARTなどの言語のサポート、およびDOMの更新を計(jì)算する方法です。 Angular 1の概念とテクニックがAngular 2にどのようにマッピングされるかについて詳しく知りたい場合は、公式のクイックリファレンスを確認(rèn)できます。アプリをAngular 1.xからAngular 2に移行することに興味がある場合は、公式移行ガイドを読むことができます。Angular 2はTypeScriptとDARTをサポートしていますが、Native JavaScriptを使用して、このチュートリアルでAngular 2アプリケーションを作成します。 TypeScriptまたはDARTを使用すると、不必要なビルドステップも導(dǎo)入されます。
セットアップAngular 2プロジェクトで起きて実行する方法はたくさんあります。最も簡単なのは、おそらく公式サイトに向かい、5分間のクイックスタートチュートリアルに従うことです。 ただし、このアプローチに対するわずかな注意事項(xiàng)は、マシンにノードとNPMがインストールされていることに依存していることです。これのガイドはありますが、これらをインストールせずにこのチュートリアルをフォローしたい場合は、次のテンプレートを使用できます。
チャートコンポーネントの作成
コンポーネントは、Angular 2アプリケーションの構(gòu)成要素です。それらは、ビューといくつかのロジックで構(gòu)成されるコードの再利用可能な部分です。 Angular 1に精通している場合は、テンプレートとコントローラーを使用したディレクティブと考えることができます。
チャートコンポーネントの基礎(chǔ)は次のとおりです
<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（すぐに呼び出された関數(shù)式）から始めます。 window.chartappを引數(shù)として渡します。これは、定義されていない場合は空のオブジェクトに初期化されます。これは、私たちのアプリケーションが住む場所です。グローバルオブジェクト上の単一のプロパティで。 IIFEの內(nèi)部では、Ng.Core（Angularのコアコンポーネントのコレクション）からコンポーネントとクラスのメソッドをチェーンすることにより、コンポーネント（AppComponent）を作成します。コンポーネントメソッドを渡しています。
セレクター：ホストHTML要素を指定する?yún)g純な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>テンプレート：コンポーネントがレンダリングされたときに使用されるテンプレート?，F(xiàn)在、プレースホルダークラスの方法は、テンプレートに動(dòng)作とイベントバインディングを追加する場所です。
基本的なコンポーネントを定義したため、Angularのブラウザブートストラップ関數(shù)を使用して初期化します。
この時(shí)點(diǎn)でブラウザでコードを?qū)g行し、「チャートがここにレンダリングされる」というメッセージを表示できるはずです。チャートの作成
2014年のチャートの作成といくつかのデータの表示に進(jìn)みましょう。
これを行うには、チャートインスタンスのすべての構(gòu)成パラメーターを含むオブジェクトを渡すFusionChartsコンストラクター関數(shù)を使用する必要があります。タイプ：作成したいチャートのタイプ
- renderat：チャートがレンダリングされるdomセレクター
- 幅と高さ：チャート寸法
- ID：生成されたチャートのID
- dataformat：DataSourceオプションに渡されたデータの形式
- dataSource：実際のチャートの構(gòu)成と、表示するデータ
<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>
チャートオプションが実際に何をしているのかわからない場合、またはチャートの外観を構(gòu)成する方法を知りたい場合は、fusionchartsドキュメントのチャート屬性ページを參照できます。
私たちがしなければならない他のことは、私たちのチャートをレンダリングするコンテナを含めるようにテンプレートを更新することです。これを行うには（以前に行ったように）コンポーネントのテンプレートプロパティに文字列を指定するか、テンプレートを獨(dú)自のファイルに移動(dòng)して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で表示できます。 しかし、これは絶対に必要ではありません。チャルトアップコンストラクターですべてを直接実行することで同じ結(jié)果を得ることができます。
言及すべきその他の唯一のことは、初期化コードがF(xiàn)usionCharts.Readyメソッド內(nèi)にラップされていることです。これにより、FusionChartsライブラリがロードされる前にチャートインスタンス化コードが呼び出されます。
基本チャートの準(zhǔn)備が整っていると、名前の代わりに會(huì)社のロゴを使用したり、2015年の新しいデータでチャートを更新したりするなど、さらに機(jī)能を追加する時(shí)が來ました。
アノテーションの追加X軸に會(huì)社のロゴを追加するには、FusionChartsの強(qiáng)力な機(jī)能の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オブジェクトの注釈により、チャートの指定された位置でカスタムシェイプまたは畫像を描畫できます。チャートの中心に會(huì)社のロゴを追加するとします。注釈とマクロを使用して行うことができます。マクロはチャートの中心の座標(biāo)を提供し、注釈ではその場所に畫像を追加できます。 たとえば、動(dòng)的な注釈を使用して、チャートのデータに依存する位置に関する情報(bào)を取得すると、物事が面白くなります。列が終わる場所に何かを描きたいと想像してください。 Dynamic Annotation Macro $ dataSet.0.set.1.1.Endxおよび$ dataset.0.set.1.endyを使用して、列のエンドポイントのxおよびy座標(biāo)を決定し、そこに何かを描畫できます。注釈の詳細(xì)と、このFusionChartsドキュメントページでそれらの使用方法をご覧ください。
チャートでは、動(dòng)的な注釈マクロを使用して、各列の開始座標(biāo)と終了座標(biāo)を取得します。そこで、それぞれの會(huì)社のロゴを描きます。また、チャート屬性「showlabels」を使用してデフォルトのx軸ラベルを無効にします。上記の目標(biāo)を達(dá)成するには、次のコードをチャートの構(gòu)成に追加します。
上記のコードで：
タイプは、注釈のタイプを設(shè)定しています。
<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は畫像のアドレスを設(shè)定しています。
- xとyは、畫像の開始xとy座標(biāo)を設(shè)定しています。
- 上記のコードを追加した後、X軸にレンダリングされている會(huì)社のロゴが表示されるはずです。注釈の使用と他に可能なことの詳細(xì)については、ドキュメントページ（上記）を參照してください。 データセット間の切り替え
- 私たちが実裝したい最後のことは、ユーザーが年を切り替えることを許可することです。
したがって、さまざまな年に異なるデータセットを定義できるように、データを構(gòu)成する方法を検討する必要があります。前述のように、FusionChartsは、構(gòu)成オプションがデータプロパティを含めることを期待しています。これには、ラベル/値ペアのセットを含む配列が必要です。
複數(shù)のデータセットを処理する1つの方法は、コンストラクター関數(shù)の上部にあるデータセットオブジェクトを定義し、エイリアスを使用してコンストラクターに接続することです。
次に、FusionChartsコンストラクターに渡す構(gòu)成オプションで、できることができます。
トグルのチャートデータの更新また、
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つのボタンを追加しましょう。これは、このアクションを?qū)g行し、スタイリングを提供するために使用されます。次のようにコンポーネントテンプレートを修正します：イベントリスナーを追加し、Angular 2にNGCLASSディレクティブを追加するための新しい構(gòu)文に注意してください。これらは、いくつかのブレースと括弧を除いて、Angular 1と??ほぼ同じです。
選択したCSSクラスをボタン要素に適用することにより、現(xiàn)在選択した年を強(qiáng)調(diào)するためのNGCLASSディレクティブを追加しました。これは、ボタンのクリック時(shí)に更新されるコンポーネントのSelectedYearプロパティに基づいています。
コンポーネントがコンストラクターの上部に次の行を追加することでコンポーネントがレンダリングするときに、現(xiàn)在選択された年を2014年に設(shè)定できます。ボタンクリックを処理するロジックは、新年変更関數(shù)に追加されます。
<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>
このためには、チャート構(gòu)成オプションと実際のチャートデータの両方を必要とする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ファイルのデータセットプロパティを直接定義していることがわかります。これにより、コンポーネントの物事がずっときちんと維持されます。
シンプルな角度チャートを構(gòu)築することから始めてから、注釈やその他のFusionChartsのAPIを使用して、より多くの機(jī)能を追加しました。しかし、これは氷山の一角にすぎず、Angular 2とFusionChartsの両方を使用してさらに多くのことができます。自分で探索できるもの：
より多くのチャートを含める：列チャートは、データセットを表すための最良の方法ではないとは限りません。ユースケースに応じて、ウォーターフォール、レーダー、ゲージなどのさまざまなチャートを使用する場合があります。このチュートリアルで説明されているプロセスを使用して、別のチャートをプロットして、それを正常に行うことができるかどうかを確認(rèn)してみてください。 >
アプリにチャートを含める：ハイブリッドモバイルアプリを作成している場合は、Ionic 2（Ionicの最新バージョン）がAngular 2に基づいていることに注意する必要があります。イオンアプリのチャートを作成するためのベースとしてのこのチュートリアルも同様です。
- その他のイベントを探索してください。このチュートリアルでは、SetChartDataメソッドの使用方法を説明しましたが、アプリのユーザーエクスペリエンスを強(qiáng)化するために使用できるイベントや方法がたくさんあります。上記のリンクされたページをチェックして、FusionChartsが提供するさまざまなイベントと方法の詳細(xì)をご覧ください。
自分でチャートを作成しようと困難に直面している場合は、AngularまたはFusionChartsのドキュメント（問題に応じて）を參照するか、以下にコメントを殘してください。私は喜んで助けてくれます！
Angular2 fusionChartsのチャートコンポーネントに関するよくある質(zhì)問
angular2にFusionChartsをインストールするには、angular2にFusionChartsをインストールするには、最初にFusionChartsとAngular FusionChartsをNPM経由でインストールする必要があります。端末で次のコマンドを使用してください。
npmインストールfusionchartsnpmインストール後、インストール後、FusionChartsとAngular FusionChartsをコンポーネントファイルにインポートします。次に、ngmoduleインポートアレイにFusionChartSmoduleを追加します。 NPM経由でFusionChartsとAngular FusionChartsをインストールした後、Angular CLIプロジェクトにインポートできます。 ngmoduleインポートアレイにFusionChartSmoduleを追加することを忘れないでください。
Angular2のFusionChartsを使用して基本チャートを作成するには、基本チャートを作成するには、最初にチャート構(gòu)成を定義する必要があります。成分。これには、チャートタイプ、データソース、その他のオプションが含まれます。次に、テンプレートのFusionChartsコンポーネントを使用してチャートをレンダリングします。チャートの構(gòu)成を変更してチャートをカスタマイズできます。
FusionChartsチャートをエクスポートするにはどうすればよいですか？
FusionChartsは、組み込みのエクスポート機(jī)能を提供します。畫像、PDF、またはSVGとしてチャートをエクスポートできます。エクスポートを有効にするには、チャート構(gòu)成でエクスポート型オプションをtrueに設(shè)定する必要があります。
FusionChartsチャートで問題をデバッグするにはどうすればよいですか？チャートレンダリングプロセス。デバッグモードを有効にするには、チャート構(gòu)成でデバッグモードオプションをtrueに設(shè)定します。その後、ブラウザのコンソールのログを表示できます。
以上がAngular 2とFusionChartsを使用してチャートコンポーネントを構(gòu)築しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
node.jsでHTTPリクエストを作成する方法は？
Jul 13, 2025 am 02:18 AM
node.jsでHTTPリクエストを開始するには、組み込みモジュール、axios、およびnode-fetchを使用する3つの一般的な方法があります。 1.依存関係のない內(nèi)蔵http/httpsモジュールを使用します。これは基本的なシナリオに適していますが、https.get（）を使用してデータを取得したり、.write（）を介してPOSTリクエストを送信するなど、データステッチとエラーモニタリングの手動(dòng)処理が必要です。 2.Axiosは、約束に基づいたサードパーティライブラリです。簡潔な構(gòu)文と強(qiáng)力な機(jī)能を備えており、非同期/待ち聲、自動(dòng)JSON変換、インターセプターなどをサポートします。非同期リクエスト操作を簡素化することをお?jiǎng)幛幛筏蓼埂?3.Node-Fetchは、約束と単純な構(gòu)文に基づいて、ブラウザフェッチに似たスタイルを提供します
JavaScriptデータ型：プリミティブ対參照
Jul 13, 2025 am 02:43 AM
JavaScriptデータ型は、プリミティブタイプと參照タイプに分割されます。プリミティブタイプには、文字列、數(shù)字、ブール、ヌル、未定義、シンボルが含まれます。値は不変であり、コピーは値を割り當(dāng)てるときにコピーされるため、互いに影響を與えません。オブジェクト、配列、関數(shù)などの參照タイプはメモリアドレスを保存し、同じオブジェクトを指す変數(shù)は互いに影響します。 TypeofとInstanceOFを使用してタイプを決定できますが、TypeOfNullの歴史的な問題に注意してください。これらの2種類の違いを理解することは、より安定した信頼性の高いコードを書くのに役立ちます。
React vs Angular vs Vue：どのJSフレームワークが最適ですか？
Jul 05, 2025 am 02:24 AM
どのJavaScriptフレームワークが最良の選択ですか？答えは、あなたのニーズに応じて最も適切なものを選択することです。 1.反応は柔軟で無料で、高いカスタマイズとチームアーキテクチャ機(jī)能を必要とする中規(guī)模および大規(guī)模プロジェクトに適しています。 2。Angularは、エンタープライズレベルのアプリケーションと長期的なメンテナンスに適した完全なソリューションを提供します。 3. Vueは使いやすく、中小規(guī)模のプロジェクトや迅速な発展に適しています。さらに、既存のテクノロジースタック、チームサイズ、プロジェクトのライフサイクル、およびSSRが必要かどうかは、フレームワークを選択する上で重要な要素でもあります。要するに、絶対に最良のフレームワークはありません。最良の選択は、あなたのニーズに合ったものです。
JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。
Jul 08, 2025 pm 02:27 PM
こんにちは、JavaScript開発者！今週のJavaScriptニュースへようこそ！今週は、DenoとのOracleの商標(biāo)紛爭、新しいJavaScript Timeオブジェクトがブラウザ、Google Chromeアップデート、およびいくつかの強(qiáng)力な開発ツールによってサポートされています。始めましょう！ 「JavaScript」の商標(biāo)を登録しようとするDeno Oracleの試みとのOracleの商標(biāo)紛爭は、論爭を引き起こしました。 Node.jsとDenoの作成者であるRyan Dahlは、商標(biāo)をキャンセルするために請(qǐng)願(yuàn)書を提出しました。
ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ
Jul 08, 2025 am 02:40 AM
約束は、JavaScriptで非同期操作を処理するためのコアメカニズムです。チェーンコール、エラー処理、コンビナーの理解は、アプリケーションをマスターするための鍵です。 1.チェーンコールは、.then（）を通じて新しい約束を返し、非同期プロセスの連結(jié)を?qū)g現(xiàn)します。それぞれ.then（）は以前の結(jié)果を受け取り、値または約束を返すことができます。 2。エラー処理は、.catch（）を使用して例外をキャッチしてサイレント障害を回避し、キャッチのデフォルト値を返すためにプロセスを継続する必要があります。 3。promise.all（）などの組み合わせ（すべての成功後にのみ成功しました）、promise.race（）（最初の完了が返されます）、promise.allsettled（）（すべての完了を待っています）
キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？
Jul 08, 2025 am 02:43 AM
Cacheapiは、ブラウザからネットワークリクエストをキャッシュするツールです。これは、ウェブサイトのパフォーマンスとオフラインエクスペリエンスを改善するために、サービスワーカーと併用することがよくあります。 1.開発者は、スクリプト、スタイルシート、寫真などのリソースを手動(dòng)で保存できるようにします。 2。要求に応じてキャッシュ応答と一致させることができます。 3.特定のキャッシュの削除またはキャッシュ全體のクリアをサポートします。 4.フェッチイベントを聞いているサービスワーカーを介して、キャッシュの優(yōu)先順位またはネットワークの優(yōu)先戦略を?qū)g裝できます。 5.オフラインサポート、繰り返しのアクセス速度の高速化、主要なリソースのプリロード、バックグラウンドアップデートコンテンツによく使用されます。 6.それを使用する場合、キャッシュバージョンの制御、ストレージ制限、およびHTTPキャッシングメカニズムとの違いに注意する必要があります。
JavaScriptでのデータ操作のためのArray.Prototypeメソッドを活用します
Jul 06, 2025 am 02:36 AM
.map（）、.filter（）、.reduce（）などのJavaScriptアレイ內(nèi)蔵メソッドは、データ処理を簡素化できます。 1）.map（）は、要素を1つに変換して新しい配列を生成するために使用されます。 2）.filter（）は、條件ごとに要素をフィルタリングするために使用されます。 3）.reduce（）は、データを単一の値として集約するために使用されます。使用すると誤用を避ける必要があり、その結(jié)果、副作用やパフォーマンスの問題が発生します。
JSラウンドアップ：JavaScriptイベントループに深く潛り込む
Jul 08, 2025 am 02:24 AM
JavaScriptのイベントループは、コールスタック、WebAPIS、およびタスクキューを調(diào)整することにより、非同期操作を管理します。 1.コールスタックは同期コードを?qū)g行し、非同期タスクに遭遇すると、処理のためにWebAPIに引き渡されます。 2。WebAPIがバックグラウンドでタスクを完了した後、コールバックを?qū)潖辘工毳濠`（マクロタスクまたはマイクロタスク）に入れます。 3.イベントループは、コールスタックが空であるかどうかをチェックします?？栅螆龊?、コールバックはキューから取り出され、実行のためにコールスタックに押し込まれます。 4.マイクロタスク（Promise.thenなど）は、マクロタスク（SettimeOutなど）より優(yōu)先されます。 5.イベントループを理解するには、メインスレッドのブロックを避け、コード実行順序を最適化するのに役立ちます。
