グラフにデータを表示するには

650 views

最終的な動き

サンプルとして「受注日」に対する「受注合計金額」を表示するグラフを作ります。

この方法はテンプレートの選択に関係なくグラフを追加する方法です。
「スタートアップテンプレート」を利用する場合、グラフをウィジェットとして導入する方法があります。 グラフウィジェットの導入方法はこちら

構築方法

①Magic側

  1. グラフを表示させたいプログラムを開くか、新規作成します
  2. グラフデータを表示するための変数を追加します
    データ内容:例)vGraphData B=BLOB(ANSI)
    ※ANSIにするには:詳細→内容の中身を選択する
  3. 変数を画面に配置します
  4. サブタスクにバッチファイルを作成します
  5. レコード前でバッチファイルを呼ぶ記述をします

    • レコードで前
    • コールでサブタスクのバッチファイルを選択
  6. バッチファイルの内容を記述します

    1.データビューにて以下を指定
    メインソースでグラフとして表示させたいデータのテーブルを指定します
    2.以下を追加
    • 横軸:受注日
    • 縦軸:受注合計額
    とします。
  7. ロジックにてタスク前を記述します

    オンラインで宣言した
    vGraphDataに対して
    DataViewToJSON(0,’受注日,受注合計額’,’ZyuDate,Kingaku’)
    を項目更新します。

②Visual Studio Code

  1. Visual Studio Codeで開くを選択します
  2. VSCordが開いた後「Ctrl+@」でターミナルを開きます
  3. ターミナル内で最終の > 位置にカーソルを合わせて以下のコマンドを入力します
    「npm install echarts」
  4. ②の後には以下のコマンドを入力します
    「npm i ngx-echarts@15.0.3」
  5. 遅延フォルダ内にプログラムがある場合はフォルダ内の「magic.gen.lib.module.ts」を開きます。
    遅延フォルダ内にプログラムがない場合は「src\app\magic\magic.gen.lib.module.ts」を開きます。
    import文のが連なるところの最後に、次のimportを追加し保存します。
    import { NgxEchartsModule } from 'ngx-echarts';
    imports: [
    
    上記記述で検索を行い、ブロックの最後に以下を追記します。
    NgxEchartsModule.forRoot({ echarts: () => import('echarts') })
        

③SmartUX側

  1. SmartUXを開きます
  2. All Filesを選択し、以下のファイルを開きます

    \app\magic\(Magicフォルダ名) \(プログラム・タスク名)\(フォーム名).component.ts
  3. 一番下の } を探し、一行上にスペースを空けます。
  4. 空けたスペースへ、以下のコードを挿入します。
				
					chartOptions: any;
graph=(MagicJson)=>{
    const data = JSON.parse(MagicJson);
    this.chartOptions = {
        title: {
          text: 'ECharts サンプル'
        },
        tooltip: {},
        xAxis: { // 横軸の設定
          type: 'category',
          data: data.map(item => item.ZyuDate), // ZyuDateはMagic側で指定した名前
          axisLabel: {
            rotate: 45, // 必要に応じて回転
            formatter: function (value: string) {
              return value.split('/').join('-'); // スラッシュをハイフンに変更
            }
          }
        },
        yAxis: { // 縦軸の設定
          type: 'value'
        },
        series: [
          {
            name: '金額',
            type: 'bar', // 棒グラフ line にすると折れ線グラフ
            data: data.map(item => item.Kingaku)  // KingakuはMagic側で指定した名前
          }
        ]
      };
}				
			
※「Magic側で指定した名前」と書かれている部分は、xpaで設定したコントロール名と置換してください。

グラフを表示するHTMLを記述

  1. コンポーネントメニューからグラフを表示させるプログラムを選択します
  2. 「コードを表示」と「拡張表示」ボタンを押下しグラフの挿入場所を明確にします

  3. 以下のコードを挿入します
				
					<div echarts [options]="chartOptions"></div>				
			

④再びMagic側

  1. グラフのプラグラムにてグラフを表示させる記述をします
  2. オンラインタスクのバッチプログラムをコール後に
    アクションとして以下の式を記述します
    CallJS(‘graph’,vGraphData)
    を行ってください。グラフが表示されます。
Share this Article

グラフにデータを表示するには

Or copy link

CONTENTS