SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「ActiveReportsJS」ではじめるフロントエンド帳票開発(AD)

さまざまなグラフを帳票に表示できる「ActiveReportsJS」のチャート機能

「ActiveReportsJS」ではじめるフロントエンド帳票開発 第4回

  • X ポスト
  • このエントリーをはてなブックマークに追加

より実用的なグラフへ発展させる

 以下では、図1のグラフをもとに、より情報量の多い実用的なグラフを表示する方法を説明します。

複数のデータを棒グラフで並べて表示

 図1では、A社の販売台数のみを表示させていましたが、B社/C社のデータも並べて表示するようにしてみます(図8)。

図8 A社/B社/C社の販売台数を表示する棒グラフ(p002-bar-multi)
図8 A社/B社/C社の販売台数を表示する棒グラフ(p002-bar-multi)

 図8の通り表示するには、プロット1の「値」を2つ追加して、B社、C社の販売台数に対応する「B社」「C社」をそれぞれ設定します。

図9 B社/C社の販売台数をプロットに追加(p002-bar-multi/002-bar-multi.rdlx-json)
図9 B社/C社の販売台数をプロットに追加(p002-bar-multi/002-bar-multi.rdlx-json)

 データが複数種類になったため、それぞれを区別できる凡例を表示させます。プロットの「エンコーディング」-「凡例に値の名前を表示」を設定すると、凡例が表示されるようになります。

図10 凡例を表示させる設定(p002-bar-multi/002-bar-multi.rdlx-json)
図10 凡例を表示させる設定(p002-bar-multi/002-bar-multi.rdlx-json)

 追加された凡例を選択して、プロパティの「向き」や「位置」などで表示を調整します。ここでは向きを「Horizontal」にして並びを水平方向にし、位置を「Top」にしてグラフの上に表示するようにします。

図11 凡例の向きと位置を設定(p002-bar-multi/002-bar-multi.rdlx-json)
図11 凡例の向きと位置を設定(p002-bar-multi/002-bar-multi.rdlx-json)

棒グラフに折れ線グラフを重ねて表示

 異なる種類のグラフを重ねて表示させることもできます。ここでは販売台数の棒グラフの上に、売上額の折れ線グラフを表示させてみます(図12)。

図12 棒グラフに折れ線グラフを重ねて表示(p003-bar-line)
図12 棒グラフに折れ線グラフを重ねて表示(p003-bar-line)

 異なる種類のグラフを表示するには、チャートを選択して、「プロット」を追加します。最初のプロット(プロット1)と同じ手順で、追加したプロット(プロット2)の「値」には「売上額」、「カテゴリ」には「月」をそれぞれ設定し、「エンコーディング」-「凡例に値の名前を表示」を設定します。

図13 チャートにプロットを追加(p003-bar-line/p003-bar-line.rdlx-json)
図13 チャートにプロットを追加(p003-bar-line/p003-bar-line.rdlx-json)

 次に、追加したプロットのグラフ種類を折れ線グラフに変更します。「プロット2」を選択した状態で、帳票デザイナ上部(リボン部分)に表示される「Chart」メニューから「プロットのテンプレートの設定」をクリックすると、設定できるグラフの種類が表示されるので、折れ線グラフを選択します。

図14 追加したプロットを折れ線グラフに設定(p003-bar-line/p003-bar-line.rdlx-json)
図14 追加したプロットを折れ線グラフに設定(p003-bar-line/p003-bar-line.rdlx-json)

 X軸とY軸の表示を調整します。X軸は棒グラフと折れ線グラフで共通なので、プロット1のX軸を選択して、プロパティの「プロット」に「プロット2」を追加します。この設定により、棒グラフと折れ線グラフで共通のX軸が表示されるようになります。

図15 X軸の設定変更(p003-bar-line/p003-bar-line.rdlx-json)
図15 X軸の設定変更(p003-bar-line/p003-bar-line.rdlx-json)

 プロット2のY軸を右側に移動します。プロット2のY軸を選択して、プロパティの「レイアウト」-「位置」を「Near」から「Far」に変更します。NearはY軸なら左/X軸なら下、「Far」はY軸なら右/X軸なら上に軸を表示する設定です。「None」にすると軸自体が表示されなくなります。

図16 プロット2のY軸を右側に表示する設定(p003-bar-line/p003-bar-line.rdlx-json)
図16 プロット2のY軸を右側に表示する設定(p003-bar-line/p003-bar-line.rdlx-json)

 また、プロット2のY軸に対して「スケール」の最小値と最大値を設定し、「ラベル」の表示形式は「通貨」にします。

図17 プロット2のY軸にスケールとラベルを設定(p003-bar-line/p003-bar-line.rdlx-json)
図17 プロット2のY軸にスケールとラベルを設定(p003-bar-line/p003-bar-line.rdlx-json)

次のページ
Chartで表示できるさまざまなグラフ

関連リンク

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
「ActiveReportsJS」ではじめるフロントエンド帳票開発連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/12913 2020/10/06 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング