AmCharts插件使用

Posted 2020-12-05 lin-nest

 

1. 导入ancharts依赖

　　

2.导入amcharts的js和css文件

　　2.1 导入amchart目录下的amcharts和images

　　

　　2.2 导入amchartsamples目录下的style.css

　　　　

 

3. 根据业务需求从amchartsamples目录下挑选适合的范例(转成jsp页面)

　　

　　注:修改页面引用的css和js文件的路径　

　　　　　<link rel="stylesheet" href="${pageContext.request.contextPath }/components/amchartNew/style.css" type="text/css">
        <script src="${pageContext.request.contextPath }/components/amchartNew/amcharts/amcharts.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath }/components/amchartNew/amcharts/serial.js" type="text/javascript"></script>

4. 由于我的项目使用struts2框架,通过压栈的方式来传递json数据

　　在action中拼接json数据并压栈

　　json数据格式

　　　　　　　　[
                {
                    "country": "USA",
                    "visits": 4025,
                    "color": "#FF0F00"
                },
                {
                    "country": "China",
                    "visits": 1882,
                    "color": "#FF6600"
                }
            ]

　　　4.1 拼接json数据

　　　　　//2.组织符合要求的json数据
        StringBuilder sb = new StringBuilder();
        sb.append("[");
        /**
         *      {
                    "country": "USA",
                    "visits": 4025,
                    "color": "#FF0F00"
                }
         */
        String colors[]={"#FF0F00","#FF6600","#FF9E01","#FCD202","#F8FF01","#B0DE09","#04D215","#0D52D1","#2A0CD0","#8A0CCF","#CD0D74","#754DEB"};
        int j=0;
        for(int i=0;i<list.size();i++){
            sb.append("{").append(""country":"").append(list.get(i)).append("",")
                          .append(""visits":"").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("]");

　　　4.2 压栈

//3.将json数据放入值栈中
super.put("result", sb.toString());

5. 根据业务修改AmCharts.ready(function () {...}

　　　　　　　　/* 值栈取值 */
　　　　　　　　var chartData =${result};　　　　　　　
　　　　　　　　AmCharts.ready(function () {
                // PIE CHART
                chart = new AmCharts.AmPieChart();/* 以哪种图展示数据 */
                chart.dataProvider = chartData;
                chart.titleField = "country";
                chart.valueField = "value";
                chart.outlineColor = "#FFFFFF";
                chart.outlineAlpha = 0.8;
                chart.outlineThickness = 2;
                chart.balloonText = "[[title]]<br><span style=‘font-size:14px‘><b>[[value]]</b> ([[percents]]%)</span>";
                // this makes the chart 3D
                chart.depth3D = 15;
                chart.angle = 30;

                // WRITE
                chart.write("chartdiv");
            });

 

今天做项目,忘了导入js和css,导致数据不展示折腾了好些时间 

 

END！