使用JSP怎么在网页中绘图？

想加入一个动态折线图。就是根据数据库中的数据进行统计然后作图。需要什么控件请指出。... 想加入一个动态折线图。就是根据数据库中的数据进行统计然后作图。需要什么控件请指出。展开

 我来答

3个回答

#热议# 空调使用不当可能引发哪些疾病？

sgby0212
推荐于2016-12-06 · TA获得超过634个赞

知道小有建树答主

回答量：428

采纳率：0%

帮助的人：195万

我也去答题访问个人页

关注

展开全部

简单的可以用java.awt.geom java.awt.image 这两个包
// 清空缓冲区
response.reset();

// 注意这里的MIME类型
response.setContentType("image/png");

// 创建一个 610X400 的图像
int width = 610, height = 400;

BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);

// 创建Java2D对象
/**
Graphics g = image.getGraphics();
Graphics2D g2d = (Graphics2D)g;
*/
Graphics2D g2d = image.createGraphics();

// 填充背景
g2d.setColor(Color.WHITE);
g2d.fillRect(0, 0, width, height);

// 绘制新背景
GradientPaint grayGP = new GradientPaint(0, 0, Color.GRAY, width, height,
new Color(200, 200, 200), false);
g2d.setPaint(grayGP);
g2d.fillRoundRect(20, 20, width - 20, height - 20, 50, 50);

g2d.setPaint(Color.WHITE);
g2d.fillRoundRect(12, 12, width - 20, height - 20, 50, 50);

BasicStroke bs = new BasicStroke(4.0f);
g2d.setStroke(bs);
g2d.setPaint(new Color(53, 76, 112));
g2d.drawRoundRect(12, 12, width - 20, height - 20, 50, 50);

GradientPaint blueGP = new GradientPaint(120, 60, new Color(215, 230, 252),
120, 300, Color.WHITE, false);
g2d.setPaint(blueGP);
g2d.fillRect(120, 60, 440, 300);

// 绘制图表标题
String chartTitle = "计算机编程类图书2004年月销售量统计图";
g2d.setFont(new Font("方正粗宋简体", Font.PLAIN, 22));
g2d.setColor(Color.BLACK);
g2d.drawString(chartTitle, 140, 40);

// 创建虚线笔划
float[]dashes = { 3.f };
bs = new BasicStroke(1.0f, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND,
10, dashes, 0);
g2d.setStroke(bs);
g2d.setFont(new Font("Courier New", Font.PLAIN, 12));
String str = "2004-";
int stringLength = 0;

for (int i = 1; i <= 12; i++)
{
// 绘制垂直方向虚线
g2d.drawLine(80+i * 40, 50, 80+i * 40, 360);

// 绘制横轴上月份的说明文字
str += i;
stringLength = g2d.getFontMetrics().stringWidth(str);
if (i % 2 == 0)
{
g2d.drawString(str, 80+i * 40 - stringLength / 2, 387);
}
else
{
g2d.drawString(str, 80+i * 40 - stringLength / 2, 375);
}
str = "2004-";
}

str = "";
int stringHeight = 0;

for (int i = 0; i < 300; i += 30)
{
// 绘制水平方向虚线
g2d.drawLine(120, 60+i, 570, 60+i);

// 绘制纵轴上销售量的说明文字
str += 100-i / 3;
stringHeight = g2d.getFontMetrics().getAscent();
stringLength = g2d.getFontMetrics().stringWidth(str);
g2d.drawString(str, 110-stringLength, 60+i + stringHeight / 2);
str = "";
}

// 绘制坐标轴
g2d.setStroke(new BasicStroke(3.0f));
g2d.setColor(new Color(53, 76, 112));
g2d.drawLine(120, 50, 120, 360);
g2d.drawLine(120, 360, 570, 360);

// 绘制纵坐标上的标题
g2d.setFont(new Font("黑体", Font.PLAIN, 15));
g2d.drawString("月销售量", 40, 45);

// 调用TriangleServlet类，绘制坐标轴上的箭头
TriangleServlet ts = new TriangleServlet();
ts.setFillColor(new Color(53, 76, 112));
ts.setBaseLine(10);
ts.setAlpha(60);
ts.drawTrigangle(570, 360, 2, 2, g2d); // 绘制横坐标轴上的箭头
ts.drawTrigangle(120, 50, 1, 2, g2d); // 绘制纵坐标轴上的箭头

String[] bookTitle = { "JAVA", "C#" };
Color[] bookColor = { Color.RED, Color.ORANGE };
int[] sales = new int[12];
int[] month = new int[12];

g2d.setFont(new Font("Courier New", Font.PLAIN, 12));
for (int i = 0; i < bookTitle.length; i++)
{
// 初始化绘制数据
int bookSales = 0;
for (int j = 0; j < sales.length; j++)
{
bookSales = 45+(int)(Math.random() * 50);
sales[j] = 360-bookSales * 3;
month[j] = 120+j * 40;
}

// 重新设置笔划
g2d.setStroke(new BasicStroke(5.0f));
g2d.setColor(bookColor[i]);

// 绘制月销售量折线
g2d.drawPolyline(month, sales, sales.length);

// 绘制图例
g2d.fillRect(30, 140+i * 20, 10, 10);
g2d.setColor(Color.BLACK);
g2d.drawString(bookTitle[i], 45, 150+i * 20);
}

// 部署图形
g2d.dispose();

// 利用ImageIO类的write方法对图像进行编码
ServletOutputStream sos = response.getOutputStream();
ImageIO.write(image, "PNG", sos);
sos.close();

已赞过 已踩过<

评论收起

华为云

广告2024-12-08

网站建设，华为云模板建站，3000+模板，60+行业覆盖，PC+移动自适应建站，仅需368元/年华为云建站，全程1v1管家式服务，不满意全额退，多端合一，全场景覆盖

www.huaweicloud.com

CodeMan
推荐于2016-07-03 · 知道合伙人软件行家

CodeMan
知道合伙人软件行家

采纳数：193 获赞数：505

php开发 html mysql javascript vb

向TA提问私信TA

关注

展开全部

response.setContentType("image/png");

// 创建一个 610X400 的图像
int width = 610, height = 400;

BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);

// 创建Java2D对象
/**
Graphics g = image.getGraphics();
Graphics2D g2d = (Graphics2D)g;
*/
Graphics2D g2d = image.createGraphics();

// 填充背景
g2d.setColor(Color.WHITE);
g2d.fillRect(0, 0, width, height);

// 绘制新背景
GradientPaint grayGP = new GradientPaint(0, 0, Color.GRAY, width, height,
new Color(200, 200, 200), false);
g2d.setPaint(grayGP);
g2d.fillRoundRect(20, 20, width - 20, height - 20, 50, 50);

g2d.setPaint(Color.WHITE);
g2d.fillRoundRect(12, 12, width - 20, height - 20, 50, 50);

BasicStroke bs = new BasicStroke(4.0f);
g2d.setStroke(bs);
g2d.setPaint(new Color(53, 76, 112));
g2d.drawRoundRect(12, 12, width - 20, height - 20, 50, 50);

GradientPaint blueGP = new GradientPaint(120, 60, new Color(215, 230, 252),
120, 300, Color.WHITE, false);
g2d.setPaint(blueGP);
g2d.fillRect(120, 60, 440, 300);

// 绘制图表标题
String chartTitle = "计算机编程类图书2004年月销售量统计图";
g2d.setFont(new Font("方正粗宋简体", Font.PLAIN, 22));
g2d.setColor(Color.BLACK);
g2d.drawString(chartTitle, 140, 40);

// 创建虚线笔划
float[]dashes = { 3.f };
bs = new BasicStroke(1.0f, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND,
10, dashes, 0);
g2d.setStroke(bs);
g2d.setFont(new Font("Courier New", Font.PLAIN, 12));
String str = "2004-";
int stringLength = 0;

for (int i = 1; i <= 12; i++)
{
// 绘制垂直方向虚线
g2d.drawLine(80+i * 40, 50, 80+i * 40, 360);

// 绘制横轴上月份的说明文字
str += i;
stringLength = g2d.getFontMetrics().stringWidth(str);
if (i % 2 == 0)
{
g2d.drawString(str, 80+i * 40 - stringLength / 2, 387);
}
else
{
g2d.drawString(str, 80+i * 40 - stringLength / 2, 375);
}
str = "2004-";
}

str = "";
int stringHeight = 0;

for (int i = 0; i < 300; i += 30)
{
// 绘制水平方向虚线
g2d.drawLine(120, 60+i, 570, 60+i);

// 绘制纵轴上销售量的说明文字
str += 100-i / 3;
stringHeight = g2d.getFontMetrics().getAscent();
stringLength = g2d.getFontMetrics().stringWidth(str);
g2d.drawString(str, 110-stringLength, 60+i + stringHeight / 2);
str = "";
}

// 绘制坐标轴
g2d.setStroke(new BasicStroke(3.0f));
g2d.setColor(new Color(53, 76, 112));
g2d.drawLine(120, 50, 120, 360);
g2d.drawLine(120, 360, 570, 360);

// 绘制纵坐标上的标题
g2d.setFont(new Font("黑体", Font.PLAIN, 15));
g2d.drawString("月销售量", 40, 45);

// 调用TriangleServlet类，绘制坐标轴上的箭头
TriangleServlet ts = new TriangleServlet();
ts.setFillColor(new Color(53, 76, 112));
ts.setBaseLine(10);
ts.setAlpha(60);
ts.drawTrigangle(570, 360, 2, 2, g2d); // 绘制横坐标轴上的箭头
ts.drawTrigangle(120, 50, 1, 2, g2d); // 绘制纵坐标轴上的箭头

String[] bookTitle = { "JAVA", "C#" };
Color[] bookColor = { Color.RED, Color.ORANGE };
int[] sales = new int[12];
int[] month = new int[12];

g2d.setFont(new Font("Courier New", Font.PLAIN, 12));
for (int i = 0; i < bookTitle.length; i++)
{
// 初始化绘制数据
int bookSales = 0;
for (int j = 0; j < sales.length; j++)
{
bookSales = 45+(int)(Math.random() * 50);
sales[j] = 360-bookSales * 3;
month[j] = 120+j * 40;
}

// 重新设置笔划
g2d.setStroke(new BasicStroke(5.0f));
g2d.setColor(bookColor[i]);

// 绘制月销售量折线
g2d.drawPolyline(month, sales, sales.length);

// 绘制图例
g2d.fillRect(30, 140+i * 20, 10, 10);
g2d.setColor(Color.BLACK);
g2d.drawString(bookTitle[i], 45, 150+i * 20);
}

// 部署图形
g2d.dispose();

// 利用ImageIO类的write方法对图像进行编码
ServletOutputStream sos = response.getOutputStream();
ImageIO.write(image, "PNG", sos);
sos.close();

已赞过 已踩过<

评论收起

DoubleJankin
2007-09-13 · 超过14用户采纳过TA的回答

知道答主

回答量：69

采纳率：0%

帮助的人：0

我也去答题访问个人页

关注

展开全部

可以使用Jfreechart.jar组件

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

一键网站制作—领先的安卓Apk修改工具

轻松修改安卓应用名称和图标、定制软件的功能和界面、并将apk转成AS源代码项目。通过加固和混淆的方式让应用过白不报毒，还能将网页打包成各种手机平台的应用。

www.apkeditor.cn广告

美橙建站-在线网页制作

美橙建站系统是新一代网站建设神器。功能强大，操作简单，网站按需定制，建站无需代码，自由拖拽，低成本快速建站。

www.cndns.com广告

华为云专业建站—提供一站式网站建设服务

www.huaweicloud.com广告

使用JSP怎么在网页中绘图？

您可能关注的内容

其他类似问题

为你推荐：