Java开发图形报表——amcharts图形报表组件的使用_java后端优秀的绘图chart框架-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42340305/article/details/97154154

amcharts图形组件的使用

在实际项目中需要柱状图，折线图等。早期使用Excel实现图形报表，但是开发比较复杂。目前有很多图形报表框架可用，下面介绍amcharts的使用：

1.下载

在官网下载得到以下文件
在这里插入图片描述

2.文件目录结构

解压看到以下目录结构
在这里插入图片描述
在samples文件夹里面有很多的html文件每个html是一个图表，可通过浏览器预览。选择自己需要的使用，这里我选择pieSimple.html，这是一个饼图。

3.项目中如何使用

1).将pieSimple.html文件直接复制进项目里，要使用还得修改一些地方。下面引入的这些js文件需要将路径修改为正确的文件路径。

 		<script src="../../amcharts/amcharts.js" type="text/javascript"></script>
        <script src="../../amcharts/pie.js" type="text/javascript"></script>
        <script src="../../jquery-1.2.6.js" type="text/javascript"></script>

2).下面是源码，可以看到charData是一个json格式的数据。AmCharts.ready(function () {}）；，就是在画图。

        <script>
            var chart;
            var legend;

             var chartData = [{
                country: "Czech Republic",
                litres: 301.90
            }, {
                country: "Ireland",
                litres: 201.10
            }, {
                country: "Germany",
                litres: 165.80
            }, {
                country: "Australia",
                litres: 139.90
            }, {
                country: "Austria",
                litres: 128.30
            }, {
                country: "UK",
                litres: 99.00
            }, {
                country: "Belgium",
                litres: 60.00
            }]; 

            AmCharts.ready(function () {
            			
            			// PIE CHART
                        chart = new AmCharts.AmPieChart();
                        chart.dataProvider = chartData;
                        chart.titleField = "country";
                		chart.valueField = "litres";
                        chart.outlineColor = "#FFFFFF";
                        chart.outlineAlpha = 0.8;
                        chart.outlineThickness = 2;

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

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

可以通过ajax请求服务器，在数据库取出需要的值封装成json字符串返回给浏览器页面。将传回的值value赋给chart.dataProvider ，chart.titleField和chart.valueField分别代表横纵坐标轴的名字。里面其他内容可具体去试试作用。

AmCharts.ready(function () {
            	
            	//发ajax
            	$.ajax({
            		url:'statCharAction_getFactorysaleData',
            		dataType:'json',
            		type:'get',
            		success:function(value){
            			
            			// PIE CHART
                        chart = new AmCharts.AmPieChart();
                        chart.dataProvider = value;
                        chart.titleField = "factoryName";
                        chart.valueField = "amount";
                        chart.outlineColor = "#FFFFFF";
                        chart.outlineAlpha = 0.8;
                        chart.outlineThickness = 2;

                        // WRITE
                        chart.write("chartdiv");
            		}