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

ホームページ

ウェブフロントエンド

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>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title>></title></span>Angular 2 FusionCharts Demo<span><span></span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link> 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> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script> src<span >="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script> src<span >='main.js'</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart>></angular-chart></span>Loading...<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></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>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title>></title></span>Angular 2 FusionCharts Demo<span><span></span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link> 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> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script> src<span >="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script> src<span >='main.js'</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart>></angular-chart></span>Loading...<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></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>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title>></title></span>Angular 2 FusionCharts Demo<span><span></span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link> 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> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script> src<span >="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script> src<span >='main.js'</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart>></angular-chart></span>Loading...<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></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>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title>></title></span>Angular 2 FusionCharts Demo<span><span></span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link> 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> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script> src<span >="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script> src<span >='main.js'</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart>></angular-chart></span>Loading...<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></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 までご連絡ください。

JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。

Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

JavaScriptフレームワークのパワーは、開発を簡素化し、ユーザーエクスペリエンスとアプリケーションのパフォーマンスを向上させることにあります。フレームワークを選択するときは、次のことを検討してください。1。プロジェクトのサイズと複雑さ、2。チームエクスペリエンス、3。エコシステムとコミュニティサポート。

JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AM

はじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか

node.jsは、型を使用してストリーミングしますApr 30, 2025 am 08:22 AM

node.jsは、主にストリームのおかげで、効率的なI/Oで優れています。ストリームはデータを段階的に処理し、メモリの過負荷を回避します。大きなファイル、ネットワークタスク、リアルタイムアプリケーションの場合。ストリームとTypeScriptのタイプの安全性を組み合わせることで、パワーが作成されます

Python vs. JavaScript：パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AM

PythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1）解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2）JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。

JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。

See all articles