highcharts 柱狀圖 or折線圖 or 餅圖 使用

dodo.highcharts.js

(function(){
    var defaults={id:"container",type:"spline",data:[],date:[],totalcount:30,verticalAlign:"bottom"};
    var dodo={
            //柱狀圖 or折線圖 or 餅圖
            highcharts:function(options){
                var jg=10;
                defaults = $.extend(defaults, options); 
                if(defaults.totalcount <= 30 && defaults.totalcount>7){ //一個月
                    jg=7; //7天一顯示
                }else if(defaults.totalcount <= 120 && defaults.totalcount>30){
                    jg=30; //30天一顯示
                }else if(defaults.totalcount <= 7 && defaults.totalcount>0){
                    jg=1;  //一天一顯示
                }else if(defaults.totalcount <= 365 && defaults.totalcount>120){
                    jg=90;  //一個季度一顯示
                }else if(defaults.totalcount > 365){
                    jg=120;
                }
                //y 軸 顯示的個數
               /* var tickPositionsdata=[];
                if(totalcount>8){
                        tickPositionsdata.push(0); 
                     tickPositionsdata.push(parseInt(parseInt(totalcount)/7));
                     tickPositionsdata.push(parseInt(parseInt(totalcount)/7)*2);
                     tickPositionsdata.push(parseInt(parseInt(totalcount)/7)*3);
                     tickPositionsdata.push(parseInt(parseInt(totalcount)/7)*4);
                     tickPositionsdata.push(parseInt(parseInt(totalcount)/7)*5);
                     tickPositionsdata.push(parseInt(parseInt(totalcount)/7)*6);
                     tickPositionsdata.push(totalcount-1);
                }*/
                
                var chart = new Highcharts.Chart({  
                    chart: { 
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        renderTo: defaults.id, 
                        type: defaults.type,
                        ignoreHiddenSeries:true
                    },  
                    title: { 
                        enabled: true, 
                        text: "" 
                    }, 
                    exporting: { enabled: false },
                    credits: { enabled: false },
                    subtitle: {  
                        text: ''  
                    },  
                    xAxis: {
                        categories:defaults.date,
                        type: "datetime",
                        maxPadding : 0,
                        minPadding : 0,
                        /*tickPositions:tickPositionsdata,*/
                        tickInterval :jg,
                        tickPixelInterval : 10,
                        tickWidth:1,//刻度的寬度
                        lineColor : '#990000',//自定義刻度顏色
                        lineWidth :1,//自定義x軸寬度
                        gridLineWidth :0
                    },
                    
                    yAxis: {
                        endOnTick: false,
                        gridLineWidth: 1,
                        gridLineDashStyle: "dash",
                        gridLineColor: "#c0c0c0",
                        lineWidth:1,
                        title: { text: null },
                        labels: {
                            formatter: function() {
                                return Highcharts.numberFormat(this.value, 2);
                            }
                        }
                    },  
                    tooltip : {
                        useHTML : true,
                        crosshairs: true,
                        shared: true
                    },
                    plotOptions: {
                        spline: {
                            marker: {
                                radius: 0, //是否描點
                                states: { 
                                    hover: {
                                        symbol: 'circle', 
                                        radius: 5,
                                        fillColor: 'red', 
                                        lineWidth: 1
                                    } 
                                },
                                marker: {
                                    enabled: false
                                }
                            }
                        },
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: false
                            },
                            showInLegend: true
                        }
                    },
                    legend: {
                         enabled: true,    //是否顯示線的介紹，默認爲true
                        align: 'center' ,
                        verticalAlign: defaults.verticalAlign 
                    },
                    series:defaults.data
                }); 
            }
            
    }
    window.dodo = dodo;
}());
Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, 
        "d+": this.getDate(),
        "h+": this.getHours(), 
        "m+": this.getMinutes(),
        "s+": this.getSeconds(),
        "q+": Math.floor((this.getMonth() + 3) / 3),
        "S": this.getMilliseconds()
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
 

 

jsp 頁面調用：

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>highcharts</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hightchartsLesson</title>
<script type="text/javascript" src="/static/asset/jquery-2.2.4.min.js"></script>
<script src="/static/asset/highcharts.js"></script>
<script src="/static/asset/aresoft.highcharts.js"></script>

<script>
$(document).ready(function(){
    /* var navDate=[], navData=[],totalData=[];
    $.ajax({  
        type: "POST", 
        url: "/hightCharts/demo/json",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: "{}",             
        success: function (data) {
            for(k=0;k<data.length;k++){
                navDate.push(new Date(data[k].funddate).Format("yyyy-MM-dd"));
                navData.push(parseFloat(data[k].fundvalue));
                totalData.push(parseFloat(data[k].fundtotalvalue));
            }
            var d=[{name: "本產品淨值",color: '#ff5723',data:navData},{name: "本產品累計淨值",color: '#2894ff',data:totalData}];
            dodo.highcharts({type:"spline",data:d2,date:navDate,totalcount:data.length});
        }  
    }); */
    
    
    var browsers = [];
    $.ajax({  
        type: "POST", 
        url: "/hightCharts/demo/piejson",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: "{}",             
        success: function (data) {
            for(k=0;k<data.length;k++){
                browsers.push(data[k]);
            }
            var d3=[{name: '遊覽器訪問統計：',  data:browsers}];
            aresoft_highcharts.spline({type:"pie",data:d3});
        }  
    });
    
    
});

</script>

</head>
<body>
    <div id="result"></div>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

 

action:

@Controller(value = "/hightCharts/demo")    
public class HightChartsController {

    public View json(){
        List<Map<String,String>> list=new ArrayList<Map<String,String>>();
        Map<String,String> map=new HashMap<String,String>();
        map.put("fundcode","000002");
        map.put("fundname","基金二號");
        map.put("funddate","2015-01-01");
        map.put("fundvalue","1.1"); //單位淨值
        map.put("fundtotalvalue","2.1"); //累計淨值
        list.add(map);
        
        Map<String,String> map2=new HashMap<String,String>();
        map2.put("fundcode","000002");
        map2.put("funddate","2015-01-02");
        map2.put("fundname","基金二號");
        map2.put("fundvalue","2.1"); //單位淨值
        map2.put("fundtotalvalue","3.1"); //累計淨值
        list.add(map2);
        
        Map<String,String> map3=new HashMap<String,String>();
        map3.put("fundcode","000002");
        map3.put("funddate","2015-01-03");
        map3.put("fundname","基金二號");
        map3.put("fundvalue","2.1"); //單位淨值
        map3.put("fundtotalvalue","4.1"); //累計淨值
        list.add(map3);
        
        Map<String,String> map4=new HashMap<String,String>();
        map4.put("fundcode","000002");
        map4.put("funddate","2015-01-04");
        map4.put("fundname","基金二號");
        map4.put("fundvalue","2.1"); //單位淨值
        map4.put("fundtotalvalue","4.1"); //累計淨值
        list.add(map4);
        
        Map<String,String> map5=new HashMap<String,String>();
        map5.put("fundcode","000002");
        map5.put("funddate","2015-01-05");
        map5.put("fundname","基金二號");
        map5.put("fundvalue","2.1"); //單位淨值
        map5.put("fundtotalvalue","4.1"); //累計淨值
        list.add(map5);
        
        Map<String,String> map6=new HashMap<String,String>();
        map6.put("fundcode","000002");
        map6.put("funddate","2015-01-06");
        map6.put("fundname","基金二號");
        map6.put("fundvalue","2.1"); //單位淨值
        map6.put("fundtotalvalue","4.1"); //累計淨值
        list.add(map6);
        
        Map<String,String> map7=new HashMap<String,String>();
        map7.put("fundcode","000002");
        map7.put("funddate","2015-01-07");
        map7.put("fundname","基金二號");
        map7.put("fundvalue","2.1"); //單位淨值
        map7.put("fundtotalvalue","4.1"); //累計淨值
        list.add(map7);
        
        Map<String,String> map8=new HashMap<String,String>();
        map8.put("fundcode","000002");
        map8.put("funddate","2015-01-08");
        map8.put("fundname","基金二號");
        map8.put("fundvalue","2.1"); //單位淨值
        map8.put("fundtotalvalue","4.1"); //累計淨值
        list.add(map8);
        
        Map<String,String> map9=new HashMap<String,String>();
        map9.put("fundcode","000002");
        map9.put("funddate","2015-01-09");
        map9.put("fundname","基金二號");
        map9.put("fundvalue","2.1"); //單位淨值
        map9.put("fundtotalvalue","4.1"); //累計淨值
        list.add(map9);
        
        return ViewFactory.json(list);
    }
    
    
    public View piejson(){
        List<Map<String,Object>> list=new ArrayList<Map<String,Object>>();
        Map<String,Object> map=new HashMap<String,Object>();
        map.put("name","Chrome");
        map.put("selected",true);
        map.put("sliced",true);
        map.put("visible",true);
        map.put("y",12.8);
        list.add(map);
        
        Map<String,Object> map2=new HashMap<String,Object>();
        map2.put("name","IE");
        map2.put("visible",true);
        map2.put("y",20.8);
        list.add(map2);
        
        Map<String,Object> map3=new HashMap<String,Object>();
        map3.put("name","OTHERS");
        map3.put("visible",true);
        map3.put("y",30.8);
        list.add(map3);
        
        return ViewFactory.json(list);
    }