Download - intra-mart Accel Platform - Accel Series ドキュメントアー …accel-archives.intra-mart.jp/2014-winter/document/iap/public_zh_CN/... · intra-mart Accel Platform 图表绘制模块编程指南

intra-mart Accel Platform

图表绘制模块编程指南

2012/10/01 第 1 版

＜＜变更历史＞＞

变更年月日变更内容

2012/10/01 第 1 版

目录

制作者：株式会社 NTT データイントラマート Page i

＜＜目录＞＞

1 序言................................................................................................. 1

2 API.................................................................................................. 2

2.1 概要............................................................................................. 2

2.2 JavaEE开发模式................................................................................... 2

2.2.1 标签库....................................................................................... 2

2.2.2 im-BizAPI.................................................................................... 2

2.3 脚本开发模式..................................................................................... 2

2.3.1 标签库....................................................................................... 2

3 JavaEE开发模式....................................................................................... 4

3.1 序言............................................................................................. 4

3.2 饼图............................................................................................. 4

3.2.1 示例中使用的................................................................................. 4

3.2.2 示例代码..................................................................................... 4

3.2.3 执行结果..................................................................................... 4

3.3 组合............................................................................................. 6

3.3.1 示例中使用的API.............................................................................. 6

3.3.2 示例代码..................................................................................... 6

3.3.3 执行结果..................................................................................... 7

3.4 复合图表其 1 ................................................................................... 8

3.4.1 示例中使用的API.............................................................................. 8

3.4.2 示例代码..................................................................................... 8

3.4.3 执行结果..................................................................................... 9

3.5 复合图表其 2 .................................................................................. 10

3.5.1 示例中使用的API............................................................................. 10

3.5.2 示例代码.................................................................................... 10

3.5.3 执行结果.................................................................................... 11

4 脚本开发模式........................................................................................ 12

4.1 序言............................................................................................ 12

4.2 饼图............................................................................................ 12

4.2.1 示例中使用的API............................................................................. 12

4.2.2 示例代码.................................................................................... 12

4.2.3 执行结果.................................................................................... 12

4.3 组合............................................................................................ 14

4.3.1 示例中使用的API............................................................................. 14

4.3.2 示例代码.................................................................................... 14

4.3.3 执行结果.................................................................................... 15

4.4 复合图表其 1 ................................................................................... 16

4.4.1 示例中使用的API............................................................................. 16

4.4.2 示例代码.................................................................................... 16

4.4.3 执行结果.................................................................................... 17

4.5 复合图表其 2 .................................................................................. 18

4.5.1 示例中使用的API............................................................................. 18

4.5.2 示例代码.................................................................................... 18

4.5.3 执行结果.................................................................................... 19

5 设定文件金额设定.................................................................................... 20

5.1 WEB-INF/conf/graph/default.properties........................................................... 20

intra-mart 录表录制模录录程指南

Page ii Copyright 2000- エラー! プロパティ名に誤りがあります。株式会社 NTT 数据

英特录 All rights Reserved.

5.1.1 目录结构 .................................................................................... 20

5.1.2 设定项目 .................................................................................... 20

5.2 WEB-INF/web.xml ................................................................................. 23

5.2.1 jp.co.intra_mart.foundation.chart.servlet.GraphDrawerServlet类 .............................. 23

5.3 主题（Theme）功能 ............................................................................... 23

5.3.1 使用步骤 .................................................................................... 23

6 目录结构 ............................................................................................ 25

6.1 目录构成 ........................................................................................ 25

7 附录 ................................................................................................ 26

7.1 图表示例 ........................................................................................ 26

7.1.1 菜单 ........................................................................................ 26

7.1.2 目录构成 .................................................................................... 26

1 序言

制作者：株式会社 NTT データイントラマート Page 1

1 序言

intra-mart Accel Platform （下述 iAP）的图表绘制模块是图表生成库

使用“JfreeChart (http://www.jfree.org/jfreechart/)”实现图表的绘制。

本文档将对图表绘制模块的基本设定以及编程进行说明。

http://www.jfree.org/jfreechart/�

intra-mart 录表录制模录录程指南

Page 2 Copyright 2000- エラー! プロパティ名に誤りがあります。株式会社 NTT 数据

英特录 All rights Reserved.

2 API

2.1 概要

iAP 中提供了下述图表绘制模块 API。

2.2 JavaEE开发模式

2.2.1 标签库

intra-mart 标准标签库

图表绘制标签库 imchart:chart

2.2.2 im-BizAPI

应用程序共通模块 API

jp.co.intra_mart.foundation.chart.data

jp.co.intra_mart.foundation.chart.dataset

jp.co.intra_mart.foundation.chart.drawer 包

jp.co.intra_mart.foundation.chart.graphInfo

※ 关于包含在上述包中的类、方法的详细说明请参照 API 列表。

2.3 脚本开发模式

2.3.1 标签库

画面共通 IMART 标签库

图表绘制系标签 chart

3 JavaEE 开发模式

3.1 序言

在此，通过一些简单的示例对 JavaEE 开发模式中图表绘制模块的使用方法（编程）进行说明。

3.2 饼图

3.2.1 示例中使用的


style 属性 pie

jp.co.intra_mart.foundation.chart.graphInfo.PieGraphInfo

jp.co.intra_mart.foundation.chart.dataset.PieDataset 应用程序共通模块 API

jp.co.intra_mart.foundation.chart.data.PieData

3.2.2 示例代码

< jsp > <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://www.intra-mart.co.jp/taglib/foundation/chart" prefix="imchart"%>

<%@page import="jp.co.intra_mart.foundation.chart.dataset.*"%>

<%@page import="jp.co.intra_mart.foundation.chart.data.*"%>

<%@page import="jp.co.intra_mart.foundation.chart.graphInfo.*"%>

<%

// 饼图用示例数据

PieGraphInfo pieGraphInfo = new PieGraphInfo();

PieDataset pieDataset = new PieDataset();

pieDataset.addDataset(new PieData("东京分店", 700));

pieDataset.addDataset(new PieData("大阪分店", 300));

pieDataset.addDataset(new PieData("神奈川分店", 250));

pieDataset.addDataset(new PieData("千叶分店", 302));

pieDataset.addDataset(new PieData("名古屋分店", 155));

pieDataset.addDataset(new PieData("埼玉分店", 400));

pieGraphInfo.setDataset(pieDataset);

%>

<div class="imui-title">

<h1>饼图示例</h1>

</div>

<div class="imui-form-container-narrow">

<table>

<tr>

<td><imchart:chart displayType="3D" style="pie" data="<%=pieGraphInfo

%>"></imchart:chart></td>

</tr>

</table>

</div>

3.2.3 执行结果

饼图用数据生成部分

图表图片显示部分

3.3 组合

3.3.1 示例中使用的API


style 属性 portFolio

jp.co.intra_mart.foundation.chart.graphInfo.PortFolioGraphInfo

jp.co.intra_mart.foundation.chart.dataset.PortFolioDataset

jp.co.intra_mart.foundation.chart.data.PortFolioData 应用程序共通模块 API

jp.co.intra_mart.foundation.chart.data.PortFolioValue

3.3.2 示例代码






<%

// 组合图表用示例数据

PortFolioGraphInfo portFolioInfo = new PortFolioGraphInfo(50, 6000);

PortFolioDataset portFolioDataset = new PortFolioDataset();

PortFolioData pfSeries1 = new PortFolioData();

pfSeries1.setName("东京");

pfSeries1.addValue(new PortFolioValue(15, 3000, 1000));



pfSeries2.setName("大阪");



pfSeries3.setName("名古屋");


portFolioDataset.addData(pfSeries1);



portFolioInfo.setDataset(portFolioDataset);

%>


<h1>组合示例</h1>

</div>


<table>

<tr>

<td><imchart:chart style="portFolio" data="<%=portFolioInfo %>"></imchart:chart></td>

</tr>

</table>

</div>

组合图表用

数据生成部分




3.3.3 执行结果

3.4 复合图表其 1



style 属性 combined

jp.co.intra_mart.foundation.chart.graphInfo.BarGraphInfo

jp.co.intra_mart.foundation.chart.dataset.BarDataset

jp.co.intra_mart.foundation.chart.data.StandardData

jp.co.intra_mart.foundation.chart.graphInfo.LineGraphInfo


jp.co.intra_mart.foundation.chart.dataset.LineDataset

3.4.2 示例代码






<%

// 柱形图示例数据

BarGraphInfo barGraphInfo = new BarGraphInfo();

BarDataset barDataset = new BarDataset();

StandardData barSeries1 = new StandardData();

barSeries1.setName("东京分店");

barSeries1.setValues(new Number[] { 300, 200, 400, 500, 250, 380 });

StandardData barSeries2 = new StandardData();

barSeries2.setName("大阪分店");

barSeries2.setValues(new Number[] { 190, 320, 320, 500, 410, 230 });

barDataset.setCategory(

new String[] { "1 月", "２月", "３月", "４月", "５月", "６月" });

barDataset.addData(barSeries1);

barDataset.addData(barSeries2);

barGraphInfo.setDataset(barDataset);

// 折线图示例数据

LineGraphInfo lineGraphInfo = new LineGraphInfo();

LineDataset lineDataset = new LineDataset();

StandardData lineSeries1 = new StandardData();

lineSeries1.setName("东京分店");

lineSeries1.setValues(new Number[] { 300, 200, 250, 300, 360, 390 });

StandardData lineSeries2 = new StandardData();

lineSeries2.setName("大阪支店");

lineSeries2.setValues(new Number[] { 240, 300, 350, 180, 380, 340 });

lineDataset.setCategory(

new String[] { "1 月", "2 月", "3 月", "4 月", "5 月", "6 月" });

lineDataset.addData(lineSeries1);

lineDataset.addData(lineSeries2);

lineGraphInfo.setDataset(lineDataset);

柱形图用数据生成部分

折线图用

数据生成部分



%>


<h1>复合图表 1 示例</h1>

</div>


<table>

<tr>

<td><imchart:chart style="combined" data="<%=barGraphInfo %>"

subData="<%=lineGraphInfo %>"></imchart:chart></td>

</tr>

</table>

</div>

3.4.3 执行结果





style 属性 bar

jp.co.intra_mart.foundation.chart.graphInfo.LineGraphInfo

jp.co.intra_mart.foundation.chart.dataset.LineDataset

jp.co.intra_mart.foundation.chart.data.StandardData

jp.co.intra_mart.foundation.chart.graphInfo.BarGraphInfo


jp.co.intra_mart.foundation.chart.dataset.BarDataset

3.5.2 示例代码






<%


LineGraphInfo lineInfo = new LineGraphInfo();

LineDataset lineData = new LineDataset();

StandardData lineSeries = new StandardData();

lineSeries.setName("营业费");

lineSeries.setValues(

new Number[] { 280, 130, 100, 190, 70, 80, 130, 110, 390, 383 });

lineData.setCategory(new String[] { "1999", "2000", "2001", "2002",

"2003", "2004", "2005", "2006", "2007", "2008" });

lineData.addData(lineSeries);

lineInfo.setDataset(lineData);


BarGraphInfo barInfo = new BarGraphInfo();

BarDataset barData = new BarDataset();

StandardData barSeries = new StandardData();

barSeries.setName("东京分店");

barSeries.setValues(

new Number[] { 3200, 3600, 4000, 4200, 3940,

4300, 6400, 2320, 3420, 5000 });

barData.setCategory(new String[] { "1999", "2000", "2001", "2002",

"2003", "2004", "2005", "2006", "2007", "2008" });

barData.addData(barSeries);

barInfo.setDataset(barData);

%>



</div>


<table>

<tr>

折线图用

数据生成部分

柱形图用数据生成部分



<td><imchart:chart style="bar"

data="<%=barInfo %>" subData="<%=lineInfo %>"></imchart:chart></td>

</tr>

</table>

</div>

3.5.3 执行结果


4 脚本开发模式

4.1 序言

在此，通过一些简单的示例对脚本开发模式中图表绘制模块的使用方法（编程）进行说明。

4.2 饼图


图表绘制标签库 chart

style 属性 pie

4.2.2 示例代码

< html > <div class="imui-title">

<h1>饼图示例</h1>

</div>


<table>

<tr>

<td><imart type="chart" style="pie" data=pieData /></td>

</tr>

</table>

</div>

< js > let pieData = {};

function init(request) {

// 饼图示例数据

pieData.dataset = [{

"name" : "东京分店",

"value" : 700

}, {

"name" : "大阪分店",

"value" : 300

}, {

"name" : "神奈川分店",

"value" : 250

}, {

"name" :"千叶分店",

"value" : 302

}, {

"name" : "名古屋分店",

"value" : 155

}, {

"name" : "埼玉分店",

"value" : 400

}];

}

4.2.3 执行结果


饼图用数据生成部分

4.3 组合



style 属性 portFolio

4.3.2 示例代码


<h1>组合示例</h1>

</div>


<table>

<tr>

<td><imart type="chart" style="portFolio" data=portFolioData /></td>

</tr>

</table>

</div>

< js > let portFolioData = {};

function init(request){

// 组合图表用示例数据

portFolioData.xAxis = {

"max" : 100,

"min" : 0,

"scale" : 10

};

portFolioData.yAxis = {

"max" : 10000,

"min" : 0,

"scale" : 1000

};

portFolioData.dataset = {

"data" : [{

"name" : "东京",

"value" : [{

"xValue" : 15,

"yValue" : 3000,

"size" : 1000

}, {

"xValue" : 90,

"yValue" : 9000,

"size" : 100

}]

}, {

"name" : "大阪",

"value" : [{

"xValue" : 50,

"yValue" : 5000,

"size" : 3000

}]

}, {

"name" : "名古屋",

"value" :

"xValue" : 35,

"yValue" : 3000,

"size" : 2000

}]


组合图表用

数据生成部分



}]

};

}

4.3.3 执行结果




style 属性 combined

4.4.2 示例代码



</div>


<table>

<tr>

<td><imart type="chart" style="combined" data=lineData subData=barData /></td>

</tr>

</table>

</div>

< js > let barData = {};

let lineData = {};

function init(request){

// 柱形图示例数据（普通柱形图）

barData.dataset = {

"category" : ["１月", "２月", "３月", "４月", "５月", "６月"],

"data" : [{


"value" : [300, 200, 400, 500, 250, 380]

}, {


"value" : [190, 320, 320, 500, 410, 230]

}, {

"name" :"千叶分店",

"value" : [210, 260, 300, 320, 330, 360]

}]

};


lineData.dataset = {

"category" : ["１月", "２月", "３月", "４月", "５月", "６月"],

"data" : [{


"value" : [300, 200, 250, 300, 360, 390]

}, {


"value" : [240, 300, 350, 180, 380, 340]

}]

};

}


折线图用

数据生成部分

柱形图用

数据生成部分



4.4.3 执行结果




style 属性 bar

4.5.2 示例代码



</div>


<table>

<tr>

<td><imart type="chart" style="bar" data=bar subData=line /></td>

</tr>

</table>

</div>

< js > let line = {};

let bar = {};

function init(request) {


line.dataset = {

"category" : ["1999", "2000", "2001", "2002", "2003", "2004",

"2005", "2006", "2007", "2008"],

"data" : [{

"name" : "营业费",

"value" : [280, 130, 100, 190, 70, 80, 130, 110, 390, 383]

}]

};


bar.dataset = {

"category" : ["1999", "2000", "2001", "2002", "2003", "2004",

"2005", "2006", "2007", "2008"],

"data" : [{


"value" : [3200, 3600, 4000, 4200, 3940, 4300, 6400, 2320, 3420, 5000]

}]

};

}


折线图用

数据生成部分

柱形图用

数据生成部分



4.5.3 执行结果

5 设定文件金额设定

5.1 WEB-INF/conf/graph/default.properties

default.properties 中，对图表图片文件的标题字体和背景色等进行设定。

5.1.1 目录结构

WAR 文件

┃

┣

┃

┃

┃

┃

WEB-INF/

┃

┗conf/

┃

┗ graph/

┃

┗ default.properties

＿

＿

＿

＿

＿

图表绘制模块设定文件

☆参考☆

此设定文件通过 JDK 的“native2ascii”命令进行了编码变换。

编辑、参照时，请使用“-reverse”选项变换成本地编码的文件。

5.1.2 设定项目

<<图表图片和设定项目>>



5.1.2.1 图片的内容类型

参数说明默认值

graph.content.type 图片文件的内容类型

可指定下述支持的内容。

・ png

・ jpeg

png

5.1.2.2 图片文件的标题


graph.extra.large.font.name 字体名 dialog

graph.extra.large.font.style 字体的样式

可指定下述样式。

・ BOLD

・ PLAIN

・ ITALIC

・ BOLDITALIC

BOLD

graph.extra.large.font.size 字体大小

指定用十进制数表示的字体点阵大小。

18

5.1.2.3 图片文件的子标题


graph.large.font.name 字体名 dialog

graph.large.font.style 字体的样式


・ BOLD

・ PLAIN

・ ITALIC

・ BOLDITALIC

PLAIN

graph.large.font.size 字体大小


14

5.1.2.4 x 轴标签、y轴标签、图例


graph.regular.font.name 字体名 dialog

graph.regular.font.style 字体的样式


・ BOLD

・ PLAIN

・ ITALIC

・ BOLDITALIC

PLAIN

graph.regular.font.size 字体大小


12

5.1.2.5 图片的中所显示字符的字体


graph.small.font.name 字体名 dialog

graph.small.font.style 字体的样式


・ BOLD

・ PLAIN

・ ITALIC

・ BOLDITALIC

PLAIN

graph.small.font.size 字体大小


10

5.1.2.6 图片文件的高度


graph.image.height 图片文件的高度 360

5.1.2.7 图片文件的宽度


graph.image.width 图片文件的宽度 300

5.1.2.8 背景色


graph.plot.background.color 图片文件的背景色 white

graph.plot.outline.color 图片文件网格线的背景色 gray

graph.legend.background.color 图例的背景色 white

graph.chart.background.color 图（图表）的背景色 whitesmoke

graph.horizontal.gridline.color 网格线（横向）的背景色 lightgrey

graph.vertical.gridline.color 网格线（纵向）的背景色 lightgrey

※ 可用 16 进制数指定背景色。

（例）将背景色指定为白色时 → #FFFFFF



5.2 WEB-INF/web.xml

web.xml 中，设定了是否将生成的图片文件保存到 Storage Service 中。

5.2.1 jp.co.intra_mart.foundation.chart.servlet.GraphDrawerServlet类

5.2.1.1 参数

参数名说明默认值

store 设定是否将生成的图片文件保存到的 Storage Service 中。

true ：输出文件

false ：不输出文件

false

5.2.1.2 图片文件的保存位置

保存位置目录 % System Storage 根目录%/work/im_chart/TenantID/登录用户名/

文件名 15 位的唯一 ID

注意事项在相应的会话被废除时，生成的图片文件也会被删除。

（图片文件的保存例子）

%System Storage 根目录%/work/im_chart/default/aoyagi/5hq5us79nrk7a8t

5.3 主题（Theme）功能

可通过独自的属性文件，而不是 default.properties 来定义图表图片文件的标题字体和背景色等的设定。

这样就能指定每个图表图片文件的标题字体和背景色。

5.3.1 使用步骤

1. 生成独自的属性文件并将其配置到与 default.properties 相同的目录

（WEB-INF/conf/graph）中。

关于设定项目请参考“5.1.2 设定项目”。

在此，生成的是WEB-INF/conf/graph/sample.properties。

2. 在程序内指定主题（Theme）。

JavaEE 开发模式

<imart:chart style="portFolio"

data="<%=portFolioInfo %>"

imageHeight="800"

imageWidth="600">

</imart:chart>



theme="sample">

指定属性名称。

脚本开发模式 <imart:chart style="portFolio"


imageHeight="800"

imageWidth="600">

</imart:chart>


data=portFolioData

theme="sample">

3. 通过上述步骤，可将在 sample.properties 中定义的设定内容反映到指定的图表图片文件

中。

指定属性名称。

6 目录结构


6 目录结构

在此，对与图表绘制模块相关的库和设定文件等的目录进行说明。

记述的目录结构全部是产品安装时的初始状态。

6.1 目录构成

WAR 文件

┃

┣

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

WEB-INF /

┃

┣ conf/

┃ ┃

┃ ┗ graph/

┃ ┃

┃ ┗default.properties

┣ lib/

┃ ┃

┃ ┣ im_chart-8.0.0-main.jar

┃ ┃

┃ ┗ jfreechart-1.0.12.jar

┗ jssp/

┃

┗ platform/

┃

┗ system/

┃

┗ common/

┃

┗ parts/

┃

┗ chart/

┃

┣ chart_tag.js

┃

┗ init.js

＿

＿

＿

＿

＿

图表绘制模块设定文件

＿

＿

iWP/iAF 图表绘制模块（库）

＿

JfreeChart 库

＿

＿

＿

＿

＿

＿

＿

＿

＿

＿

＿

＿

图表绘制模块

＿

初始化文件

7 附录

7.1 图表示例

iAP 中分别为 JavaEE 开发模式、脚本开发模式各自提供了使用图表绘制模块的图表示例。

可以在系统管理员导入示例数据后参照这些图表示例。

7.1.1 菜单

7.1.1.1 JavaEE 开发模式

菜单：示例＞脚本开发模式＞图表

7.1.1.2 脚本开发模式

菜单：示例＞JavaEE 开发模式＞图表

7.1.2 目录构成

7.1.2.1 WAR 文件 ┃

┣

┃

┃

┣

┃

┃

┃

┃

┃

┃

┃

┃

┃

┃

sample/

┃

┗ chart/

WEB-INF/

┣ conf/

┃ ┃

┃ ┣ routing-jssp-config/

┃ ┃ ┗

im_chart-sample.xml

┃ ┗

routing-servlet-config/

┃ ┗

im_chart-sample.xml

┗ jssp/

┗ src/

┗ sample/

┗chart

＿

JavaEE 开发模式－图表示例（目录）＿

＿

＿

＿

脚本开发模式路由设定文件

＿

JavaEE 开发模式路由设定文件

＿

＿

＿

脚本开发模式－图表示例（目录）

7 附录


intra-mart Accel Platform

图表绘制模块编程指南描画

2012/10/01 第 1 版

Copyright 2000-2012 株式会社 NTT 数据英特玛

All rights Reserved.

TEL: 03-5549-2821

FAX: 03-5549-2816

E-MAIL: [email protected]

URL: http://www.intra-mart.jp/

Download - intra-mart Accel Platform - Accel Series ドキュメントアー …accel-archives.intra-mart.jp/2014-winter/document/iap/public_zh_CN/... · intra-mart Accel Platform 图表绘制模块编程指南

Top Related