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
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.
3. Create a new jsp page in the project and copy the data in column3D to the jsp page
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
After clicking to make a chart, jump to the column page effect display, successful: