イオン2でインタラクティブチャートを作成する

Feb 1, 2026

操作方法

あなたが小さなチームで働くとき、それはAndroid、iOS、およびWindowsのための別々のコードを書いて維持するのが難しい傾向があります。それがイオンのようなハイブリッドフレームワークが写真に入ってくるところです。彼らは私たちが3つのプラットフォームすべてで使用できる単一のコードを書くことを可能にしますが、私たちの既存の技術スタックを使ってそうすることができるという意味です。

このチュートリアルでは、Ionic 2でデータの可視化のような一般的なタスクに取り組む方法、最も有望なハイブリッドアプリフレームワークの1つである。このプロジェクトは90以上のチャートの大きなライブラリを提供するため、FusionCharts JavaScript Chart Library（FusionCharts.com）を使用します。

イオン2を設定する

IONIC 2でアプリを開発するには、OS上でNode.jsバージョン4+とNPMが実行されています。 FROM.のNode.jsパッケージをダウンロードできます nodejs.org/en/download. そして、NPMはそれに沿ってインストールされます。あなたが既に異なるバージョンのnode.jsを実行していてバージョン4以降を実行したい場合は、それを実行できます。ノードバージョンマネージャー。

次に、NPMを使用してIONIC 2ベータをインストールする必要があります。これを行うには、走ってください NPM INSTALL -G IONIC @ Beta. root権限を持つユーザーアカウントからのターミナルで（私たちはモジュールをグローバルにインストールしています）。私たちが複数のプラットフォームで作成しているイオンアプリをシミュレートするには、もう1つのノードモジュールが必要です。 コルドバ 。これを使用してこれをインストールすることができます NPM Install -g Cordova. 。

私たちは今私たちの最初のイオンアプリを作成する準備ができています。ただし、このセットアップでは、ブラウザでアプリケーションを見ることができます。 IOSまたはAndroidデバイスのアプリをシミュレートするには、その特定のプラットフォームモジュールをCordovaに構築する必要があります。このチュートリアルではIOSモジュールを構築しますので、実行する必要があります イオンプラットフォームIOSを追加 。

最後に、Xcodeをインストールする必要があります。あなたはこれの指示を見つけるでしょうここに。

イオン2アプリの作成

このチュートリアルでは、「チャート」という名前のイオン2アプリを作成します。現在の作業ディレクトリに「チャート」フォルダを作成し、サンプルアプリケーションでアプリをブートストラップします。サンプルアプリは、ここで説明されているように、基本ページを含みます。

このアプリを作成するには、実行します イオンスタートチャート - v2 現在の作業ディレクトリにある（ チャート アプリの名前です - v2 イオン2アプリを作成したいイオンに伝えます）。このコマンドの実行時A. チャート フォルダは現在の作業ディレクトリに作成されます。ブラウザでアプリをテストするには、次のように移動します。 チャート フォルダと実行 イオン奉仕 。これにより、デフォルトのブラウザでアプリが起動されます。

新しいページを追加する

今ページ/コンポーネントを追加しましょう チャート JavaScriptチャートを作成するアプリケーション。まず、「こんにちは世界」の単純なHTMLページを追加します。

イオン2では、PAGEを使用してイオンアプリに追加することができます。 @ページ 完全なイオン機能性にアクセスできるデコレータ（角度2成分に基づくイオンモジュール）。最小ページでは、テンプレートHTMLファイル（マークアップを含む）、およびJavaScriptファイル（必要なロジックを含む）が必要です。あなたはイオンページの詳細を見ることができますここに。

ページを作成するには追加します ドーナツチャート そして ドーナツチャート にファイルへのファイル チャート/アプリ/ページドーナツチャート ディレクトリ。 HTMLファイルでは、Appナビゲーションとシンプルな「ハロー世界」のヘッディングのコードを追加できます。

＆lt; Ion-Navbar * Navbar＆GT。
＆lt; button menuToggle＆gt。
  ＆lt;イオンアイコン名= "メニュー"＆gt;＆lt; /イオンアイコン;
＆lt; / button＆gt;
<イオンタイトル」; Hello Ionic

JavaScriptファイルでは、このコンポーネントのテンプレートとして作成されたHTMLファイルを参照します。私たちはまだ派手なことをしていないので、空のコンストラクタを追加するだけです ChartSpage. 。

「イオン角」からの{Page}。

@ページ（{
  TemplateUrl： 'build / pages / pie-chart / pie-chart.html'
）

クラスChartSpageをエクスポートする{
  コンストラクタ（）{
  }

スタンドアロンコンポーネントを作成しました。これをメインアプリにリンクする必要があります。これを行うには、私たちが作成したコンポーネントを参照する必要があります。 app.js アプリフォルダ内のファイル、およびのコンポーネントを使用します。 ページ Appコンポーネントコンストラクタのプロパティ。

 './pages/donut-chart/donut-chart'から{chartspage}をインポートします。

コンストラクタ（アプリ、プラットフォーム、メニュー）{
    //デフォルトのアプリケーションコンストラクタ
    this.app =アプリ。
    this.platform =プラットフォーム;
    このメニュー=メニュー。
    this.initializeApp（）;
    //私たちのアプリのページを設定します - 私たちはここにドーナツチャートを追加しています
    これは= [
      {title： 'ようこそ'、コンポーネント：helloionicpage}、
      {title： 'ドーナツチャート'、コンポーネント：ChartSpage}
    ]

    // root（または最初の）ページ - デフォルトのステップ
    this.rootpage = helloionicpage。

これらの変更を加えた後、ブラウザ内のIonicアプリは自動再ロードする必要があります（または、もう一度端末からイオンサービスを使用します）。これで、アプリのサイドメニューに新しいリンクを表示し、[Hello World]が画面に書かれたことをクリックしてください。

JavaScriptチャートを作成します

今度は、ドーナツチャートを作成するために「Hello World」ページを変更する時が来ました。 FusionChartsライブラリを使用できるようにするには、まずを含む必要があります。 fusionCharts.js. そして FusionCharts.Charts.js. のファイル www / index.html ファイル。

クイックヒント：両方のファイルが同じフォルダにある場合は、追加します。 fusionCharts.js. これは自動的に含まれるので十分になります FusionCharts.Charts.js. 。

 script type = "text / javascript" src = "path / to / fusionCharts.js"＆gt; / script＆gt;

これで、前の手順からHTMLを変更してチャートコンテナを作成します。

 DIV ID =「チャートコンテナ」＆gt; / div＆gt;

コンストラクタ内の ドーナツチャート 上記で作成したものでは、チャートコンテナ内でチャートを作成するために次のコードを追加する必要があります。

 FusionCharts.Ready（function（）{
  var revenuechart =新しいFusionCharts（{
    タイプ： 'doughnut2d'、
    レンダリング：「チャートコンテナ」、
    幅： '100％'、
    高さ： '450'、
    DataFormat： 'JSON'、
    情報源： {
      "チャート"： {
        「キャプション」：「製品カテゴリによる収益の分割」、
        "subcaption"： "昨年"、
        "NumberPrefix"： "$"、
        「パレットカラー」： "＃0075C2、＃1AAF5D、＃F2C500、＃F45B00、＃8E0000"、
        //詳細チャート属性
      }、
      「データ」：[{
          「ラベル」：「フード」、
          "Value"： "28504"
        //もっとデータ
      ]
    }
  }）。レンダリング（）;
;）

このコードでは、FusionChartsのコンストラクタを介して新しいチャートを作成しています。使用されるプロパティを以下に簡単に説明します。

タイプ チャートの種類を定義します

レンダリング チャートをレンダリングしたいコンテナのID

幅そして高さチャートの寸法を設定するために使用されます

データフォーマット 私たちがチャートデータをフィードしようとしている形式です（XMLと同様にJSONを使用できます）

情報源 FusionChartsの内側のチャート化粧品を含みます チャート オブジェクトと実際のデータが内部にプロットされる データ アレイ

私は4つの属性しか示さなかったが チャート オブジェクト、チャートのデザインを改善するために使用できる100人以上の他の人がいます。それについてもっと読むことができますここに。

このコードが追加されたら、実行します イオン奉仕 アプリを再起動する。サイドメニューに「ドーナツチャート」リンクが表示されます。そのリンクをクリックすると、そのリンクをクリックするとドーナツチャートが表示されたら、そうでない場合は、そのコードを参照してくださいこのプロジェクトのためのGithub Repo あなたが間違った場所を見るために。

注：ブラウザで確認したら、 イオンエミュレートIOS アプリをiOSシミュレータにロードするには。

サミットアップ

Our doughnut chart representing the revenue split of a hypothetical company by product categories — 製品カテゴリによる仮説会社の収益分割を表す私たちのドーナツチャート

あなたが見たとおりに、イオン2でデータの視覚化を始めるのは難しくありません。プロセスを実証するための簡単なドーナツチャートを作成しましたが、同じプロセスを使用して複数のデータセットを含む複雑なチャートを作成することが可能です。。把握する必要があるのは、FusionChartsがその特定のチャートタイプのデータを受け入れる形式です。それを実行できるようにすると、ライブラリから任意のチャートを作成できます。

このトピックの助けが必要な場合、またはこのチュートリアルの内容について質問がある場合は、私をキャッチしてください。 Twitter上で。私はいつも手助けをしてうれしいです！

この記事は最初に登場しました ネットマガジン 問題283; ここで購入してください 。

イオン2でインタラクティブチャートを作成する

イオン2を設定する

イオン2アプリの作成

新しいページを追加する

JavaScriptチャートを作成します

サミットアップ

操作方法 - 最も人気のある記事

Reactサイトとアプリをテストする方法

Google Recaptchaでボットを停止する

CSSでスマートテキスト効果をコーディングする方法

30キーショットレンダリングヒント

要約で完璧なバージョン管理を保つ

開発者のスキルを開発するための4つのヒント

パスタアートワークにドラマを追加する方法

Photoshop CCの写真

カテゴリ