javaWeb 饼状图从后台拿数据
今天在写购物商城系统时，前端显示饼状图时，不知道怎么去后台设置值，前台怎么获取值，经过一上午的查资料，与朋友讨论，终于解决了这个问题。
首先，使用饼状图，肯定要使用插件echarts，首先到官网上下载插件
http://echarts.baidu.com/download.html
然后在HTML中导入插件
找一个自己中意的饼图实例点进去查看它的源码
http://echarts.baidu.com/examples/#chart-type-pie
从官网上我找了一个实例源码
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
我们要使用的就是它提供的这个源码
在HTML中，首先在body中给出一个div
在script 中
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
然后使用ajax发请求获取数据
// 异步加载数据
//chart:xml中配置servlet的参数
$.post('chart?action=getColumnChart').done(function (data) {
var data = eval('('+data+')').aaa;//aaa:后端设置的值
var names = {};
var total = {};
for(var i = 0;ixml中配置
chart
com.wb.controller.ChartController
chart
/chart
后端servlet中
package com.wb.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.wb.model.ChartList;
import com.wb.service.ChartService;
import com.wb.service.impl.ChartServiceImpl;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class ChartController extends HttpServlet{
private static final long serialVersionUID = 1L;
private ChartService chartService=null;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
super.doPost(request, response);
System.out.println("sssssss");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//解决传到前端的数据乱码问题
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
String action=request.getParameter("action");
//System.out.println("发请求了");
if(action!=null&&"getColumnChart".equals(action)) {
//System.out.println("发请求了");
getColumnChart(request, response);
}else{
}
}
private void getColumnChart(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
JSONObject jObject = new JSONObject();
List chartList = new ArrayList();
//查询数据库返回的结果集
chartList = chartService.getAdOrderList();
jObject.put("aaa", chartList); //设置key为aaa
PrintWriter pw=response.getWriter();
pw.print(jObject);
pw.flush();
pw.close();
}
@Override
public void init() throws ServletException {
super.init();
chartService=new ChartServiceImpl();
}
}
封装model类ChartList
package com.wb.model;
public class ChartList {
private String name;//名称
private int value;//查询的商品个数
public ChartList(String name, int value) {
super();
this.name = name;
this.value = value;
}
public ChartList() {
super();
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
}
@Override
public String toString() {
return "ChartList [name=" + name + ", value=" + value + "]";
}
}
Dao的实现类
package com.wb.dao.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import com.wb.dao.ChartDao;
import com.wb.model.ChartList;
import com.wb.util.JdbcUtil;
public class ChartDaoImpl implements ChartDao{
private Connection con=null;
private Statement sta=null;
private PreparedStatement pre=null;
private ResultSet rs=null;
private List cList=null;
private ChartList chartList = null;
//获取分类名和类别之下的成交总数
@Override
public List getAdOrderList() {
cList = new ArrayList();
con=JdbcUtil.getConnection();
String sql = "SELECT ps.`pname`,SUM(g.`t_number`) total FROM t_psort ps " +
"JOIN t_product p ON ps.pid = p.`sortid` " +
"JOIN goods_orders g ON p.`id` = g.`t_goodsId` " +
"WHERE g.`t_orderStatus` = 6 " +
"GROUP BY ps.`pid`";
try {
sta = con.createStatement();
rs = sta.executeQuery(sql);
while(rs.next()) {
chartList = new ChartList();
chartList.setName(rs.getString("pname"));
chartList.setValue(rs.getInt("total"));
cList.add(chartList);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
JdbcUtil.close(rs, sta, con);
}
return cList;
}
}
刚开始写的时候，是将private List cList=null;写成了
private List cList=new ArrayList();
导致的结果是显示的饼图没问题，但是刷新一遍在显示数据就会重复一遍，导致的原意是，当第一次加载的时候，cList中的值没有清空，导致下一次访问时就不在重新new了。所以，将cList初始化为null，在方法中实例化，每次访问方法前，cList的值都为null，返回的结果和第一次访问时都一样。