web项目使用Amchar制度图标

Amchar有flash版本 也有js版本，本次列子提供js版本

1,引入2个js文件 amcharts.js，serial.js

2,页面需要显示图标的地方添加一个显示层

 <div id="chartdiv" style="width: 100%; height: 400px;"></div>

3,

<script type="text/javascript">
            var chart;
            var json  = ${outData};
        //    alert(json);
   var chartData = []; 
                for(var i = 0;i<json.length;i++){ 
                    var data = { 
                                    "statCreateTime":json[i].statCreateTime, 
                                    "reqCount":json[i].reqCount, 
                                    "showCount":json[i].showCount,
                                      "clickCount":json[i].clickCount
                               }; 
                    chartData.push(data); 
                } 

            var average = 90.4;

            AmCharts.ready(function () {

                 chart = new AmCharts.AmSerialChart(); 
                chart.dataProvider = chartData; 
                chart.categoryField = "statCreateTime"; 
                chart.startDuration = 0.5; 
                chart.fontSize = 13; 
                chart.fontFamily = "微软雅黑"; 
                chart.balloon.color = "#000000"; 
                
                var categoryAxis = chart.categoryAxis; 
                categoryAxis.dashLength = 1; 
                categoryAxis.gridAlpha = 0.15; 
                categoryAxis.labelRotation = 40; 
                categoryAxis.axisColor = "#DADADA"; 
 
                var valueAxis = new AmCharts.ValueAxis(); 
                valueAxis.axisColor = "#DADADA"; 
                valueAxis.dashLength = 1; 
                valueAxis.logarithmic = false;  
                chart.addValueAxis(valueAxis); 
 
                var graph = new AmCharts.AmGraph(); 
                graph.title = "请求数"; 
                graph.valueField = "reqCount"; 
                graph.type = "smoothedLine"; 
                graph.bullet = "bubble"; 
                graph.bulletColor = "#FFFFFF"; 
                graph.bulletBorderColor = "#00BBCC"; 
                graph.bulletBorderThickness = 1; 
                graph.bulletSize = 8; 
                graph.balloonText = "请求数:[[reqCount]]"; 
                graph.lineThickness = 2; 
                graph.lineColor = "#00BBCC"; 
                chart.addGraph(graph); 
 
                var graph = new AmCharts.AmGraph(); 
                graph.title = "展示数"; 
                graph.type = "smoothedLine"; 
                graph.bullet = "bubble"; 
                graph.bulletColor = "#FFFFFF"; 
                graph.bulletBorderColor = "#00BBCC"; 
                graph.bulletBorderThickness = 1; 
                graph.bulletSize = 8; 
                graph.balloonText = "展示展示数:[[showCount]]"; 
                graph.valueField = "showCount"; 
                graph.lineThickness = 2; 
                graph.lineColor = "#F45B00"; 
                chart.addGraph(graph); 
               
                      var graph = new AmCharts.AmGraph(); 
                graph.title = "点击数"; 
                graph.type = "smoothedLine"; 
                graph.bullet = "bubble"; 
                graph.bulletColor = "#FFFFFF"; 
                graph.bulletBorderColor = "#00BBCC"; 
                graph.bulletBorderThickness = 1; 
                graph.bulletSize = 8; 
                graph.balloonText = "点击数:[[clickCount]]"; 
                graph.valueField = "clickCount"; 
                graph.lineThickness = 2; 
                graph.lineColor = "#14a000"; 
                chart.addGraph(graph); 

 
                var chartCursor = new AmCharts.ChartCursor(); 
                chartCursor.cursorPosition = "middle"; 
                chartCursor.cursorColor = "#D40600"; 
                chartCursor.bulletSize = 8; 
                chart.addChartCursor(chartCursor); 
 
                var legend = new AmCharts.AmLegend(); 
                legend.markerType = "circle"; 
                chart.addLegend(legend); 

                // WRITE
                chart.write("chartdiv");
            });
        </script>

 

完工，效果如图：