在使用amcharts做统计的时候,遇到一个问题,就是怎么把后台传过来的一个json格式的字符串怎么转换成json数组,因为amchatrs要求解析的数据格式是json格式的数组。
解决方案:在js中先将隐藏域中的值转换成Array数组,再赋给chart的dataProvider属性,具体过程如下:
1、action中需要一个变量存储json格式的字符串传到jsp页面。
private String countAllStr = "";
public String getCountAllStr() {
return countAllStr;
}
public void setCountAllStr(String countAllStr) {
this.countAllStr = countAllStr;
}
2、jsp页面处理:
<input id="countAllStr" type="hidden" value="<s:property value='countAllStr'/>"/>
<script type="text/javascript">
var dataForCountAll = new Array();
dataForCountAll = eval($("#countAllStr").val());
// SERIAL CHART
var chartForCountAll = new AmCharts.AmSerialChart();
chartForCountAll.dataProvider = dataForCountAll;
chartForCountAll.categoryField = "title";
chartForCountAll.marginRight = 0;
chartForCountAll.marginTop = 0;
chartForCountAll.autoMarginOffset = 0;
chartForCountAll.columnWith = 5;
// the following two lines makes chart 3D
chartForCountAll.depth3D = 20;
chartForCountAll.angle = 30;
//columnWidth
chartForCountAll.columnWidth = 0.2;
//columnSpacing
chartForCountAll.columnSpacing = 2;
//colors
//chartForCountAll.colors = ['#FF6600', '#FCD202', '#B0DE09', '#0D8ECF', '#2A0CD0', '#CD0D74', '#CC0000', '#00CC00', '#0000CC', '#DDDDDD', '#999999', '#333333', '#990000'];
// category
var categoryAxis = chartForCountAll.categoryAxis;
categoryAxis.labelRotation = 0;
categoryAxis.dashLength = 5;
categoryAxis.gridPosition = "start";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 5;
chartForCountAll.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = "value";
graph.balloonText = "[[title]]: [[value]]";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = ['#FF6600', '#FCD202'];
chartForCountAll.addGraph(graph);
// WRITE
chartForCountAll.write("countAllList");
</script>