4-8 アイテムの作成(チャート)

SVF Web Designerには、データ値をチャート化して出力する機能が用意されています。チャートは、グラフィックモードでのみ作成できるアイテムです。


チャートを使用した帳票例

作成できるチャートの種類

SVF Web Designerで作成できるチャートは、大きく矩形チャートと円形チャートに分類されます。各チャートに3種類ずつ、合計で次の6種類が用意されています。

  • 矩形チャート(棒グラフ、折れ線グラフ、面グラフ)
    矩形の領域にデータが描画される棒グラフ、折れ線グラフ、面グラフを矩形チャートと呼びます。

    項目 説明

    棒グラフ
    最も一般的に使用されるチャートタイプです。項目の値を比較する場合などに使用します。
    項目名単位にチャートのデータをグループ化し、データごとに棒グラフが表示されます。各棒グラフは系列ごとに色分けされます。
    横棒グラフ、積み上げグラフなども作成できます。横棒グラフは項目名が長い場合に便利です。

    折れ線グラフ
    時間の経過による変化/傾向を表現する場合などに使用します。
    折れ線グラフの線上の点は各データ値を表します。各系列のデータ値は線で結ばれ、各項目にわたったデータの動向を表します。項目名は項目軸ラベルとして使用され、各系列のデータは個々の線で表示されます。

    面グラフ
    折れ線グラフと積み上げ棒グラフの機能を両方兼ね備えています。複数のデータの変化を示し、データ間の差を強調したいような場合に使用します。
    折れ線グラフの下の部分が色の付いた状態で表示されます。主に積み上げグラフとして使用し、各項目のエリアサイズは各項目のデータの合計値です。
  • 円形チャート(レーダーグラフ、円グラフ、ドーナツグラフ)
    円形の領域にデータが描画されるレーダーグラフ、円グラフ、ドーナツグラフを円形チャートと呼びます。

    項目
    説明

    レーダーグラフ
    値を中心点からの比較で表示するような場合に使用します。独特なレーダー型をしており、データを表すのに放射線状のマス目を使用します。中心点から離れるほど値が大きいことを示します。

    円グラフ
    値の合計に占める割合を示すような場合に使用します。円グラフはすべて項目データを円で表します。各データは円の一片として表示され、サイズは値に比例します。

    ドーナツグラフ
    全体に対する値の関係や比較を表示するような場合に使用します。

チャート作成の基本的な流れ

チャートを作成するときの基本的な流れは次のとおりです。

  1. Step1 チャートの新規作成

    フォームエディター上でチャートの作成領域を指定し、[チャートの新規作成]ダイアログでチャートの種類とタイプを指定します。
    この時点では、SVF Web Designerで用意されているサンプルデータの値でチャートが作成されます。
    詳細は「4-8-2 チャートを新規作成する」を参照してください。

  2. Step2 チャートの実行設定

    チャートで表示するデータを指定します。データの指定には次の2つの方法があります。

    • 固定のデータファイルを使用する方法
      特定のCSVファイルを取り込み、その値でチャートを作成します。
      属性式のSET_CSV関数を使用すると、実行時に別のCSVファイルを指定することも可能です。
    • XML様式ファイル内のアイテムを参照する方法
      XML様式ファイル内のフィールドや固定文字を参照してチャートを作成します。レコード内にチャートを作成することも可能です。
      たとえば下の帳票では、レーダーグラフの系列としてそれぞれ明細レコード内の得点、平均点、偏差値が入力されるフィールドを参照しており、系列名はヘッダーレコード内の固定文字を参照しています。

    詳細は「4-8-4 データの出力を設定する」を参照してください。

  3. Step3 チャートの種類やタイプの変更

    Step1で設定したチャートの種類やタイプを必要に応じて変更します。チャートの種類を変更すると、それまでの設定がデフォルト状態に戻るので、チャートの種類やタイプを決めるプロセスはなるべく早い段階で完了します。
    詳細は「4-8-3 チャートのプロパティを設定する」の「[チャート設定]ダイアログの(4)チャート変更」を参照してください。

  4. Step4 チャートの詳細項目を変更

    各種ラベルのフォントや大きさの調整、系列、凡例などの色やパターンの統一、補助線の追加など、チャートをより見やすくするために設定を変更します。
    詳細は「4-8-5 チャートエリアの設定を変更する」以降を参照してください。