amcharts使用心得


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM