柱形图，饼状图JavaScript
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了柱形图，饼状图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>
//注意记得一定要引用highcharts.js文件
以上是关于柱形图，饼状图JavaScript的主要内容，如果未能解决你的问题，请参考以下文章