amChart实现图表制作

最新推荐文章于 2019-02-19 15:00:00 发布

原创最新推荐文章于 2019-02-19 15:00:00 发布 · 454 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java

java 专栏收录该内容

34 篇文章

订阅专栏

这篇博客介绍了如何利用amChart制作商品售卖数据的柱状图。首先，下载amChart文件并将其引入到webapp项目中。接着，参照amChart的样例，如column3D.html，选择合适的图表样式。然后，在新建的jsp页面中复制样式数据，并在后台编写方法处理数据。最后，通过调整页面数据，完成图表的制作。成功展示后，点击按钮可以跳转到显示柱状图的效果页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

amChart文件下载：https://download.youkuaiyun.com/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.对页面数据进行修改
这里写图片描述