ㅇㅠㅇ - JFreeChart - 애플릿 봉그래프 그리기, 그리고 예쁘게 다듬기

« 2009/07 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

JFreeChart - 애플릿 봉그래프 그리기, 그리고 예쁘게 다듬기

2008/09/02 18:18

[dev]

JFreeChart - 애플릿 봉그래프 그리기, 그리고 예쁘게 다듬기

작성자 : 제갈장비

작성일 : 2006년 9월 21일(목)

개요 : JFreeChart를 이용하여 웹어플리키에션에서

애플릿을 이용하여 봉그래프를 나타내고

좀 더 예쁘장하게 다듬어 보기

참고 : 이 문서는 http://www.thinkit.co.jp/free/tech/4/6/1.html 를 참조하여

작성한 것입니다.

[ 일러두기 ]

- . 이 문서에서는 JFreeChart 설치방법은 설명하지 않습니다.

- . 이 문서에서는 JFreeChart의 문법에 대한 설명은 하지 않습니다.

- . 그림파일은 마우스로 클릭하면 글자가 잘 보입니다.

[ 실행환경 ]

이 문서를 작성했을 때의 환경입니다.

운영체제 : MS Windows XP Professional

웹서버 : TOMCAT v5.0.28

JAVA : 1.4.2_12

JfreeChart : 1.0.2

[ 봉그래프의 구조 ]

A. 기본적인 봉그래프 나타내기

아래의 소스를 컴파일했을 때 보이는 그래프입니다.

[소스]

import java.awt.Dimension;
import javax.swing.JApplet;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.data.category.DefaultCategoryDataset;

public class BarChartDemo_t01 extends JApplet{

public BarChartDemo_t01(){
// row keys...
final String series1 = "First";
final String series2 = "Second";
final String series3 = "Third";

// column keys...
final String category1 = "Category 1";
final String category2 = "Category 2";
final String category3 = "Category 3";
final String category4 = "Category 4";
final String category5 = "Category 5";

// create the dataset...
final DefaultCategoryDataset dataset = new DefaultCategoryDataset();

dataset.addValue(1.0, series1, category1);
dataset.addValue(4.0, series1, category2);
dataset.addValue(3.0, series1, category3);
dataset.addValue(5.0, series1, category4);
dataset.addValue(5.0, series1, category5);

dataset.addValue(5.0, series2, category1);
dataset.addValue(7.0, series2, category2);
dataset.addValue(6.0, series2, category3);
dataset.addValue(8.0, series2, category4);
dataset.addValue(4.0, series2, category5);

dataset.addValue(-4.0, series3, category1);
dataset.addValue(-3.0, series3, category2);
dataset.addValue(-2.0, series3, category3);
dataset.addValue(-3.0, series3, category4);
dataset.addValue(-6.0, series3, category5);

// create the chart...
final JFreeChart chart = ChartFactory.createBarChart(
"Bar Chart Demo test01", // chart title
"Category", // domain axis label
"Value", // range axis label
dataset, // data
PlotOrientation.VERTICAL, // orientation
true, // include legend
true, // tooltips?
false // URLs?
);

final ChartPanel chartPanel = new ChartPanel(chart);

// 여기서부터 다듬기 시작

setContentPane(chartPanel);
}
}

B. 챠트의 배경색을 흰색으로 바꾸기

A 소스의 // 여기서부터 다듬기 시작 다음에 아래 코드를 추가하고 실행합니다.

// 클래스 추가

import java.awt.Color;

// 1. 1. 챠트 배경색 바꾸기
chart.setBackgroundPaint(Color.WHITE);

C. 그래프 전체의 경계선 설정하기

위의 B 까지의 소스 다음에 아래 코드를 추가하여 실행합니다.

// 클래스 추가

import java.awt.BasicStroke;

// 2. 그래프 전체의 경계선 설정
chart.setBorderVisible(true); // 차트전체의 경계선이 나타난다.
chart.setBorderPaint(Color.BLUE); // 차트전체의 경계선의 색을 파란색으로 정한다.
chart.setBorderStroke(new BasicStroke(5)); // 차트전체의 경계선의 두께를 정한다.

챠트의 테두리가 파랗고 좀 두껍게 나왔죠?

D. Plot 영역 조정하기

위의 C 소스 다음에 아래의 코드를 넣고 실행합니다.

// 클래스 추가

import org.jfree.chart.plot.CategoryPlot;

// 3. Plot 영역 조정하기
CategoryPlot plot = chart.getCategoryPlot(); // 챠트의 Plot 객체를 구한다.
plot.setBackgroundPaint(Color.lightGray); // 챠트의 Plot 배경색을 lightGray로 바꾼다.
plot.setRangeGridlinePaint(Color.BLUE); // 수평 그리드라인의 색을 BLUE로 바꾼다.
plot.setDomainGridlinesVisible(false); // 수직 그리드라인을 안보이게 한다.

어디가 변했는지 느껴지죠?

E. 횡축 설정하기

위의 D 소스 다음에 아래의 코드를 넣고 실행합니다.

// 클래스 추가

import org.jfree.chart.axis.CategoryAxis;
import org.jfree.chart.axis.CategoryLabelPositions;

// 4. 횡축 설정하기
CategoryAxis axis = plot.getDomainAxis(); // 횡축 객체 구하기
axis.setLowerMargin(0.03); // 횡축의 가장 왼쪽과 가장 왼쪽 봉과의 여백
axis.setUpperMargin(0.03); // 횡축의 가장 오른쪽과 가장 오른쪽 봉과의 여백
axis.setCategoryLabelPositions
(CategoryLabelPositions.createUpRotationLabelPositions(Math.PI / 6.0));
// 카테고리명을 위로 향하게 비스듬히 나타나도록 한다.

잘 보시면 어디가 바뀌었는지 보입니다.(^^)

F. 종축 설정하기

위의 E 소스 다음에 아래의 코드를 넣고 실행합니다.

// 클래스 추가

import org.jfree.chart.axis.NumberAxis;

// 5. 종축 설정하기
NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis();
rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());

"getRangeAxis()"로 종축 설정을 구합니다.
"setStandardTickUnits()"로 정수값만을 표시하도록 설정합니다.
(여기선 종축이 수치이기 때문에 NumberAxis로 캐스트했지만
종축이 일자인 경우에는 DateAxis,
시각인 경우에는 PeriodAxis로 캐스트합니다.

이 문서는 위에서 데이타 중에 마이너스 값이 있기 때문에 종축의 표시가 이미 정수로

나타나지만 음수값을 양수로 고친 후 보면 0.5,1.0,1.5.... 식으로 나타납니다.

이것을 1, 2, 3 ... 으로 보여줄 때 위의 코드를 사용합니다.

그래서 모양이 E 와 똑같기 때문에 이 섹션은 그림 파일이 없습니다.

G. 봉을 커스터마이즈 하기

CategoryPlot의 오브젝트로 부터 그래프의 표시방법을 결정하는
Renderer 오브젝트를 구하여 봉의 모양을 조정합니다.

// 클래스 추가

import org.jfree.chart.renderer.category.BarRenderer;

봉과 봉사이가 좁아졌죠?

H. 봉에 그라데이션 효과를 주고 색깔도 바꾸기

// 클래스 추가

import java.awt.GradientPaint;

// 7.봉색깔 바꾸기
GradientPaint gp0 = new GradientPaint(0.0f, 0.0f, Color.blue, 0.0f, 0.0f, new Color(0, 0, 64));
GradientPaint gp1 = new GradientPaint(0.0f, 0.0f, Color.green, 0.0f, 0.0f, new Color(0, 64, 0));
GradientPaint gp2 = new GradientPaint(0.0f, 0.0f, Color.red, 0.0f, 0.0f, new Color(64, 0, 0));
renderer.setSeriesPaint(0, gp0);
renderer.setSeriesPaint(1, gp1);
renderer.setSeriesPaint(2, gp2);

전단계의 그래프와 비교해 보면 색깔의 순서가 바뀌었습니다.

그리고 그라데이션 효과도 나타나구요.

I. 전체 완성 소스

import java.awt.Color;

import java.awt.BasicStroke;

import org.jfree.chart.plot.CategoryPlot;

import org.jfree.chart.axis.CategoryAxis;
import org.jfree.chart.axis.CategoryLabelPositions;

import org.jfree.chart.axis.NumberAxis;

import org.jfree.chart.renderer.category.BarRenderer;

import java.awt.GradientPaint;

public class BarChartDemo_t01_2 extends JApplet{

public BarChartDemo_t01_2(){
// row keys...
final String series1 = "First";
final String series2 = "Second";
final String series3 = "Third";

// create the dataset...
final DefaultCategoryDataset dataset = new DefaultCategoryDataset();

// 여기서부터 다듬기 시작

// 1. 챠트 배경색 바꾸기
chart.setBackgroundPaint(Color.WHITE);

// 2. 그래프 전체의 경계선 설정하기
chart.setBorderVisible(true); // 챠트전체의 경계선이 나타난다.
chart.setBorderPaint(Color.BLUE); // 챠트전체의 경계선의 색을 파란색으로 정한다.
chart.setBorderStroke(new BasicStroke(5)); // 챠트전체의 경계선의 두께를 정한다.

// 4. 횡축 설정하기
CategoryAxis axis = plot.getDomainAxis(); // 횡축 객체 구하기
axis.setLowerMargin(0.03); // 횡축의 가장 왼쪽과 가장 왼쪽 봉과의 여백
axis.setUpperMargin(0.03); // 횡축의 가장 오른쪽과 가장 오른쪽 봉과의 여백
axis.setCategoryLabelPositions
(CategoryLabelPositions.createUpRotationLabelPositions(Math.PI / 6.0));
// 카테고리명을 위로 향하게 비스듬히 나타나도록 한다.

// 5. 종축 설정하기
NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis();
rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());
// "getRangeAxis()"로 종축 설정을 구한다.
// "setStandardTickUnits()"로 정수값만을 표시하도록 설정한다.
// (여기선 종축이 수치이기 때문에 NumberAxis로 캐스트했지만
// 종축이 일자인 경우에는 DateAxis,
// 시각인 경우에는 PeriodAxis로 캐스트한다.

// 6. 봉을 커스터마이즈하기
BarRenderer renderer = (BarRenderer) plot.getRenderer(); // BarRenderer를 구한다.
renderer.setItemMargin(0.05); // 봉과 봉사이의 여백을 정한다.
renderer.setDrawBarOutline(false); // 봉의 경계선 표시를 설정

// 7.봉색깔 바꾸기
GradientPaint gp0 = new GradientPaint(0.0f, 0.0f, Color.blue, 0.0f, 0.0f, new Color(0, 0, 64));
GradientPaint gp1 = new GradientPaint(0.0f, 0.0f, Color.green, 0.0f, 0.0f, new Color(0, 64, 0));
GradientPaint gp2 = new GradientPaint(0.0f, 0.0f, Color.red, 0.0f, 0.0f, new Color(64, 0, 0));
renderer.setSeriesPaint(0, gp0);
renderer.setSeriesPaint(1, gp1);
renderer.setSeriesPaint(2, gp2);

// 다듬기 끝

setContentPane(chartPanel);
}
}

Z. 맺음말

이로서 간단히 봉그래프를 다듬는 것에 대해 적어 봤습니다.

그런데 쓸만한 매뉴얼이 너무 적군요.

- 끝 -

이올린에 북마크하기

Trackback0 : Comment0

#1 #2 #3 #4 #5 ... #21