amchart使用总结
具体属性参考：http://wenku.baidu.com/link?url=7EcOqGOGUxM22mo_nPYO5DhQA7NjephU5en6vi8RLyD-uBJ6tnWxLvtV0AJqyfUSEmkcuDr44BCvePzU269I1IbRn7Rhp2_4pT-BOGVaJnq
实例介绍：
amcharts.js编写：
var ChartsAmcharts = function() {
var initChartTrackState = function(data) {//月 客户各跟踪状态
var chart = AmCharts.makeChart("chart_track_state", {
"theme": "light",
"type": "serial",
"startDuration": 2,
"fontFamily": 'Open Sans',
"color": '#888',
"dataProvider":data,
//Y轴属性设置
"valueAxes": [{
"axisAlpha": 1,//设置Y轴的透明度
"gridAlpha": 0,//网格的透明度
"axisColor":"#FF6600",//轴的颜色
"minimum":0,//Y轴最小值
"integersOnly":true,//是否只显示整数
"position": "left",//Y轴显示的位置
"title": "客户数量(个)"
}],
//图形设置
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"colorField": "color",//图形颜色
"fillAlphas": 0.75,
"lineAlpha": 0.1,
"type": "column",//类型：线状，柱状，饼状
"topRadius": 1,
"valueField": "counts" //绑定数值，与data中的属性名一致
}],
"columnWidth":0.5,//设置每个柱状图的宽度
"depth3D": 30,//设置3D效果
"angle": 20,
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "name",//X轴数值绑定，与data中的属性名一致
//X轴的设置
"categoryAxis": {
"title":"跟踪状态",
"gridPosition": "start",
"axisAlpha": 1,
"gridAlpha": 0
},
"exportConfig": {
"menuTop": "1px",
"menuRight": "1px",
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
}, 0);
//chart_track_state前端页面需要显示的div的id
$('#chart_track_state').closest('.portlet').find('.fullscreen').click(function() {
chart.invalidateSize();
});
}
var initChartCloseCustomer = function(data) {//月关单客户
var chart = AmCharts.makeChart("chart_close", {
"theme": "light",
"type": "serial",
"startDuration": 2,
"fontFamily": 'Open Sans',
"color": '#888',
"dataProvider":data,
"valueAxes": [{
"axisAlpha": 1,
"gridAlpha": 0,
"minimum":0,//Y轴最小值
"integersOnly":true,//是否只显示整数
"position": "left",
"title": "客户数量(个)"
}],
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"colorField": "color",
"fillAlphas": 0.75,
"lineAlpha": 0.1,
"type": "column",
"topRadius": 1,
"valueField": "nums"
}],
"columnWidth":0.5,
"depth3D": 30,
"angle": 20,
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": true
},
"categoryField": "yearmonth",
"categoryAxis": {
"title":"年月",
"gridPosition": "start",
"axisAlpha": 1,
"gridAlpha": 0
},
"exportConfig": {
"menuTop": "8px",
"menuRight": "8px",
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
}, 0);
$('#chart_close').closest('.portlet').find('.fullscreen').click(function() {
chart.invalidateSize();
});
}
return {
//main function to initiate the module
initChartTrackState: function(date) {
initChartTrackState(date);
},
initCloseCustomer: function(date) {
initChartCloseCustomer(date);
}
};
}();
//前端页面
Version:0.9StartHTML:-1EndHTML:-1StartFragment:0000000111EndFragment:0000039290
<#--<div class="page-sidebar md-shadow-z-2-i navbar-collapse collapse">-->
<!-- BEGIN SIDEBAR MENU -->
<!-- DOC: Apply "page-sidebar-menu-light" class right after "page-sidebar-menu" to enable light sidebar menu style(without borders) -->
<!-- DOC: Apply "page-sidebar-menu-hover-submenu" class right after "page-sidebar-menu" to enable hoverable(hover vs accordion) sub menu mode -->
<!-- DOC: Apply "page-sidebar-menu-closed" class right after "page-sidebar-menu" to collapse("page-sidebar-closed" class must be applied to the body element) the sidebar sub menu mode -->
<!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing -->
<!-- DOC: Set data-keep-expand="true" to keep the submenues expanded -->
<!-- DOC: Set data-auto-speed="200" to adjust the sub menu slide up/down speed -->
<!-- BEGIN PAGE CONTENT-->
<div class="row">
<!-- expect customer begin-->
<div class="col-md-6 col-sm-6">
<div class="portlet light">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-green-haze"></i>
<span class="caption-subject bold uppercase font-green-haze"> 预订签约客户统计</span>
</div>
</div>
<div class="portlet-body">
<div id="chart_expect" class="chart" style="height: 400px;">
</div>
</div>
</div>
</div>
<!-- end expect customer-->
<!-- begin close customer-->
<div class="col-md-6 col-sm-6">
<!-- BEGIN CHART PORTLET-->
<div class="portlet light">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-green-haze"></i>
<span class="caption-subject bold uppercase font-green-haze"> 关单客户统计</span>
</div>
</div>
<div class="portlet-body">
<div id="chart_close" class="chart" style="height: 400px;">
</div>
</div>
</div>
<!-- END CHART PORTLET-->
</div>
<!-- end close customer-->
</div>
<div class="row">
<!-- begin trackState -->
<div class="col-md-12">
<!-- BEGIN CHART PORTLET-->
<div class="portlet light">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-green-haze"></i>
<span class="caption-subject bold uppercase font-green-haze"> 客户各跟踪状态统计</span>
</div>
<div class="actions">
<a href="javascript:getMonthData();" class="btn btn-circle red-sunglo btn-sm">
<i class="fa fa-plus"></i> 月报 </a>
<a href="javascript:getWeekData();" class="btn btn-circle red-sunglo btn-sm">
<i class="fa fa-plus"></i> 周报 </a>
</div>
</div>
<div class="portlet-body">
<div id="chart_track_state" class="chart" style="height: 400px;">
</div>
</div>
</div>
<!-- END CHART PORTLET-->
</div>
</div>
<!-- END PAGE CONTENT-->
<#--</div>-->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<script src="${CONTEXT_PATH}/static/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="${CONTEXT_PATH}/static/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amcharts/amcharts.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amcharts/serial.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amcharts/pie.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amcharts/radar.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amcharts/themes/light.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amcharts/themes/patterns.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amcharts/themes/chalk.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/ammap/ammap.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/ammap/maps/js/worldLow.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amstockcharts/amstock.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="${CONTEXT_PATH}/static/assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/admin/layout4/scripts/layout.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/admin/layout4/scripts/demo.js" type="text/javascript"></script>
<script src="${CONTEXT_PATH}/static/assets/admin/pages/scripts/charts-amcharts.js"></script>
<script src="${CONTEXT_PATH}/static/js/ajax.js"></script>
<script src="${CONTEXT_PATH}/static/assets/global/plugins/bootstrap-growl/jquery.bootstrap-growl.min.js"></script>
<script>
jQuery(document).ready(function() { // initiate layout and plugins
Metronic.init(); // init metronic core components
Layout.init(); // init current layout
Demo.init(); // init demo features
getData("${CONTEXT_PATH}/report/countExpectSignCustomer" , function(data) {ChartsAmcharts.initExpectSignCustomer(data);
});
getData("${CONTEXT_PATH}/report/countCloseCustomerByMonth" , function(data) {ChartsAmcharts.initCloseCustomer(data);
});
getData("${CONTEXT_PATH}/report/countTractStateByMonth" , function(data) {ChartsAmcharts.initChartTrackState(data);
});
});
function getWeekData(){getData("${CONTEXT_PATH}/report/countWeekReportByTackeState" , function(data) {if(data==""){alert("没有符合条件的记录！");
}ChartsAmcharts.initChartTrackState(data);
});
}function getMonthData(){getData("${CONTEXT_PATH}/report/countTractStateByMonth" , function(data) {if(data==""){alert("没有符合条件的记录！");
}ChartsAmcharts.initChartTrackState(data);
});
}
</script>
后台json数据绑定：使用的是JFinal框架
Version:0.9StartHTML:-1EndHTML:-1StartFragment:0000000111EndFragment:0000028523
package com.netfinworks.oa.controller;
import com.jfinal.core.Controller;
import com.jfinal.plugin.activerecord.Db;
import com.jfinal.plugin.activerecord.Record;
import com.netfinworks.oa.utils.DateUtils;
import com.netfinworks.oa.utils.WeekUtils;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
public class ReportController extends Controller{/***
* 统计指定日期当月客户各跟踪状态
*/
public void countTractStateByMonth() {List<Record> lst = new ArrayList<Record>();
String firstDay = DateUtils.getFirstDay(new Date(), 0);
String nextFirstDay = DateUtils.getFirstDay(new Date(), 1);
lst = Db.find("select ts.name,count(ch.new_track_state_id) as counts,case when ch.new_track_state_id=1 then 'red'\n" +"\twhen ch.new_track_state_id=2 then 'orange'\n" +"\twhen ch.new_track_state_id=3 then 'yellow'\n" +"\twhen ch.new_track_state_id=4 then 'green'\n" +"\twhen ch.new_track_state_id=5 then 'blue'\n" +"\twhen ch.new_track_state_id=6 then 'purple'\n" +" end as color from customer_history ch,track_state ts,\n" +"(select t.customer_id,max(t.change_time) as change_time from customer_history t where t.change_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d') group by t.customer_id ) as temp \n" +"where temp.customer_id=ch.customer_id and temp.change_time=ch.change_time\n" +"and ts.id=ch.new_track_state_id\n" +"and ch.new_track_state_id is not null group by ch.new_track_state_id", firstDay, nextFirstDay);
renderJson(lst);
}/**
* 统计按周显示客户跟踪状态
* countWeekReportByTackeState
*/
public void countWeekReportByTackeState(){List<Record> lst = new ArrayList<Record>();
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");
String firstWeek=df.format(WeekUtils.getFirstDayOfWeek(new Date()));
String lastWeek=df.format(WeekUtils.getLastDayOfWeek(new Date()));
lst=Db.find("\tselect ts.name,ch.new_track_state_id,count(ch.new_track_state_id) as counts,\tcase when ch.new_track_state_id=1 then 'red'\n" +"\twhen ch.new_track_state_id=2 then 'orange'\n" +"\twhen ch.new_track_state_id=3 then 'yellow'\n" +"\twhen ch.new_track_state_id=4 then 'green'\n" +"\twhen ch.new_track_state_id=5 then 'blue'\n" +"\twhen ch.new_track_state_id=6 then 'purple'\n" +" end as color from customer_history ch,track_state ts,\n" +"\t(select t.customer_id,max(t.change_time) as change_time from customer_history t where t.change_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d') group by t.customer_id ) as temp \n" +"\twhere temp.customer_id=ch.customer_id and temp.change_time=ch.change_time\n" +"\tand ts.id=ch.new_track_state_id\n" +"\tand ch.new_track_state_id is not null group by ch.new_track_state_id",firstWeek,lastWeek);
renderJson(lst);
}/***
* 统计上月、本月、下月关单的客户
*countCloseCustomerByMonth
*/
public void countCloseCustomerByMonth(){List<Record> lst = new ArrayList<Record>();
String lastFirstDay=DateUtils.getFirstDay(new Date(),-1);//上月第一天
String firstDay=DateUtils.getFirstDay(new Date(),0);//本月第一天
String nextFirstDay=DateUtils.getFirstDay(new Date(),1);//下月第一天
String neFirstDay=DateUtils.getFirstDay(new Date(),2);//下下月第一天
lst=Db.find("select count(ch.id) as nums,case when count(ch.id)=0 then date_format(?,'%Y%m')\n" +"else date_format(temp.change_time,'%Y%m')\n" +"end as yearmonth from customer_history ch,\n" +"(select t.customer_id,max(t.change_time) as change_time from customer_history t where t.change_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d') group by t.customer_id ) as temp \n" +"where temp.customer_id=ch.customer_id and temp.change_time=ch.change_time\n" +"and ch.new_status_id is not null and ch.new_status_id=2\n" +"union all\n" +"select count(ch.id) as nums,case when count(ch.id)=0 then date_format(?,'%Y%m')\n" +"else date_format(temp.change_time,'%Y%m')\n" +"end as yearmonth from customer_history ch,\n" +"(select t.customer_id,max(t.change_time) as change_time from customer_history t where t.change_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d') group by t.customer_id ) as temp \n" +"where temp.customer_id=ch.customer_id and temp.change_time=ch.change_time\n" +"and ch.new_status_id is not null and ch.new_status_id=2\n" +"union all\n" +"select count(ch.id) as nums,case when count(ch.id)=0 then date_format(?,'%Y%m')\n" +"else date_format(temp.change_time,'%Y%m')\n" +"end as yearmonth from customer_history ch,\n" +"(select t.customer_id,max(t.change_time) as change_time from customer_history t where t.change_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d') group by t.customer_id ) as temp \n" +"where temp.customer_id=ch.customer_id and temp.change_time=ch.change_time\n" +"and ch.new_status_id is not null and ch.new_status_id=2",lastFirstDay,lastFirstDay,firstDay,firstDay,firstDay,nextFirstDay,nextFirstDay,nextFirstDay,neFirstDay);
renderJson(lst);
}/***
* 统计上月、本月、下月预计签约的客户
*/
public void countExpectSignCustomer(){List<Record> lst = new ArrayList<Record>();
String lastFirstDay=DateUtils.getFirstDay(new Date(),-1);//上月第一天
String firstDay=DateUtils.getFirstDay(new Date(),0);//本月第一天
String nextFirstDay=DateUtils.getFirstDay(new Date(),1);//下月第一天
String neFirstDay=DateUtils.getFirstDay(new Date(),2);//下下月第一天
lst=Db.find("select count(t.id) nums,case when count(t.id)=0 then date_format(?,'%Y%m')\n" +"else date_format(t.expect_sign_time,'%Y%m')\n" +"end as yearmonth from customer t where t.status_id<> 3 and t.expect_sign_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d')\n" +"union all\n" +"select count(t.id) nums,case when count(t.id)=0 then date_format(?,'%Y%m')\n" +"else date_format(t.expect_sign_time,'%Y%m')\n" +"end as yearmonth from customer t where t.status_id<> 3 and t.expect_sign_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d')\n" +"union all\n" +"select count(t.id) nums,case when count(t.id)=0 then date_format(?,'%Y%m')\n" +"else date_format(t.expect_sign_time,'%Y%m')\n" +"end as yearmonth from customer t where t.status_id<> 3 and t.expect_sign_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d')",lastFirstDay,lastFirstDay,firstDay,firstDay,firstDay,nextFirstDay,nextFirstDay,nextFirstDay,neFirstDay);
renderJson(lst);
}
}
amchart使用总结相关推荐
- amchart折线图示例
2019独角兽企业重金招聘Python工程师标准>>> 使用amchart折现图准备工作2步: 1.需要引用封装好的amcharts.js文件和css样式表: 2.在页面上创建一个d ...
- 前端图表插件echart、amchart、g6
前端图表插件 1.echart https://echarts.apache.org/examples/zh/index.html 2.amchart https://www.amcharts.com ...
- axis为amchart左右轴的参数
<axis>left</axis> <!-- [left] (left/ right) ind ...
- amcharts应用
查看选中的软件的下载量,通过amchart报表工具显示出软件日下载量,月下载量以及年下载量,下面简单介绍,amchart在struts2中的应用. amCharts提供JavaScript/HTML5 ...
- 看完这一篇，你就对 Spring Security 略窥门径了 | 原力计划
作者 | BoCong-Deng 来源 | CSDN 博客,责编 | 夕颜 头图 | CSDN 下载自东方 IC 出品 | CSDN(ID:CSDNnews) 写在前面 开发Web应用,对页面的安全控 ...
- 2016最新Java学习计划
一.Java学习路线图 二.Java学习路线图--视频篇 六大阶段 学完后目标 知识点 配套免费资源(视频+笔 记+源码+模板) 密码 第一阶段 Java基础 入门 学习周期: 35天 ...
- JavaEE全套资料+视频+工具
JavaEE全套资料+视频+工具[点击链接原文] Java学习路线图引言: 一.Java学习路线图-流程篇: 二.Java学习路线图-视频篇: 1.第一阶段-Java基础入门 Java视频篇第一阶段- ...
- amCharts 报表(转)
amCharts 是基于Flash的一套图表解决方法,界面比JFreeChart华丽很多,而且可以与用户交互,动画效果非常漂亮.官网:http://www.amcharts.com About AmC ...
- JFreeChart展示柱状图和折线图的组合
笔者最近工作需要在Web前端展示统计图表(基于SSH架构),使用了JFreeChart和amchart两个控件,谈谈使用心得. JFreeChart的最大好处是可以在Server端保存 ...
最新文章
- python文字教程-Python
- Linux下的Nano命令
- 去除字符串中的小数点
- 操作系统实验文件管理_系统设计硬核知识（5）——操作系统的文件管理
- MySQL在EF Core下的Scaffolding操作
- 处理入参_看看优秀的程序员是如何处理NPE的
- 计算机英语讲课笔记05
- ORACLE查看某个表的索引状态
- （超详细）2022年最新版java 8（ jdk1.8u321）安装教程
- 关于英特尔® 处理器显卡技术
- mysql读写分离ppt_MYSQL主从复制和读写分离ppt课件
- HAU2022冬训营字符串1
- Microsoft Teams管理（一）
- linux proftpd 用户,Linux下安装和配置proftpd教程
- 区块链方向的论文如何查找
- arcgis api for javascript4.18加载天地图服务，并且加载自己的发布的动态地图服务
- python字典操作 EasyDict（）作用
- 高效轻量级集成区块链(ELIB)用于保护物联网安全和隐私
- android app根目录下cache,Android 手机存储目录详解
- 科学的固定资产管理让企业实现降本增效