MorrisChart

概要:

Control de gráficas basado en la librería Morris.jsライブラリーのグラフィックを使用して、Responsiveデザインに対応したSimpleなチャートを提供します。円グラフ、線グラフ、棒グラフ、面グラフに対応しております。 

対象環境:

Web 

使用方法: 

IgniaのExtensibility Catalogを開き、左側メニューのWEBを選択します。
MorrisChart コントロールを選択して、Wizardに従ってインストールを実施します。 (Controlのインストールについては、Extensibility Catalogのドキュメンテーションをご確認ください。)
インストール時にSample XPZのインポートを実施することを推奨します。(確認ダイアログが表示されます。)
XPZをインポートすると、User Controlのルート階層(Ignia/Controls/MorrisChart )Sample Web Panelとグラフ用データを格納するSDTが作成されます。

円グラフのデータ構造は以下のようになっております。
labelとValue変数コレクションで構成されております。

 

線グラフ、棒グラフ、面グラフの構造は以下のようになっております。

 

線グラフ、防具ラグ、面グラフでは以下のようなデータで構成されております。

  • xkeys: X軸として使用するDataItemノード配下の値を指定します。

例:
xkey = 'y' 

  • ykeys: Y軸として使用するDataItemノード配下の値を指定します。

例:
ykeys = 'a,b' 

  • labels: Y軸に表示するラベルを定義します。

例:
labels = 'Series A,Series B'


Controlに同梱されているData provider Sampleを利用すれば、各グラフのデータ構造を理解することができます。

Properties:

Chart Properties 円グラフ 棒グラフ 線グラフ/面グラフ Descripción
Chart Type x x x グラフタイプ
Data x x x グラフデータ
Colors x x x 色の指定(16進数での指定)
Resize x x x TrueにするとBrowserの大きさによってグラフがResizeされます。
Grid   x x Trueにすると水平ラインメモリがグラフ上に表示されます。 
Grid Text Color   x x グラフのX軸/Y軸に表示するラベルの色を指定します。(Defaultは#888です)
Grid Text Size   x x グラフのX軸/Y軸に表示するラベルの大きさを指定します。
Grid Text Weight    x x グラフのX軸/Y軸に表示するラベルのスタイルを指定します。(Defaultはnormalです)
Point Size     x グラフ内のメモリポイントの大きさをPixelで指定します。
Point Fill Colors     x グラフ内のメモリポイントの色を指定します。Defaultで&pointFillColors変数に値が指定されています。
Point Stroke Colors     x グラフ内のメモリポイントの枠の色を指定します。Defaultで&pointFillColors変数に#fffffが指定されています。
Hide Hover   x x

No:マウスオーバーに関係なく詳細情報を表示します。
Yes:メモリポイント上にマウスオーバーした際に詳細情報を表示します。
Always:一切の詳細情報を表示しません。
Axes   x x FalseにするとX軸/Y軸の説明が表示されなくなります。 
Line With      x グラフ内の線の幅を指定します。
Fill Opacity     x グラフ内で塗りつぶされるエリアの透明度を指定します。0.0は完全に透明になり、1.0は指定した色で完全に塗りつぶされます。
Post Units     x Y軸の説明の後ろに単位をつける場合は指定します。例えば、’％’や'円'などを指定します。
Pre Units     x Y軸の説明の前に単位をつける場合は指定します。例えば、'$'を指定します。
Parse Time     x Falseを指定すると、X軸上の日付や時間の値が自動で最適化されます。 
YMax     x Y軸の最大値を指定します。
YMin     x Y軸の最小値を指定します。
Behave Like Line     面グラフのみ Trueにすると、面グラフ上の各エリアが前面に配置されて表示されます。
Stacked   x   Trueにすると、棒グラフが対比表示から1本の棒グラフでの占有表示に切り替わります。

注意: グラフによってcolorプロパティでの指定は、以下のように違いがあります。

  • 円グラフ: 円の色に反映
  • 棒グラフ: 棒の色に反映 
  • 線グラフ: 線の色に反映
  • 面グラフ: 面の色に反映

実行例:

円グラフ

 

 

面グラフ

 

 

棒グラフ

 

 

線グラフ