在使用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>
