• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

am怎么加插件_CSS学习

当前位置：网站建设 > 技术支持

am怎么加插件？

AmCharts插件加载如下：

1. 导入amcharts依赖

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");

});

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。