amChart实现图表制作

amChart文件下载：https://download.csdn.net/download/ly_linyuan/10373099
我这里以商品售卖数据制作一个柱状图

1.将文件引入webapp中
这里写图片描述

2.在anChart的文件中查看图表的样式，选择一个自己想要的样式，我这里以column3D.html为示例
这里写图片描述

3.在工程中新建一个jsp页面，将column3D中的数据复制到jsp页面中
这里写图片描述

4.在后台编写方法代码：

    /**
 * 使用chart图标显示商品售卖情况
 * @throws UnsupportedEncodingException 
 */
@RequestMapping("/dataAnalyst/{goodName}")
public String dataAnalyst(@PathVariable String goodName,Model model) throws UnsupportedEncodingException{
    goodName = new String(goodName.getBytes("ISO-8859-1"),"UTF-8");  
    //得到要统计的结果数据
    List<Good> goodlist = goodService.getByGoodName(goodName);
    //注意这里的list取值方式为一个一个的取值，list.get(0)：名称   list.get(1)售卖数量
    List<String> list = new ArrayList<>();
    for(Good good : goodlist){
        list.add(good.getName());
        list.add(good.getSalenum().toString());
    }
    //2.组织符合要求的json数据
    StringBuilder sb = new StringBuilder();
    sb.append("[");
    /**
     *      {
                "country": "USA",
                "visits": 4025,
                "color": "#FF0F00"
            }
     */
    String colors[]={"#FF0F00","#FF6600","#FF9E01","#FCD202","#F8FF01","#B0DE09","#04D215","#0D52D1"};
    int j=0;
    for(int i=0;i<list.size();i++){
        sb.append("{").append("\"name\":\"").append(list.get(i)).append("\",")
                      .append("\"salenum\":\"").append(list.get((++i))).append("\",")
                      .append("\"color\":\"").append(colors[j++]).append("\"")
        .append("}").append(",");
        if(j>=colors.length){
            j=0;
        }
    }
    sb.delete(sb.length()-1, sb.length());

    sb.append("]");

    model.addAttribute("result", sb.toString());
    return "good/colunm";
}

5.对页面数据进行修改
这里写图片描述

点击制作图表后，跳转至column页面效果展示，成功：
这里写图片描述

amChart实现图表制作

猜你喜欢