AJAX动态加载chart（基于Bootstrap的chart.js）（原创）

@H_502_3@

一、@H_502_3@创建一个bean@H_502_3@，取名Info

Public class @H_502_3@Info {
 private @H_502_3@String name@H_502_3@;
 @H_502_3@private int @H_502_3@count@H_502_3@;

 @H_502_3@public @H_502_3@String getName() {
 return @H_502_3@name@H_502_3@;
 @H_502_3@}

 public void @H_502_3@setName(String name) {
 this@H_502_3@.name @H_502_3@= name;
 @H_502_3@}

 public int @H_502_3@getCount() {
 return @H_502_3@count@H_502_3@;
 @H_502_3@}

 public void @H_502_3@setCount(int @H_502_3@count) {
 this@H_502_3@.count @H_502_3@= count;
 @H_502_3@}

 public @H_502_3@Info(String name,@H_502_3@int @H_502_3@count) {
 this@H_502_3@.name @H_502_3@= name;
 @H_502_3@this@H_502_3@.count @H_502_3@= count;
 @H_502_3@}

 public @H_502_3@Info() {
 }
}

二、@H_502_3@创建一个dao@H_502_3@，取名InfoDao

public class InfoDao extends BaseDao{@H_502_3@
 /**  * @H_502_3@获取材料信息统计@H_502_3@  * @return  */  @H_502_3@public @H_502_3@ArrayList<Info> getInfoForMaterial(){
 ArrayList<Info> infos = new @H_502_3@ArrayList<Info>();
 @H_502_3@Connection con = null@H_502_3@;
 @H_502_3@PreparedStatement psmt = null@H_502_3@;
 @H_502_3@ResultSet rs = null@H_502_3@;

 @H_502_3@try@H_502_3@{
 con = super@H_502_3@.getConnection();
 @H_502_3@psmt =con.prepareStatement("SELECT cm.materialName,@H_502_3@COUNT@H_502_3@(1) FROM cupmaterials AS cm INNER JOIN cups AS cu ON cm.materialId = cu.cupmaterialid GROUP BY cu.cupmaterialid"@H_502_3@);
 @H_502_3@rs = psmt.executeQuery();
 @H_502_3@while@H_502_3@(rs.next()){
 String name = rs.getString(1@H_502_3@);
 @H_502_3@int @H_502_3@count = rs.getInt(2@H_502_3@);
 @H_502_3@Info info = new @H_502_3@Info(name,@H_502_3@count);
 @H_502_3@infos.add(info);
 @H_502_3@}
 }catch @H_502_3@(Exception ex){
 System.out@H_502_3@.print("@H_502_3@加载材质统计信息失败，原因是：@H_502_3@"@H_502_3@+ex.getMessage());
 @H_502_3@}finally @H_502_3@{
 super@H_502_3@.closeAll(rs,@H_502_3@psmt,@H_502_3@con);
 @H_502_3@}
 return @H_502_3@infos;
 @H_502_3@}

三、@H_502_3@在jsp@H_502_3@页面：<canvasid="myChart-material" width="200" height="200"></canvas>

四、@H_502_3@Servlet@H_502_3@：@H_502_3@

request.setCharacterEncoding("utf-8");

ArrayList<Info> infos=newInfoDao().getInfoForCharacter();

String result=newJSONArray(infos).toString();

response.setContentType("text/plain;charset=utf-8");

response.setCharacterEncoding("utf-8");

PrintWriter out = response.getWriter();

out.print(result);

五、@H_502_3@js@H_502_3@部分：@H_502_3@

//@H_502_3@产生随机色@H_502_3@************************************************************************* @H_502_3@function @H_502_3@randomColor(){
 //@H_502_3@颜色字符串@H_502_3@  @H_502_3@var @H_502_3@colorStr@H_502_3@=""@H_502_3@;
 @H_502_3@//@H_502_3@字符串的每一字符的范围@H_502_3@  @H_502_3@var @H_502_3@randomArr@H_502_3@=['0'@H_502_3@,@H_502_3@'1'@H_502_3@,@H_502_3@'2'@H_502_3@,@H_502_3@'3'@H_502_3@,@H_502_3@'4'@H_502_3@,@H_502_3@'5'@H_502_3@,@H_502_3@'6'@H_502_3@,@H_502_3@'7'@H_502_3@,@H_502_3@'8'@H_502_3@,@H_502_3@'9'@H_502_3@,@H_502_3@'a'@H_502_3@,@H_502_3@'b'@H_502_3@,@H_502_3@'c'@H_502_3@,@H_502_3@'d'@H_502_3@,@H_502_3@'e'@H_502_3@,@H_502_3@'f'@H_502_3@];
 @H_502_3@//@H_502_3@产生一个六位的字符串@H_502_3@  @H_502_3@for@H_502_3@(var @H_502_3@i@H_502_3@=0@H_502_3@;@H_502_3@i@H_502_3@<6@H_502_3@;@H_502_3@i@H_502_3@++){
 //15@H_502_3@是范围上限，@H_502_3@0@H_502_3@是范围下限，两个函数保证产生出来的随机数是整数@H_502_3@  @H_502_3@colorStr@H_502_3@+=randomArr@H_502_3@[Math@H_502_3@.ceil(Math@H_502_3@.random()*(15@H_502_3@-0@H_502_3@)+0@H_502_3@)];
 @H_502_3@}
 return @H_502_3@colorStr@H_502_3@;
@H_502_3@}

//@H_502_3@页面加载时调用函数@H_502_3@************************************************** @H_502_3@$(function@H_502_3@(){
 materialInfo()；@H_502_3@
@H_502_3@});@H_502_3@

function @H_502_3@materialInfo(){
 $.get@H_502_3@(
 'getInfoForMaterial.do'@H_502_3@,@H_502_3@function@H_502_3@(result){
 var @H_502_3@arr@H_502_3@=[];
 @H_502_3@for@H_502_3@(var @H_502_3@i @H_502_3@= 0@H_502_3@;@H_502_3@i@H_502_3@<result.length@H_502_3@;@H_502_3@i@H_502_3@++){
 var @H_502_3@json @H_502_3@= {};
 @H_502_3@json@H_502_3@.value @H_502_3@= result[i@H_502_3@].count@H_502_3@;
 @H_502_3@json@H_502_3@.color @H_502_3@= "#"@H_502_3@+randomColor();
 @H_502_3@json@H_502_3@.highlight @H_502_3@="#"@H_502_3@+randomColor();
 @H_502_3@json@H_502_3@.label@H_502_3@=result[i@H_502_3@].name@H_502_3@;
 @H_502_3@arr@H_502_3@.push@H_502_3@(json@H_502_3@);
 @H_502_3@}
 var @H_502_3@pieData @H_502_3@= arr@H_502_3@;

 @H_502_3@var @H_502_3@ctx @H_502_3@= document@H_502_3@.getElementById@H_502_3@("myChart-material"@H_502_3@).getContext@H_502_3@("2d"@H_502_3@);
 @H_502_3@window@H_502_3@.myPie @H_502_3@= new @H_502_3@Chart(ctx@H_502_3@).Pie(pieData@H_502_3@,@H_502_3@{
 //responsive : true  @H_502_3@});
 @H_502_3@myPie@H_502_3@.defaults @H_502_3@= {
 segmentShowStroke @H_502_3@: true@H_502_3@,@H_502_3@segmentStrokeColor @H_502_3@: "#fff"@H_502_3@,@H_502_3@segmentStrokeWidth @H_502_3@: 2@H_502_3@,@H_502_3@animation @H_502_3@: true@H_502_3@,@H_502_3@animationSteps @H_502_3@: 100@H_502_3@,@H_502_3@animationEasing @H_502_3@: "eaSEOutBounce"@H_502_3@,@H_502_3@animateRotate @H_502_3@: true@H_502_3@,@H_502_3@animateScale @H_502_3@: false@H_502_3@,@H_502_3@onAnimationComplete @H_502_3@: null  @H_502_3@};
 @H_502_3@},@H_502_3@'json'  @H_502_3@);
@H_502_3@}

-------------------张成

AJAX动态加载chart（基于Bootstrap的chart.js）（原创）

猜你在找的Ajax相关文章