amChart实现图表制作

这篇博客介绍了如何利用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.对页面数据进行修改
这里写图片描述
这里写图片描述

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

xml <!-- [xml] (xml / csv) 数据类型xml/csv--> ; <!-- 如果使用csv作为数据的话,需要使用这个属性;表示文件数据分隔符,(平常以";"和","为主) [;] (string) csv file data separator (you need it only if you are using csv file for your data) --> 1 <!-- 如果使用的是csv数据,可以设置跳过几行再显示数据,默认为0表示csv中的数据全部显示,大于n(n>0);表示前面n行都不显示[0] (Number) if you are using csv data type, you can set the number of rows which should be skipped here --> <!-- 设置系统中的字体[Arial] (font name) use device fonts, such as Arial, Times New Roman, Tahoma, Verdana... --> <!-- 设置所有文本的大小,默认为11,具体的文本的字体大小也可以在下面的设置中设置[11] (Number) text size of all texts. Every text size can be set individually in the settings below --> <!-- 同上[#000000] (hex color code) main text color. Every text color can be set individually in the settings below--> . <!-- 小数分隔符,默认为[,]注:该属性只是用来显示,而在csv数据文件中,必须使用[.] (string) decimal separator. Note, that this is for displaying data only. Decimals in data xml file must be separated with a dot --> <!-- 千位分隔符,默认为空[ ] (string) thousand separator. use "none" if you don't want to separate --> 3 <!-- 如果百分数格式的数字,后面的小数位小于该属性的值,则在小数后面加0补充。如54.2%,该属性设置为3,那么显示的效果为54.200%。[] (Number) if your value has less digits after decimal then is set here, zeroes will be added --> <!--设置科学记数法的最小值 [0.000001] If absolute value of your number is equal or less then scientific_min, this number will be form
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值