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);
    }
}