一、Highchars概念
Highchars是一个用JS编写的图表库,用于制作图表,支持的图表类型有:曲线图、区域图、柱状图、饼状图、散点图和综合图表。对于我们做管理型软件以及进行数据分析时有很好的效果。
二、背景
最近做的是针对于学生成绩分析这一块儿的,其中有一个功能涉及到对于班级学生成绩进行分析,做成饼形图。这一块儿的需求特别好理解,但是针对于我JS这一块学的并不是很好的情况下,实现起来比较困难,后来通过查询资料、实验,做出了一个模型。下面就是我的制作过程。
三、饼形图的制作
(1)在Controller里只需要Return View,以及需要的方法,然后添加强制类型的视图:
(2)打开View 界面:现在我们开始在view界面进行书写代码,引入上面添加的JS文件。
@*饼形图的形成代码及JS*@
<script src="../../Scripts/Highcharts-4.0.1/js/highcharts.js"></script>
(3)在View界面填写JS文件:
<script>
//饼形图代码
$(document).ready(function () {
//因为已经引用了JS包,针对于并行图的方法在JS包里面都已经封装好了,这里直接拿过来用即可
$('#container').highcharts({
chart: {
//初始化背景色,边框,类型:圆
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
//type参数:line,pie,scatter,splinearea,bar,spline,area,column
type: 'pie'
},
title: {
//表头
text: '班级成绩分析饼形图'
},
tooltip: {
//图表各部分分配
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
//圆的一些方法设置:允许被选中,手型光标
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false},
//到特定区域显示数据--在JS包中封装好的方法
showInLegend:true
}
},
series: [{
//根据数据分区:
name: "Brands",
colorByPoint: true,
data: [{
name: "优秀",
//如果需要加载数据只需要在Controller中添加特定的方法,在这里获取即可
y:5
//$(doucment).ready(function () {
// var num1 = $.get('/Page/QueryExcellent');
// return num1;
// })
}, {
name: "良好",
y: 25,
sliced: true,
selected: true
}, {
name: "合格",
y: 50
}, {
name: "差",
y: 15
}, {
name: "极差",
y: 5
}]
}]
});
});
</script>