amChart realizes chart making

amChart file download: https://download.csdn.net/download/ly_linyuan/10373099
Here I make a histogram with commodity sales data

1. Import the file into the webapp
write picture description here

2. View the style of the chart in the anChart file, and choose a style you want. I use column3D.html as an example here.
write picture description here

3. Create a new jsp page in the project and copy the data in column3D to the jsp page
write picture description here

4. Write the method code in the background:

    /**
 * 使用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. Modify the page data
write picture description here
write picture description here

After clicking to make a chart, jump to the column page effect display, successful:
write picture description here

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324855346&siteId=291194637