AmCharts使用

修正一下本文

1. 下载amcharts

　官网下载地址: https://www.amcharts.com/download/download-v3/

2. 文件结构

3. 将amcharts文件导入项目

4. 从samples文件夹中选择适合的范例(由于项目是使用jsp,所以将html修改成jsp)

　1. 修改文件后缀

　2. 添加<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

　完成以上两步,就将html修改成jsp了

　3. jsp引入js和css

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>amCharts examples</title>
    <link rel="stylesheet" href="${ctx}/components/amchart/style.css" type="text/css">
    <script src="${ctx}/components/amchart/amcharts/amcharts.js" type="text/javascript"></script>
    <script src="${ctx}/components/amchart/amcharts/serial.js" type="text/javascript"></script>

    <script>
        var chart;

        var chartData = ${result}; // 后台拼接json数据
        // 数据格式(json数据):
        /*var chartData = [
            {
                "country": "USA",
                "visits": 4025,
                "color": "#FF0F00"
            },
            {
                "country": "China",
                "visits": 1882,
                "color": "#FF6600"
            }
        ];*/


        AmCharts.ready(function () {
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();/* 展示的图标类型 */
            chart.dataProvider = chartData;
            chart.categoryField = "factory"; // 对应json中的key country(可以自定义key)
            // the following two lines makes chart 3D
            chart.depth3D = 20;
            chart.angle = 30;

            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.labelRotation = 90;
            categoryAxis.dashLength = 5;
            categoryAxis.gridPosition = "start";

            // value
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.title = "Visitors";
            valueAxis.dashLength = 5;
            chart.addValueAxis(valueAxis);

            // GRAPH
            var graph = new AmCharts.AmGraph();
            graph.valueField = "amount"; // 对应json中的key visits(可以自定义key)
            graph.colorField = "color";
            graph.balloonText = "<span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>";
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 1;
            chart.addGraph(graph);

            // CURSOR
            var chartCursor = new AmCharts.ChartCursor();
            chartCursor.cursorAlpha = 0;
            chartCursor.zoomable = false;
            chartCursor.categoryBalloonEnabled = false;
            chart.addChartCursor(chartCursor);

            chart.creditsPosition = "top-right";


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

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

</html>

5. 后台拼接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("]");
        //3.将json数据放入值栈中
        super.put("result", sb.toString());

 

今天做项目,忘了导入js和css,导致数据不展示折腾了好些时间 

 

END！

posted @ 2018-07-19 12:13  指北的司南  阅读(2627)  评论(0)  编辑  收藏  举报