一、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>
四、总结
关于图表的制作,在这之前是没有一点儿接触的,在这个的制作过程中真的花费了很多的心思,并且不仅仅是并行图,对于其他类型的图表也有了一定的了解。之前对于地图很有兴趣,感觉他很神奇,不明白这是怎么做出来的,这次之后真的是我自己也可以做简单的地图了。学习我们需要深度,有了深度之后再扩展就容易很多,光有广度并不能走的很远,塌下心来研究我们遇到的问题,才能真正的帮助我们提升能力!