データ表を簡易描画【EspressChart：API使用方法】

チャートプロット上の値を基に、簡易的な表を作成し、キャンバス上に配置できます。ただし、簡易的なものであり、そこまでカスタマイズはできません。

詳細な表を作成する必要がある場合にはEspressReportを用いて表を作成し、その表の中にチャートを配置いただいたほうが簡単かつ綺麗に構成いただけます。

https://www.climb.co.jp/soft/espress/report

今回は、EspressChartのみを使用して、この簡易表をチャート上に追加する方法に関して解説していきます。

簡易表を追加するためにはITableインターフェイスを使用しますが、このインターフェイスは少々、癖があり使用時には特定の順序でインターフェイス内のメソッドを使用する必要があります。

https://data.quadbase.com/Docs71/ec/help/apidocs/quadbase/util/ITable.html

まず、前提として、チャートプロット上の値を基にしているため、ITableインターフェイスを使用する前にチャートを空エクスポートし、作成させておく必要があります。

空エクスポート：chart.export();

そして、以下の順番でITableインターフェイスに対して各メソッドを使用していきます。

テーブルの転置が必要場合＞テーブルを描画する前に、setTranspose(true)で転置を指定
転置：また、デフォルトですと、列がカテゴリ、行がシリーズとなりますが、入れ替えて配置できます。そのままですと列数が多くなりすぎる場合などに便利です。
テーブルを描画setVisible(true)
描画したテーブルに対して各種設定（列幅やフォントなど）を指定

サンプル：ITableDemo

Java

import java.applet.Applet;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.io.IOException;

import quadbase.ChartAPI.*;
import quadbase.util.*;

public class ITableDemo {
	public static void main(String[] args){
		// EspressManagerを使用しない、エクスポートのみ
		QbChart.setEspressManagerUsed(false);
		QbChart.setForExportOnly(true);
				
		String dataType[] = {"varchar", "date", "int"}; 
		String fieldName[] = {"Series", "month", "Y"}; 
		
		ColInfo col = new ColInfo(); 
		col.value=2;
		col.series=0; 
		col.category=1;
							
		Applet parent = null;
		
		// 適当なソースデータを作成
		String records[][] = { 
				{ "ABC","2020-04-01","7" }, { "ABC","2020-05-01","9"}, 
				{ "ABC","2020-06-01","6"}, { "ABC","2020-07-01","15" },
				{ "ABC","2020-08-01","7" }, { "ABC","2020-09-01","9"}, 
				{ "ABC","2020-10-01","6"}, { "ABC","2020-11-01","17" },
				{ "ABC","2020-12-01","12"}, { "ABC","2021-01-01","9"}, 
				{ "ABC","2021-02-01","4" }, { "ABC","2021-03-01","2" },
				{ "DEF","2020-04-01","12" }, { "DEF","2020-05-01","23"}, 
				{ "DEF","2020-06-01","21"}, { "DEF","2020-07-01","19" },
				{ "DEF","2020-08-01","12" }, { "DEF","2020-09-01","11"}, 
				{ "DEF","2020-10-01","9"}, { "DEF","2020-11-01","12" },
				{ "DEF","2020-12-01","11"}, { "DEF","2021-01-01","10"}, 
				{ "DEF","2021-02-01","12" }, { "DEF","2021-03-01","13" },
		};	
		DbData data = new DbData(dataType, fieldName, records);
		
		// 適当な折れ線チャートを作成
		QbChart chart = new QbChart(parent,
				QbChart.VIEW2D, 
				QbChart.LINE, 
				data, 
				col, 
				null);
		
		// チャートのプロット位置とサイズを調整
		IPlot plot = chart.gethChartPlot();
		plot.setPosition(new Position(0.05f, 0.05f));
		plot.setRelativeHeight(1.2f);
		plot.setRelativeWidth(0.5f);
		
		// 凡例を非表示に設定
		ILegend legend = chart.gethLegend();
		legend.setVisible(false);
		
		// キャンバスサイズを設定
		ICanvas canvas = chart.gethCanvas();
		canvas.setSize(new Dimension(1200, 400));
		// 空エクスポート（表の値は描画されたチャートプロットを基にしているため）
		chart.export();
		
		// ITableを取得
		ITable table = chart.gethTable();
	
		// 表を転置
		table.setTranspose(true);
		
		// 転置を行う場合は転置後にsetVisible、その後、テーブルに対する設定を実施
		table.setVisible(true);
		
		// 表位置を調整
		table.setPosition(new Position(0.6f,0.9f));
		
		// 表ヘッダーやセルのフォント、色、背景色を設定
		table.setHeaderFont(new Font("BIZ UDPゴシック", Font.BOLD,12));
		table.setCellFont(new Font("BIZ UDPゴシック", Font.PLAIN, 10));
		table.setCellBackgroundColor(Color.white);
		table.setHeaderBackgroundColor(Color.DARK_GRAY);
		table.setHeaderTextColor(Color.white);
		
		// 表ヘッダーやセルの文字配置を指定
		// 1行目のタイトル行は中央揃え
		table.setContentTitleAlignment(QbChart.CENTERALIGNMENT);	
		table.setHeaderTitleAlignment(QbChart.CENTERALIGNMENT);
		// 値は左揃え
		table.setContentValueAlignment(QbChart.LEFTALIGNMENT);
		// 項目名は右揃え
		table.setHeaderValueAlignment(QbChart.RIGHTALIGNMENT);
		
		// 表の各カラムの幅を指定
		table.setColumnWidth(0, 150);
		for(int i=1; i<table.getColumnCount();i++) {
			table.setColumnWidth(i, 80);
		}
		

		try {
			chart.export(QbChart.PNG,"ITableDemo.png",1200,400);
		} catch (IOException e) {e.printStackTrace();} 
	}
}

import java.applet.Applet;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.io.IOException;

import quadbase.ChartAPI.*;
import quadbase.util.*;

public class ITableDemo {
	public static void main(String[] args){
		// EspressManagerを使用しない、エクスポートのみ
		QbChart.setEspressManagerUsed(false);
		QbChart.setForExportOnly(true);
				
		String dataType[] = {"varchar", "date", "int"}; 
		String fieldName[] = {"Series", "month", "Y"}; 
		
		ColInfo col = new ColInfo(); 
		col.value=2;
		col.series=0; 
		col.category=1;
							
		Applet parent = null;
		
		// 適当なソースデータを作成
		String records[][] = { 
				{ "ABC","2020-04-01","7" }, { "ABC","2020-05-01","9"}, 
				{ "ABC","2020-06-01","6"}, { "ABC","2020-07-01","15" },
				{ "ABC","2020-08-01","7" }, { "ABC","2020-09-01","9"}, 
				{ "ABC","2020-10-01","6"}, { "ABC","2020-11-01","17" },
				{ "ABC","2020-12-01","12"}, { "ABC","2021-01-01","9"}, 
				{ "ABC","2021-02-01","4" }, { "ABC","2021-03-01","2" },
				{ "DEF","2020-04-01","12" }, { "DEF","2020-05-01","23"}, 
				{ "DEF","2020-06-01","21"}, { "DEF","2020-07-01","19" },
				{ "DEF","2020-08-01","12" }, { "DEF","2020-09-01","11"}, 
				{ "DEF","2020-10-01","9"}, { "DEF","2020-11-01","12" },
				{ "DEF","2020-12-01","11"}, { "DEF","2021-01-01","10"}, 
				{ "DEF","2021-02-01","12" }, { "DEF","2021-03-01","13" },
		};	
		DbData data = new DbData(dataType, fieldName, records);
		
		// 適当な折れ線チャートを作成
		QbChart chart = new QbChart(parent,
				QbChart.VIEW2D, 
				QbChart.LINE, 
				data, 
				col, 
				null);
		
		// チャートのプロット位置とサイズを調整
		IPlot plot = chart.gethChartPlot();
		plot.setPosition(new Position(0.05f, 0.05f));
		plot.setRelativeHeight(1.2f);
		plot.setRelativeWidth(0.5f);
		
		// 凡例を非表示に設定
		ILegend legend = chart.gethLegend();
		legend.setVisible(false);
		
		// キャンバスサイズを設定
		ICanvas canvas = chart.gethCanvas();
		canvas.setSize(new Dimension(1200, 400));
		// 空エクスポート（表の値は描画されたチャートプロットを基にしているため）
		chart.export();
		
		// ITableを取得
		ITable table = chart.gethTable();
	
		// 表を転置
		table.setTranspose(true);
		
		// 転置を行う場合は転置後にsetVisible、その後、テーブルに対する設定を実施
		table.setVisible(true);
		
		// 表位置を調整
		table.setPosition(new Position(0.6f,0.9f));
		
		// 表ヘッダーやセルのフォント、色、背景色を設定
		table.setHeaderFont(new Font("BIZ UDPゴシック", Font.BOLD,12));
		table.setCellFont(new Font("BIZ UDPゴシック", Font.PLAIN, 10));
		table.setCellBackgroundColor(Color.white);
		table.setHeaderBackgroundColor(Color.DARK_GRAY);
		table.setHeaderTextColor(Color.white);
		
		// 表ヘッダーやセルの文字配置を指定
		// 1行目のタイトル行は中央揃え
		table.setContentTitleAlignment(QbChart.CENTERALIGNMENT);	
		table.setHeaderTitleAlignment(QbChart.CENTERALIGNMENT);
		// 値は左揃え
		table.setContentValueAlignment(QbChart.LEFTALIGNMENT);
		// 項目名は右揃え
		table.setHeaderValueAlignment(QbChart.RIGHTALIGNMENT);
		
		// 表の各カラムの幅を指定
		table.setColumnWidth(0, 150);
		for(int i=1; i<table.getColumnCount();i++) {
			table.setColumnWidth(i, 80);
		}
		

		try {
			chart.export(QbChart.PNG,"ITableDemo.png",1200,400);
		} catch (IOException e) {e.printStackTrace();} 
	}
}

このように少々注意点が多いですが、チャート上に簡易表を追加可能です。

関連するトピックス:

コメントを残すコメントをキャンセル

メールマガジン登録

製品・カテゴリで絞る

新着情報

関連リンク

タグ・トップ50