35966人阅读
java（11）
仿QQ聊天程序
转载请标明出处：&
一、设计内容及要求
A.系统概述
我们要做的就是类似QQ这样的面向企业内部的聊天软件，基本功能和QQ类似。首先，系统分为两大部分，第一部分是客户端，是用户使用的部分，第二部分就是服务器，所有的客户端都是通过服务器来进行用户身份验证及聊天转接的。客户端提供主要的界面及服务请求，如：登录界面、注册界面、找回密码界面、主窗体界面、聊天界面、信息查看界面等。客户端主要提供服务请求界面，核心的业务逻辑处理主要由服务器提供，并向客户端发送请求的结果。同时，服务器要能提供服务的开启、关闭功能及查看在线人数及客户端登录日志。
人员组成及分工
张XX（组长）：负责整体的架构设计、后台数据库及通信部分。
房 X（组员）：聊天界面、注册界面、登录界面、找回密码、及其业务逻辑。
高 X（组员）：主窗体界面、信息查看及其业务逻辑。
1).小组成员必须按时完成各自的任务。
2).设计上与技术上有问题的先自行解决（看书、上网查），如不能解决的集体讨论解决。有其它的问题及时提出来！
3).必须写文档（写把各自模块的整体设计用UML图或Viso画的图（尽量不要只是简单的语言叙述）表达出来），学会用面向对象的思想来来设计，采用模块化的思想分解模块。（设计原则与设计模式能用的用）
4).每个类必须有类说明，每个函数也必须有函数说明,函数的具体设计也必须有必要的注释。
5).如果不能遵守规定或要求的可以提前退出，不强留。
（注：即使不会写代码，也没关系，只要一能用UML图或其他的图等表达出自己的设计思想及具体的实现设计也行）
C.开发环境
运行环境：Myeclipse集成开发环境,jdk 1.6版本。
使用语言：Java语言。
使用数据库：Oracle数据库。
1.2需求分析
即时通信软件为我们提供了诸多的方便，使我们逐步享受信息时代的便捷。大家最熟悉的即时通信软件就是QQ了，因为它几乎已经融入了我们每个人的日常生活。没有了QQ，没有了手机，我们或许真的“活不了了”。由此可见，生活在信息时代的人们对即时通信、聊天软件有巨大的需求，这样的软件也将为我们节省大量的时间和金钱，或许还能成为我们发家致富的工具，比如：产品的推介、售后服务及技术交流等。
&&& 然而，既然已经有了QQ如此强大的即时通信软件，我们再去做这样的软件还有什么竞争力吗？QQ已经深入人心，要想再去做可能没有任何竞争力。此时，我们可以换一个角度，调整用户对象。如今，企业内部信息在这个信息时代就是金钱，尤其是一些大企业的内部信息，如果这些信息泄露，可能会造成巨大的经济损失，甚至将导致企业破产。但是，为了便捷企业员工之间的交流，做这样的一个企业内部即时通信、聊天软件还是很有市场的。我们的目标就是做的像QQ，但面向企业内部使用。
&& &&&企业内部为了方便员工之间便捷的交流，需要开发一款适合企业内部员工进行即时通信的软件，这样的软件既满足了企业内部员工之间便捷的交流，同时，也防止企业内部信息的外流，开发这样一块面向企业内部的即时通信软件，对于企业来说获益良多。
&&&& &&在开发这款软件时，为了使习惯了使用QQ的用户，更加方便的使用本软件，我们将很大程度上，模仿QQ的用户界面设计，以适应用户的使用习惯，方便用户使用。
1）客户端：提供登录、主窗体及聊天等界面及对应的业务逻辑，向服务器发送相应的服务请求，并接受相应的处理结果。客户端是轻量级的软件，只负责链接远程服务器，并发出相应的服务请求，并不进行核心业务逻辑的处理。具体的处理交给服务器，而客户端只接收服务器处理的结果并显示给用户。
2）服务器：监控登录信息及在线用户信息，接收客户端的服务请求，并做相应的处理，然后将处理结果发送给客户端。服务器负责处理核心的业务逻辑，并负责连接数据库，保存和读取数据。因此，服务器端设计的好坏也直接影响即时通信软件的质量。
1）客户端：
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &图 1-1 客户端用例图
2）服务器：
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &图 1-2 服务器端用例图
二、设计原理及方案
2.1总体设计
系统架构设计
1）采用MVC架构模式
A．&&&包view（视图、界面层）：只负责界面的显示。
B．&&&包business（业务逻辑层）：核心业务的处理。
C．&&&包data& (数据访问层)：读写数据、接收发送数据。
A. 包view（视图、界面层）：只负责界面的显示。
B. 包business（业务逻辑层）：核心业务的处理。
C. 包data& (数据访问层)：读写数据、接收发送数据。
2）&&&&&&&&&&&文件组织
A.&&&& 客户端：
图2-1 客户端文件组织结构
B.&&&& 服务器：
图2-2 服务器文件组织结构
3）&&&&&&&&&&&&&采用基于网路的三层C/S模式
图2-3 基于C/S的模式图
功能模块设计
1）客户端：
图2-4 客户端功能模块图
2)服务器：
图3-5 服务器功能模块图
数据库设计
1）概念结构设计
& &图 2-6 数据库实体E-R图
2）逻辑结构设计
用户表(QQ号、密码、签名、头像编号、昵称、性别、生日、星座、血型、学历、电话、邮箱、所在地)
分组表(组号、组名、创建时间、QQ号)
好友表(好友QQ号、QQ号、所属分组号、添加时间、是否上线)
聊天记录表(记录编号、发送者QQ号、接受者QQ号、发送时间、信息编号)
聊天内容（信息编号、内容、字体类型、字体大小、字体颜色)
登录信息表(登录编号、登录IP、端口号、登录时间、是否在线、QQ号)
QQ群（群编号、群名称、创建时间）
用户与群关系（关系编号、QQ号、群编号）
3）表结构设计
表 2-1 用户与群关系（User_Group）
表 2-2 用户信息表（UserInfo）
constellation
A、B、O、AB
&表 2-3分组信息表（Subgroup）
默认当前日期
&表 2-4好友信息表（Friends）
所属分组号
&表 2-5聊天记录表（ChatInfo）
creceiveqq
&表 2-6信息表（Text）
tfontcolor
&表 2-7登录信息表（Login）
&表 2-8 QQ群信息（GroupTable）
通信协议设计
计算机之间传送数据由两种，即TCP通信和UDP通信。TCP是可靠的面向连接的通信协议，二UDP是不可靠的面向无连接的通信协议。
1）基于TCP的通信
在进行登录用户验证、添加好友、删除好友等操作时，采用基于TCP的通信协议。
2）基于UDP的通信
基于UDP通信的基本模式：
（1）将数据打包，称为数据包（好比将信件装入信封一样），然后将数据包发往目的地。
&&&&& （2）接受别人发来的数据包（好比接收信封一样），然后查看数据包中的内容。
&&&&&& 在进行用户聊天时，采用基于UDP的通信协议。
缓存数据设计
1） 用户信息Bean
&为了保存用户及好友的个人信息，此处设计用户信息缓存数据，当用户登录时，将用户个人及好友的基本信息保存，以备用户查询，就不用再次连接数据库获取了。
&UserInfoBean类：保存用户QQ号、昵称、签名、血型、地址等信息。
2） 消息信息Bean
&用户在进行聊天时，需要传递必要的信息，此处的消息Bean数据结构就是存储收发用户的QQ号、IP地址、消息内容、字体大小、字体颜色、字体类型等信息。
&&Message类：保存收发用户的QQ号、IP地址等信息。
转载请标明出处：&
2.2详细设计
系统流程图
图 2-7 系统流程图
设计模式使用
1）中介者模式：
所有的用户都通过服务器进行通信，服务器其中介的作用。
2）观察者模式：
&&当有用户登录时，会通知其他在线好友，其他好友及时修改此用户的在线状态。
通信协议的实现
2.1.3.1基于TCP的通信
在进行登录用户验证、添加好友、删除好友等操作时，采用基于TCP的通信协议。
A．客户端TCP通信设计
&&设计ClientToServer类，该类实现了Runnable接口，是一个线程。
主要方法：
[1] boolean sendLoginInfoToServer(User u) :登录请求。
[2] void getProgerties():获取配置文件中的服务器IP地址信息。
[3] void logout(): 下线，通知服务器该用户下线。
[4]inttoRegister(UserInfoBean user):新用户注册，返回QQ号。
[5] void noticeUpdate():通知刷新好友信息。
B. 服务器TCP通信设计
1）设计ServerThread线程类：处理用户连接服务器请求，并为其启动单独的服务（Server）线程。
主要方法：
[1] void run(): 重写线程类Thread的方法，不断的等待客户端的连接请求。
[2] void pauseThread():暂停服务。
[3] void reStartThread():恢复服务。
2）设计Server线程类:处理每个上线用户个各种服务请求。
主要方法：
[1] void run():不断的等待用户的请求信息，并判断请求类型。
[2] void login():处理用户登录。
[3] void registerNewUser():处理注册新用户
[4] void queryUser():处理查询用户。
[5] void addFriend():添加好友。
[6] void deleteFriend():删除好友。
[7] void updateOwnInfo():更新自己的信息。
[8] void logout():下线。
[9] void queryFriend():查询好友信息。
2.1.3.2基于UDP的通信
在进行用户聊天时，采用基于UDP的通信协议。
A．客户端UDP通信设计
&&设计ClientToServerThread线程类：负责UDP通信。
主要方法：
[1]void run():循环等待监听发来的数据。
[2]void getPropertieInfo():获取通信的服务器的IP地址及本机通信端口。
[3]void sendData(byte buffer[]):发送数据。
[4]void Object ByteToObject(byte[] bytes)：将Byte数据转为Object类型。
[5]void ObjectToByte(Object obj):将Object型数据转为Byte型。
[6]void closeSocket():关闭收发数据报套接字。
B. 服务器UDP通信设计
设计ClientToServerThread线程类：负责UDP通信，主要是转发用户发送的信息，并保存用户的聊天记录。
主要方法：
[1]void run():循环等待监听发来的数据。
[2]void getPropertieInfo():获取通信的服务器的IP地址及本机通信端口。
[3]void sendData(byte buffer[]):发送数据。
[4] void Object ByteToObject(byte[] bytes)：将Byte数据转为Object类型。
[5]void ObjectToByte(Object obj):将Object型数据转为Byte型。
[6]void closeSocket():关闭收发数据报套接字。
数据访问层的实现
2.1.4.1 打开数据库连接类（ConnectionFactory）
[1]void getPropertiesInfo():从配置文件中获取数据库连接信息。
[2]Connection getConnection():打开数据库连接。
2.1.4.2 关闭数据库连接类（DbClose）
[1]void getPropertiesInfo():从配置文件中获取数据库连接信息。
[2]void close(Connection conn):关闭数据库连接。
[3]void close(PreparedStatement pre):关闭数据库语句
[4]void close(ResultSet rs):关闭结果集
[5]voidclose(Connection conn, PreparedStatement pre, ResultSet rs)
2.1.4.3 数据操作类（Dml）
[1]void insert(UserInfoBean user):增加新用户，插入信息。
[2]void update(UserInfoBean user):更新用户信息。
[3]void delete(int qq):删除信息。
界面层的实现
2.1.5.1登录界面
JLoginFrm登陆窗体主要用于用户登陆，注册和找回密码。
BackgroundPanel 继承于JPanel主要用于设置窗体背景图片
主要函数：
1.actionPerformed(ActionEvent e)主要对窗体的按键监听
2.JLoginFrm（）构造函数，控件的初始化。
2.1.5.2注册界面
JRegisterFrm继承与JFrame主要用于用户基本信息的注册。
主要函数：
1. Void setDay()根据不同的年份和月份设置天数
2.String getBir()以1-1月-2014形式得到用户的生日
3.getUserInfo()得到用户的所有信息
2.1.5.3 聊天界面
ChatPanel主要用于用户间的聊天通信
主要函数：
1、setMessage()设置当前显示所有会话的面板，不可编辑
2、setSendMessage（）设置当前发送消息的面板，可编辑
3、sendMessage()发送消息，讲发送消息面板的内容发送到会话面板&&&&&&&&&&& 和对方。
4、sendFile()传输文件
5、sendImage()发送图片
6、startShake()发送震动消息
2.1.5.4 主界面
主界面的主要内容有QQ头像设置，包括昵称、QQ号、签名的显示，用户登录状态设置，还有好友列表显示，像这些创建好友列表所需要的信息是从服务端获得的；还有一些辅助界面，比如查看好友资料或者查看自己的资料界面，查找好友界面，添加好友界面等。
源码中的一些主要类及类中的主要方法及其作用：
1.ColorConvertOp类：这个类主要负责颜色转换的
[1]&public&ImageIcon getGrayPicture(String&path)//该方法获取图片路径，将转换后的灰色ImageIcon返回。
[2] public class&CombListRenderer&extends&JLabelimplements&&&& &&2.ListCellRenderer//该类个性化设置combobox的单元格属性
[1]&publicComponent getListCellRendererComponent(JList list,Object obj,int&row,booleansel,booleanhasFocus)&&&
//该方法是重写了ListCellRenderer中的getListCellRendererComponent，返回了一个自定义的Component
3、public class&findFriendFrm&extends&JFrame
//该类负责查找好友界面
[1] public&String getName()//获得找到好友的昵称或者QQ号
[2] public class&InformationFrm&extends&JFrame
//该类负责显示好友信息的界面
2.1.5.5 用户信息界面
&&好友信息界面主要是将从服务端读取的好友的个人信息显示出来。
[1] publicInformationFrm(UserInfoBean userInfo)
//在该构造方法中必须传入一个UserInfoBean 的对象，此对象中包含了好友的所有信息
[2] public class&selectGroupFrm&extends&JFrame
//该类负责显示添加好友的一个界面
&三、实现效果
图 5-1 登录界面
图 5-2 登录界面
图 5-3 注册界面
图 5-4 找回密码界面
图 5-5 主界面 & & & &
&图 5-6 信息查看界面
图 5-7 聊天界面
图 5-8 消息记录界面
图 5-9 服务器登录界面
图 5 – 10 服务器管理界面
四、技术难点与解决方案
4.1通信模块
在通信模块，我们既使用了基于TCP的通信协议，也使用了基于UDP的通信协议，在登录验证、添加好友等通信部分，我们采用了基于TCP的通信协议，在聊天时，我们采用了基于UDP的通信协议，将两种协议都进行了相应的练习。&&
4.2数据库模块
& 在数据库建模时，使用了多张表来存储数据，使其达到了第三范式，虽然，查询数据的时候可能会涉及多个表的嵌套查询，但每个表很单一，扩展灵活。
4.3界面模块
4.3.1 登录界面
登陆界面主要使用到自定义最大化，最小化和关闭按钮，允许鼠标点击窗体拖动。对输入的字符进行判断设置，只允许QQ号码输入数字。使用setUndecorated(true);
setResizable(false);设置去除边框，和不允许改变窗体大小。使用addKeyListener（）函数判断字符输入只允许输入数字，使用addMouseMotionListener（）方法来允许鼠标点击任何地方拖动窗体。
4.3.2 主机界面
对一些组件的使用，如在好友显示列表中需要用到：JTree和JTabbedPane
右键好友时会弹出好多菜单需要用到：JMenuItem,JMenu和JPopupMenu在显示登录状态时需要用到：ComboBox但是系统默认的组件外观往往达不到我们的审美要求，所以我们要对它们的外观进行个性化设置，所以我们要对其进行重绘，以下是具体实现方法：重写BasicTreeUI 中的setLeftChildIndent和setRightChildIndent方法，以达到对齐父子节点，重写了DefaultTreeCellRenderer和DefaultMutableTreeNode来设置JTree带图片显示节点，并且给节点增加了一些我们需要的东西，重写ListCellRenderer&&
中的Component getListCellRendererComponent(JList list,Object obj,introw,boolean sel,boolean hasFocus)增加在ComboBox显示图片的效果。
头像灰色显示效果：还有一些图片处理效果的技术，如QQ头像去色处理（灰色头像），其中主要原理就是将头像图片中的像素数组取出来，利用一定的颜色变换公式对其颜色进行变换以达到灰显效果。主要实现代码见public classColorConvertOp中的 static public&ImageIcon getGrayPicture(String path)throws&IOException方法
张的总结：
& 通过这次聊天程序课程设计，又有了许多收获。最初，本来打算做大四学长的“我校淘”网站，但，后来通过与大四学长的交流、沟通，他说三周的时间太短了，因为我们之前没有接触过Java Web方面的知识，所以时间不够，因此，先学习这方面的的知识。
&& 聊天软件，是我之前一直想完成的一个小软件，但没有机会去做，这次有机会做，我决定把它做好，做的像QQ一样。刚开始，对于网络通信、数据库连接及操作这部分，我们之前没练习过，因此，对于整体的设计都很难把握，我们参考了部分书籍，大概了解了其原理，之后就是确定需求，虽然我们对QQ都很熟悉，也都基本了解其大概需求，但在实际设计时，很多需求方面东西都是看不见的，必须自己查资料、思考、练习才能发掘。然后就是总体设计及人员分工，这一步也很关键，如何协调每个人，如何发挥每个人的优势，这需要很多工作。
& 在整体设计完成后，我们考虑先开发出简单的聊天软件，然后逐步细化，因此，在详细设计时，我们简化了一些东西，先开发出一个基本原型，用以验证技术并进一步明确需求。然后，对部分技术进行改进和细化，最后，再次基础上不断的迭代进行，由于我们的水平有限，我们最初的设计并不一定是好的设计，只有不断的试验和改进，才能开发出好的软件，当然，前期的整体架构设计非常重要，这将很大程度上决定软件的质量和适应需求变更的能力。总之，在试验与改进中，我们学到了很多东西，不光是技术，还有合作。
房X的总结：
这是第二次小组一起完成一个小项目，总体感觉相对个人完成比较轻松，而且完成的项目，比个人的更好，相互之间可以互相学习，可以看到别人的代码风格，和对同一问题的不同解决方法，每个人的设计思想，可充分展示每个人的优势，并通过相互学习，补充自己的知识不足之处，更快更好的学习知识。
高X的总结：
本次课程设计我做的是一部分界面设计，没啥核心技术，就是对一些组件使用的巩固，通过使用这些组件，加深了对一些常用组件的继承关系的理解，有些小问题还没有解决，但是以后会自己慢慢解决的。
总体而言，我们完成的聊天软件，较好的实现了预期的目标。
软件的优点：具有漂亮、友好的界面、功能较全，软件具有较好的架构设计，用户体验较好。软件的缺点：部分功能测试还不理想，有些功能还未实现。
1.石彦芳，李丹.《Oracle数据库应用与开发》.机械工业出版社，2013
2.耿祥义，张跃平.《Java面向对象程序设计》.清华大学出版社，2010
3.张海藩.《软件工程导论》(第5版).北京.清华大学出版社，2008
4.刘新.《Java开发技术大全》.北京.清华大学出版社，2009
5.明日科技 《Java经典编程300例》清华大学出版社 2012
6.梁建全& 《你必须知道的261个Java语言问题》& 人民邮电大学 2009
转载请标明出处：&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：592481次
积分：5255
积分：5255
排名：第3949名
原创：86篇
转载：23篇
评论：347条
(1)(3)(3)(10)(2)(11)(20)(1)(1)(9)(8)(27)(14)Java导出Highcharts生成的图表为图片源码 - 博客频道 - CSDN.NET
dengsilinming的专栏
分类：Highcharts
需要的jar包:
需要的js文件:(可以通过/download下载highcharts对应的js文件)
下面是一些主要部分
&?xml version=&1.0& encoding=&UTF-8&?&
&web-app version=&2.5&
xmlns=&/xml/ns/javaee&
xmlns:xsi=&http://www.w3.org/2001/XMLSchema-instance&
xsi:schemaLocation=&/xml/ns/javaee
/xml/ns/javaee/web-app_2_5.xsd&&
&description&This is the description of my J2EE component&/description&
&display-name&This is the display name of my J2EE component&/display-name&
&servlet-name&SaveAsImage&/servlet-name&
&servlet-class&com.foxconn.highcharts.demo.SaveAsImage&/servlet-class&
&/servlet&
&servlet-mapping&
&servlet-name&SaveAsImage&/servlet-name&
&url-pattern&/SaveAsImage&/url-pattern&
&/servlet-mapping&
&welcome-file-list&
&welcome-file&basic_line.jsp&/welcome-file&
&/welcome-file-list&
&/web-app&
servlet部分
package com.foxconn.highcharts.
import java.io.IOE
import java.io.OutputStreamW
import java.io.StringR
import javax.servlet.ServletE
import javax.servlet.ServletOutputS
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import org.apache.batik.transcoder.T
import org.apache.batik.transcoder.TranscoderE
import org.apache.batik.transcoder.TranscoderI
import org.apache.batik.transcoder.TranscoderO
import org.apache.batik.transcoder.image.JPEGT
import org.apache.batik.transcoder.image.PNGT
//import org.apache.fop.svg.PDFT
public class SaveAsImage extends HttpServlet {
private static final long serialVersionUID = 1L;
* Constructor of the object.
public SaveAsImage() {
* Destruction of the servlet. &br&
public void destroy() {
super.destroy(); // Just puts &destroy& string in log
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/*导成pdf做了很久，但还是没能做出来，因为一直报
* java.lang.NoSuchMethodError: org.apache.avalon.framework.configuration.DefaultConfiguration.&init&(Ljava/lang/S)V的错误，
* 如果你知道如何解决这个错误，请告诉我一下，在此先谢过了。现在已经可以正确地将图片导成pdf了，程序是没有问题的
request.setCharacterEncoding(&utf-8&);//设置编码，解决乱码问题
String type = request.getParameter(&type&);
String svg = request.getParameter(&svg&);
String filename = request.getParameter(&filename&);
filename = filename==null?&chart&:
ServletOutputStream out = response.getOutputStream();
if (null != type && null != svg) {
svg = svg.replaceAll(&:rect&, &rect&);
String ext = &&;
Transcoder t =
if (type.equals(&image/png&)) {
ext = &png&;
t = new PNGTranscoder();
} else if (type.equals(&image/jpeg&)) {
ext = &jpg&;
t = new JPEGTranscoder();
} else if (type.equals(&application/pdf&)) {
ext = &pdf&;
t =(Transcoder) new PDFTranscoder();//我将这儿的注释去掉了，因为导成pdf的问题已经解决
} else if(type.equals(&image/svg+xml&))
ext = &svg&;
response.addHeader(&Content-Disposition&, & filename=&+ filename + &.&+ext);
response.addHeader(&Content-Type&, type);
if (null != t) {
TranscoderInput input = new TranscoderInput(new StringReader(svg));
TranscoderOutput output = new TranscoderOutput(out);
t.transcode(input, output);
} catch (TranscoderException e) {
out.print(&Problem transcoding stream. See the web logs for more details.&);
e.printStackTrace();
} else if (ext.equals(&svg&)) {
// out.print(svg);
OutputStreamWriter writer = new OutputStreamWriter(out, &UTF-8&);
writer.append(svg);
writer.close();
out.print(&Invalid type: & + type);
response.addHeader(&Content-Type&, &text/html&);
out.println(&Usage:\n\tParameter [svg]: The DOM Element to be converted.& +
&\n\tParameter [type]: The destination MIME type for the elment to be transcoded.&);
out.flush();
out.close();
* Initialization of the servlet. &br&
* @throws ServletException if an error occurs
public void init() throws ServletException {
// Put your code here
&%@ page language=&java& contentType=&text/ charset=UTF-8&
pageEncoding=&UTF-8&%&
&!DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&title&Basic Line&/title&
&script src=&js/jquery.min.js& type=&text/javascript&&&/script&
&script src=&piled.js& type=&text/javascript&&&/script&
&script src=&js/highcharts.js& type=&text/javascript&&&/script&
&script src=&js/highcharts.src.js& type=&text/javascript&&&/script&
&script type=&text/javascript& src=&js/exporting.js&&&/script&
&script type=&text/javascript&&
$(document).ready(function(){
chart = new Highcharts.Chart({
renderTo: 'container',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 25
text: 'Monthly Average Temperature',
subtitle: {
text: '测试中文乱码',
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
text: 'Temperature (?°C)'
plotLines: [{
color: '#808080'
exporting:{
filename:'chart',
url:'http://localhost:8080/HighChartsDemo/SaveAsImage'//这里是一个重点哦,也可以修改exporting.js中对应的url
tooltip: {
formatter: function(){
return '&b&' + this.series.name + '&/b&&br/&' +
this.x + ': ' + this.y + '?°C';
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
&div id=&container& style=&width: 100%; height: 400px&&&/div&
注意：请下载源码的同学，将源码中的
/* else if (type.equals(&application/pdf&)) {
ext = &pdf&;
t =(Transcoder) new PDFTranscoder();
上面的注释去掉，程序是可以成功导出pdf的。
dengsilinming
排名：第5698名
（18）（2）（8）（6）（1）（3）（19）（5）（3）（7）（5）（2）（4）（4）（1）