最近要用jsp在网页上显示图表曲线，网查来查去居然没有我想要的东西，唉！可能关注这方面应用的人太少了吧。不过有幸让我下载了TeeChart for java，那个叫高兴呀，真象是遇到了十几年没见的老友。但网上相关中文文档、资料太少（都是asp的），没办法，只好用自己”二把刀“的英语水平翻译控件包中自带的资料，搞了许久，终于对其有了初步认识。高兴之余，赶快记录，免得日后忘了。
一、首先下载TeeChart for java控件包）
http://www.teechart.net/files/java/public/TeeChartJavaEvaluation.zip
二、开发前的准备（安装）
将下载的TeeChartJavaEvaluation.zip解压，会看到里面有一个TeeChart.Swing.jar，几个TXT和Docs、Examples两个文件夹，很明显Docs是说明文档，Examples是程序实例。将TeeChart.Swing.jar复制到jsp的工程路径下，由于我使用的iDE是netbeans5.0
所以需要在工程中”库“包上右键，选择”添加JAR/文件夹“，将TeeChart.Swing.jar包含到jsp默认工程库下。
三、开发(jsp源码如下):
<%
...
@page contentType="text/html"
%>
<%
...
@page pageEncoding="UTF-8"
%>
<%
...
@page import="com.steema.teechart.*"
%>
<%
...
@page import="com.steema.teechart.editors.*"
%>
<%
...
@page import="com.steema.teechart.styles.*"
%>
<%
...
@page import="com.steema.teechart.drawing.Color"
%>
<!--
以上为TeeChart的单元引用部分，很重要
-->
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=UTF-8"
>
<
title
>
JSP Page
</
title
>
<
SCRIPT
type
="text/javascript"
language
="JavaScript"
>
...
function initChart() ...{ <!-- 记住，这里的chart是靠javascript代码来描绘的 -->
var ll = ch.addSeries(0); //ch为后面定义的图表变量，此句生成一个曲线(0代表曲线，以此类推)
ch.getChart().getTitle().setText("qqp_528论坛年度点击量"); //在此处设置图表标题
ch.getAspect().setView3D(false); //图表是否三维显示
ll.add(1,2,"#339999"); //在曲线上追加节点,x=1,y=2，但x轴显示的名称为"#339999"
ll.add(10,20,"#314999"); //同上 描点
ll.add(15,30,23);
ll.add(2,13.5,"29.4");
var tool1 = tChart1.addTool(1); // 1 = Rotate tool 添加一个工具用于辅助显示图形
<!-- ch.clear();
var ba = ch.addSeries(2);
ba.add(1,2);
ba.add(10,20);
ba.add(120,200);
ba.fillSampleValues(); //此代码被屏蔽，表示给图表自动追加若干随机生机点 -->
}
function editChart() ...{
ch.showEditor(); //弹出图表编辑框用于显示
}
</
SCRIPT
>
</
head
>
<
body
onload
="initChart()"
>
//页面加载即开始描点
<
a
href
=""
_fcksavedurl
=""
"" _fcksavedurl
=""
"" onmousedown
="editChart()"
>
Edit Chart...
</
a
>
<
hr
>
<%
...
TChart ch = new TChart(); //jsp代码，实例化一个图表
// Area aa = new Area(ch.getChart());
//aa.fillSampleValues(10);
ch.setBounds(new Rectangle(6, 71, 572, 268));
//ch.getAspect().setView3D(false);
ch.getPanel().getGradient().setVisible(true);
//ch.getHeader().setText("java teechart");
Line ll = new Line(ch.getChart().chart);
//ch.addSeries(new Line());
ll.setStairs(true);
ll.getLinePen().setColor(Color.BLUE);
ch.getSeries(0).add(ll);
ch.getAxes().getLeft().setStartPosition(0);
ch.getAxes().getLeft().setEndPosition(200);
ch.getAxes().getLeft().getAxisPen().color = Color.RED;
ch.getAxes().getLeft().getTitle().getFont().setColor(Color.RED);
ll.add(2,10,Color.RED);
ll.add(20,50,Color.RED);
//ch.show();
//ChartEditor.editChart(ch.getChart());
/* ch.addSeries(new Line());
ch.getAxes().getBottom().setIncrement(1);
ch.getSeries(0).add(200,"pears", Color.RED);
ch.getChart().getTitle().setText("在有工fdsa");
Series se = ch.getSeries(0);
ch.getSeries(0).add(1.2,4.3);
ch.getSeries(0).add(20,143);
se.add(23,56);
se.clear(); */
// ch.getSeries(0).fillSampleValues();
%>
<!--
以下为图表调用到页面，采用java的Applet插件形式
-->
<
applet
codebase
="."
archive
="TeeChart.Swing.jar"
//加载的插件包，特别注意此处的路径，控件加载失败往往由此造成
code
="com.steema.teechart.TChartApplet.class"
//加载的控件类
width
="500"
height
="400"
name
="ch"
//此处即为以上生成的图表实例，注意大小写
align
="middle"
vspace
="10"
hspace
="10"
alt
="TeeChart for Java applets. qqp_528"
>
</
applet
>
</
body
>
</
html
>
四、补充说明 现在看起来的确简单，但这只是皮毛，teechart当中有几十种样式，几百个属性。这不是一两天就吃透的，具体可以参考以上说的Docs文件夹的说明文档，只是javascript没有代码提示是很烦人的，不过用熟了可能就好一点。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
