背景
google chart、chart.jsなどwebで利用するチャート機能がよくありますが、javaScriptをよく携われないと利用できません。個人差によっては、ハードル高いと思われる人もいるでしょう。
また、Excelのチャートを利用するとき、データや表、グラフの種類を選ぶだけでチャートができます。このようなやり方をwebで出来たらいいですよね。
それらを行うには、以下のjspの例をご覧ください。
例
jspとはいえ、ほとんどhtmlばかりで、javaに関わるのは4行だけです。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="efw" uri="efw" %>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<title>chart テスト</title>
<efw:Client lang="jp"/>
</HEAD>
<BODY>
<table>
<tr><td>
<!--ここはデータ表-->
<table border=1 id="chart1_data" data-format="$#,##0" data-legend="bottom">
<caption>Chart Caption</caption>
<tr><th>Row0Col0</th><th>col1</th><th>col2</th><th>col3</th></tr>
<tr><td>row1</td><td>$1,000</td><td>$700</td><td>$300</td></tr>
<tr><td>row2</td><td>$900</td><td>$700</td><td>$600</td></tr>
<tr><td>row3</td><td>$800</td><td>$600</td><td>$500</td></tr>
<tr><td>row4</td><td>$700</td><td>$500</td><td>$400</td></tr>
<tr><td>row5</td><td>$1,000</td><td>$800</td><td>$700</td></tr>
</table>
</td><td>
<!--ここは縦棒グラフ-->
<efw:Chart id="char1" data="chart1_data" type="column"/>
</td></tr></table>
</BODY>
</HTML>
この4行のjavaプログラムで以下のエビデンスのようにgoogleチャートが表示されます。
簡単でしょう？色合いもExcelぽいですよね。
jarを入手
mavenからダウンロードできます。
<dependency>
<groupId>io.github.efwgrp</groupId>
<artifactId>efw</artifactId>
<version>4.07.000</version>
</dependency>
efwのChartタグ
上記説明の使い方は、efwのChartタグです。複雑なチャートはできないですが、よく利用されるExcel風のものならタグ１つで実現できます。詳細のAPIは、以下のリンクです。
https://github.com/efwGrp/efw4.X/blob/master/help/tag.chart.md
チャート種類、データ設定、タイトル、凡例、目盛り、フォーマットなど。実現できる機能は以下の図のような感じで表示されます。
また、google chartはオンラインではない場合使えないので、オフラインで使えるchart.jsも取り込んでいます。モードで切り替えます。
ご興味があれば試してください。上記エビデンスのプログラムは以下のリンクかダウンロードできます。
【超便利】タグ１つでwebのファイル管理
【超便利】タグ１つでwebのチャート機能
【超便利】タグ１つでwebのQRコード作成