直條圖，餅狀圖JavaScript

標籤：柱狀圖   height   mat   mil   bsp   資料   tle   比例   return   

<script type="text/javascript">
    $(function () {
    $(‘#container_2‘).highcharts({
        chart: {
        //type指定柱狀圖顯示
            type: ‘column‘,
         
        },
       
        title: {
        //柱狀表徵圖題
            text: ‘‘
        },
        subtitle: {
            text: ‘資料截止 2017-06‘
        },
         credits: {  
                    enabled: false   //右下角不顯示LOGO  
                },
        exporting: {//Highcharts 圖表匯出功能模組。  
                    enabled: false  
                },
        xAxis: {
            type: ‘category‘,
            labels: {
            //x軸傾斜度
                rotation: -45,
                style: {
                //字型大小
                    fontSize: ‘13px‘,
                    //字型風格
                    fontFamily: ‘Verdana, sans-serif‘
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
            //y軸標題
                text: ‘單位(萬元)‘
            }
        },
        legend: {
        //y軸
            enabled: false
        },
        tooltip: {
        //擷取游標時保留兩位小數
            pointFormat: ‘費用: <b>{point.y:.2f} 萬元</b>‘
        },
         //讓柱狀圖上數字溢出顯示     
plotOptions: {
    column: {
        dataLabels: {
        overflow: "none",
        crop: false,
        }
    }

},
        series: [{
       //y軸顯示
            name: ‘‘,
            data: [
                        [‘資料費‘,${zlf}],  
                        [‘講課費‘,${jkf}],  
                        [‘場地費‘,${cdf}],  
                        [‘學員補助‘,${xybz}],
                        [‘其他支出‘,${qtzc}]
                         
            ],
            dataLabels: {
            //顯示數字y軸
                enabled: true,
                rotation: 0,
                color: ‘#000000‘,
                
                align: ‘center‘,
                //y軸顯示保留兩位小數
                format: ‘{point.y:.2f}‘, // one decimal
                //字型在柱狀圖上下移動
                y: 0, // 10 pixels down from the top
                style: {
               //y軸字型大小
                    fontSize: ‘13px‘,
                    //y軸字型風格
                    fontFamily: ‘Verdana, sans-serif‘
                }
            }
        }]
    });
});
    
</script>    
<script type="text/javascript">  
           $(function() {  
                $(‘#container_1‘).highcharts({  
                chart: {  
                //type指定餅狀圖顯示
                    type: ‘pie‘,  
                    //背景顏色
                    backgroundColor:"#FFFFFF",  
                    x:-200,  
                    //圖形大小
                    height: 300,  
                    //居左距離
                    marginLeft:-200
                     
                },  
                credits: {  
                    enabled: false   //右下角不顯示LOGO  
                },  
                title: {  
                //餅狀圖上面不加字標題
                    text: ‘‘,  
                },  
                subtitle: {  
                //餅狀圖上面不加字
                    text: ‘‘,  
                },  
                exporting: {
                //Highcharts 圖表匯出功能模組。  
                    enabled: false  
                },  
                //圖形顏色
                colors: [‘#E2214E‘, ‘#F7B52B‘],
                //餅狀圖旁邊顯示的比例的事件  
                legend: {  
                //垂直
                    layout: ‘true‘,  
                    floating: true,  
                    backgroundColor: ‘#FFFFFF‘,  
                    align: ‘right‘,  
                    verticalAlign: ‘top‘,  
                    //調整餅狀圖旁邊的比例靠上還是靠下
                    y: 35,  
                  //調整餅狀圖旁邊的比例靠左還是靠右
                    x: -20,  
                    itemMarginBottom :2,//圖例的上下間距  
                    //地區大小
                    maxHeight: 200,  
                    symbolHeight: 14,//圖例高度 及大小
                    //小表徵圖與比例的距離
                    symbolWidth:14  
                },  
                
                plotOptions: {  
                    pie: {  
                        allowPointSelect:false,  
                        cursor: ‘pointer‘,  
                        dataLabels: {  
                        //是否顯示餅狀圖上的拉線
                            enabled: false  
                        },  
                        
                        showInLegend: true,  
                        symbolWidth: 24,  
                        point: {  
                            events: {  
                                legendItemClick: function (e) {  
                                    return false; // 直接 return false 即可禁用圖例點擊事件  
                                }  
                            }  
                        }  
                    }  
                },  
                
                series: [{  
                    data: [  
                        [‘專項經費‘+‘‘ +‘<span style="text-align:center;"><fmt:formatNumber value="${zxjf/hj*100}" pattern="##.##" minFractionDigits="2" ></fmt:formatNumber>‘+‘%‘+‘</span>‘,<fmt:formatNumber value="${zxjf/hj*100}" pattern="##.##" minFractionDigits="2" ></fmt:formatNumber>],  
                        [‘自籌經費‘+‘‘+‘<span style="text-align:center;"><fmt:formatNumber value="${zcjf/hj*100}" pattern="##.##" minFractionDigits="2" ></fmt:formatNumber>‘+‘%‘+‘</span>‘,<fmt:formatNumber value="${zcjf/hj*100}" pattern="##.##" minFractionDigits="2" ></fmt:formatNumber>]
                          
                    ]  
                }]  
            });  
        });  
             
    </script>

 

 

//注意記得一定要引用highcharts.js檔案

 

直條圖，餅狀圖JavaScript