<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