标签：art eth percent write 修改 struts delete The sample
1. 导入ancharts依赖
2.导入amcharts的js和css文件
2.1 导入amchart目录下的amcharts和images
2.2 导入amchart\samples目录下的style.css
3. 根据业务需求从amchart\samples目录下挑选适合的范例(转成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！
标签：art eth percent write 修改 struts delete The sample
原文地址：https://www.cnblogs.com/lin-nest/p/9335070.html
