Wijmo FlexChartは、Angular 2アプリケーションに組み込むことができるTypeScriptおよびHTML5ベースのチャートです。

このビデオ(英語)では、以下について説明します。

  1. Visual Studio 2015を構成する方法
  2. npmを使用してAngular 2と付属ライブラリを取得する方法
  3. 開発のためのプロジェクト構造を設定する方法
  4. Angular 2コンポーネントをビルドする方法
  5. 汎用データに連結されたWijmo FlexChartを表示する方法

Wijmoをまだダウンロードしていない場合は、トライアル版を入手してください。

コードスニペット

app.ts


///
import { Component, View, Inject } from ‘angular2/core’;
import { CORE_DIRECTIVES } from ‘angular2/common’;
import { bootstrap } from ‘angular2/platform/browser’;
import { DataSvc } from ‘./DataSvc’;
import * as wjNg2Chart from ‘wijmo/wijmo.angular2.chart’;
@Component({
selector: ‘app’,
templateUrl: ‘src/app.html’,
directives: [CORE_DIRECTIVES, wjNg2Chart.WjFlexChart, wjNg2Chart.WjFlexChartAxis, wjNg2Chart.WjFlexChartLegend,
wjNg2Chart.WjFlexChartDataLabel, wjNg2Chart.WjFlexChartSeries, wjNg2Chart.WjFlexChartLineMarker]
})
export class AppCmp {
// ランダムデータを生成します
countries = ‘US,Germany,UK,Japan,Italy,Greece’.split(‘,’);
data: { country: string, downloads: number, sales: number, expenses: number }[];
protected dataSvc: DataSvc;
constructor( @Inject(DataSvc) dataSvc: DataSvc) {
this.dataSvc = dataSvc;
this.data = this.dataSvc.getData(this.countries);
}
}
bootstrap(AppCmp, [DataSvc]);

app.html


DataSvc.ts


import { Injectable } from ‘angular2/core’;
// 共通データサービス
@Injectable()
export class DataSvc {
// ランダム項目の生成に使用するデータ
getData(countries: string[]): any[] {
var data = [];
for (let i = 0; i < countries.length; i++) {
data.push({
country: countries<em class="bbcode-em"></em>,
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
return data;
}
}

default.html内のスクリプト参照


<script src=”https://code.jquery.com/jquery-2.0.0.min.js” type=”text/javascript”></script>
<script src=”https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js” type=”text/javascript”></script>
<!– シム、ポリフィル、Angular 2 –>
<!– IEには、正確にこの順序でポリフィルが必要でした –>
<script src=”node_modules/es6-shim/es6-shim.min.js”></script>
<script src=”node_modules/systemjs/dist/system-polyfills.js”></script>
<script src=”node_modules/angular2/es6/dev/src/testing/shims_for_IE.js”></script>
<script src=”node_modules/angular2/bundles/angular2-polyfills.js”></script>
<script src=”node_modules/systemjs/dist/system.src.js”></script>
<script src=”node_modules/rxjs/bundles/Rx.js”></script>
<script src=”node_modules/angular2/bundles/angular2.dev.js”></script>
<!– Wijmo –>
<script src=”scripts/vendor/wijmo.min.js” type=”text/javascript”></script>
<script src=”scripts/vendor/wijmo.chart.min.js” type=”text/javascript”></script>
<!– Wijmo Angular 2 –>
<script src=”scripts/vendor/wijmo.angular2.min.js” type=”text/javascript”></script>
<script>// <![CDATA[
    System.config({
      packages: {
        ‘src’: {
          defaultExtension: ‘js’,
        },
      },
    });
  
// ]]></script>
<script>// <![CDATA[
    System.import(‘/src/app’);
  
// ]]></script>

ビデオの内容

Angular 2を使用したWijmo FlexChartの導入ガイドへようこそ。私は、グレープシティ開発部門のロス・デドラーです。

今日は、新しいアプリケーションにWijmo FlexChartを追加する方法について説明します。このビデオでは、Visual Studio 2015でIntellisenseとTypeScriptを使用しますが、コマンドラインや他のエディタを使用することもできます。

最初に、Visual Studioの[TypeScriptを使用したHTMLアプリケーション]プロジェクトテンプレートを使用して新しいアプリケーションを作成します。アプリケーションの名前はFlexChartAngular2にします。

次に、index.html、app.ts、app.cssの各ファイルを削除します。TypeScriptプロジェクト設定に移動し、プロジェクトモジュールシステムとしてCommonJSを指定します。

Angular 2ライブラリを取得するには、アプリケーションのルートにpackage.jsonファイルを追加します。

Angular 2クイックスタートマニュアルに記載されているファイルの内容をコピーします。このコードは、Visual Studioがライブラリを自動的に取得するように指示します。node_modulesにすべてのライブラリを置きます。

default.htmlページをプロジェクトのルートに追加します。クイックスタートマニュアルの説明に従って、Angular 2とライブラリへの参照を追加します。

WijmoコントロールとAngular 2相互運用ファイルへの参照を追加します。

CSSファイルへの参照も追加します。

systemJSを選択します。Angular 2コンポーネントをsrcフォルダに置きます。次に、プロジェクト構造を構成します。

Windowsのファイルエクスプローラーで、Wijmoダウンロードパッケージの横にあるプロジェクトを開きます。

スクリプトにフォルダを2つ追加し、一方はvendor、もう一方はdefinitionsと名前を付けます。definitionsは、Wijmoコントロールを含む内部モジュールのAPIを記述します。

vendorには、コントロール自体のコードが含まれます。Wijmo.Angular2相互運用JSファイルをInterop Wijmoパッケージからベンダの場所にコピーします。node_modulesにWijmoという名前の新しいフォルダを作成し、interopからそのフォルダにd.tsファイルをコピーします。最後に、基本スタイルをコピーします。

Visual Studioに戻り、stylesとscriptsのすべての内容をプロジェクトに追加します。node_modulesのWijmoフォルダは入れません。プロジェクトを設定できたので、srcフォルダにappコンポーネントを追加します。

新しいTypeScriptクラスと付随テンプレートを追加します。htmlコードは削除できます。コンポーネントにいくつかのAngular 2モジュールをインポートします。データサービスがデータを取得できるように、新しいTSクラスを作成し、それもインポートします。これで、Wijmo FlexChartをインポートする準備ができました。まず、コンポーネントをマークアップ内のどこに置いても呼び出せるように、デコレータとメタデータを定義します。

Wijmo FlexChartからコンポーネントにディレクティブを公開します。デコレータとメタデータは、src/app.html内に見つかるマークアップをロードして、appがある場所ならどこでもこのコンポーネントを配置できるように定義します。最後に、WijmoのFlexChartからコンポーネントにいくつかのディレクティブを公開します。次に、クラスを作成し、データサービスを呼び出して、データをFlexChartにロードします。最後に、アプリケーションをブートストラップします。

AppCmpをアプリケーションルートコンポーネントとして定義します。DataSvcサービスをAppCmpに公開します。dataSvcはまだ空なので、モデルを作成し、チャートで使用するランダムデータを生成します。default.htmlにコンポーネントのプレースホルダを追加し、コンポーネントにスタイル設定を追加します。これが最終の手順ですが、TypeScriptが試験的デコレータを無視するようにします。

アプリケーションを実行します。