柱形图，饼状图，折线图JavaScript
//柱形图
<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>
//折线图
<script type="text/javascript">
$(function () {
$(\'#container\').highcharts({
chart: {
type: \'line\'
},
title: {
text: \'\'
},
subtitle: {
text: \'\'
},
xAxis: {
categories: [\'正高级\', \'副高级\', \'中级\', \'初级\', \'其他\']
},
yAxis: {
title: {
text: \'\'
}
},
credits: {
enabled: false //右下角不显示LOGO
}
tooltip: {
enabled: false,
formatter: function() {
return \'<b>\'+ this.series.name +\'</b>\'+this.x +\': \'+ this.y +\'°C\';
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: \'Tokyo\',
data: [${zgj},${fgj},${zj},${cj},${qtj}]
}]
});
});
</script>
<tr>
<td id="container_1" align="left" style="width:30%; align:left; margin: 0 auto;
</td>
<td id="container_2" align="left" style="width:35%; align:left; margin: 0 auto;
</td>
<td id="container" align="left" style="width:35%; align:left; margin: 0 auto;background-color:#FFFFFF">
</td>
</tr>
//注意一定要引用highcharts.js文件exporting.js文件