Highchars组件使用

一、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>

(3)效果图

四、总结

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