基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts

时间 2019-11-08

标签基于 mvc4+easyui mvc easyui web 开发框架经验总结使用图表控件 highcharts 栏目 HTML 繁體版

原文原文链接

在咱们作各类应用的时候，咱们可能都会使用到图表统计，之前接触过一些不一样的图表控件，在无心中发现了图表控件Highcharts，其强大的功能和丰富的互动效果，使人难以忘怀。本篇主要介绍在Web开发中使用图表控件Highcharts，以及对其进行统一汉化等操做，让咱们的程序功能更加丰富，内容更加美观。javascript

一、Highcharts基础介绍

Highcharts是一个很是流行，界面美观的纯Javascript图表库。它主要包括两个部分：Highcharts和Highstock。Highcharts能够为您的网站或Web应用程序提供直观，互动式的图表。目前支持线，样条，面积，areaspline，柱形图，条形图，饼图和散点图类型。Highstock能够为您方便地创建股票或通常的时间轴图表。它包括先进的导航选项，预设的日期范围，日期选择器，滚动和平移等等。html

HIghChartS官网：http://www.highcharts.com/java

HighCharts Demo:http://www.highcharts.com/demo/jquery

Highcharts支持曲线图、饼图、柱状图、仪表图、散点图等等几十种图形，界面展现效果很是丰富，3D效果也很好看。列出几个供参考下吧web

Highcharts使用jQuery等Javascript框架来处理基本的Javascript任务。所以,在使用Highcharts以前，须要在页面头部引用这些脚本文件。若是你使用jQuery做为基本框架，那么你须要在页面头部同时引用jQuery和Hightcharts两个文件就能够了。ajax

因为我在Web开发框架中，主要采用了MVC+EasyUI的方式，因包含的文件以下所示。框架

    @*添加Jquery，EasyUI和easyUI的语言包的JS文件*@
    <script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.min.js"></script>
    <script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>


    @*图表JS文件应用*@
    <script src="~/Content/JQueryTools/Highcharts/js/highcharts.js"></script>

可是为了更好的展现效果，咱们通常添加一个图标预约义的样式进去，同时添加导出功能的脚本，以下所示。async

    @*图表JS文件应用*@
    <script src="~/Content/JQueryTools/Highcharts/js/highcharts.js"></script>
    <script src="~/Content/JQueryTools/Highcharts/js/modules/exporting.js"></script>
    <script src="~/Content/JQueryTools/Highcharts/js/themes/grid.js"></script>

固然，若是咱们散点图、3D图形等内容，还须要引入一些额外的js文件的函数

    <script src="~/Content/JQueryTools/Highcharts/js/highcharts-more.js"></script>
    <script src="~/Content/JQueryTools/Highcharts/js/highcharts-3d.js"></script>

二、图表的生成操做

前面说了，这个图表控件主要就是使用Jquery和Javascript来实现，咱们来分析下一个饼图的Demo代码。post

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});

上面的脚本主要就是根据series属性里面的数据进行生成饼图的，那么咱们实际开发的时候，数据确定不是固定的，通常咱们是经过动态方式赋值的。

如我通常倾向于使用Jquery的Ajax方式，调用后台得到数据，而后进行绑定的。那么这种状况下，如何操做脚本了呢，咱们来分析看看。

首先咱们先在脚本函数里面，初始化一个chart对象，并把其中涉series数据data设置为空就是了。

            var chart1 = new Highcharts.Chart({
                chart: {
                    renderTo: "container1",
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                },
                title: {
                    text: '集团分子公司人员组成'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.y}</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }

                        },
                        //showInLegend: true
                    }
                },
                series: [{ type: 'pie',
                    name: '人员数量', data: [] }]
            });

第二步是经过Ajax调用后台链接得到数据，而后绑定到具体的属性上就能够了，具体代码以下所示。

            //经过Ajax获取图表1数据
            $.ajaxSettings.async = false;
            var data1 = [];
            $.getJSON("/User/GetCompanyUserCountJson", function (dict) {                
                for (var key in dict) {
                    if (dict.hasOwnProperty(key)) {
                        data1.push([key, dict[key]]);
                    }
                };
                chart1.series[0].setData(data1);
            });

而图表的HTML代码则是以下所示，主要就是新增一个div，id为container1，用来放置图表就是了。

                             <div class="box">
                                 <div class="box-title">
                                     <div style="float: left">
                                         <img src="~/Content/JqueryEasyUI/themes/icons/customed/user.png" alt="" width="20" height="20" />
                                         图表1
                                     </div>
                                     <div style="float: right; padding-right: 10px;">更多</div>
                                 </div>
                                 <div class="box-content" style="height: 310px">
                                     <div id="container1" style="height: 300px;max-width:500px"></div>
                                 </div>
                             </div>

完成以上的代码，咱们运行就能够看到下面的图形了，这样看起来是否是比较酷一些呢。

三、图表的导出功能及菜单汉化

从上面的图表里面看到，每一个图表的右上角，都有一个菜单的功能，里面有一些功能，如打印图片、导出图片等操做，具体菜单的表现以下所示。

可是上面的菜单式我通过了汉化处理的，默认的显示效果是英文的，以下所示。

显然英文的菜单，不是咱们但愿的，咱们须要汉化一下才更好，那么如何汉化上面的通用菜单呢，须要每一个模块都重复同样的汉化吗，固然不须要了。咱们能够把它放到全局设置里面。

前面咱们介绍了，为了使得图表展现更好的效果，咱们包含了一个grid.js的图表样式，其实里面也还有其余样式可使用的，不过我以为仍是grid.js的样式最佳，以下所示。

那么既然使用了这个样式设置，咱们把全局的一些设置，如汉化的操做，也放到这里就能够了。

咱们在这个文件的底部，增长一个SetOption的操做代码就能够，这些汉化的菜单，因为我使用了最新版本，有些参数是和旧版本不一致的，因此冲着这个辛苦劲，应该推荐鼓励下哦。呵呵

设置汉化的代码。以下所示。

// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

//汉化图表菜单
Highcharts.setOptions({
    lang: {
        contextButtonTitle: "图表菜单",
        printChart: "打印图片",
        downloadJPEG: "下载JPEG 图片",
        downloadPDF: "下载PDF文档",
        downloadPNG: "下载PNG 图片",
        downloadSVG: "下载SVG 矢量图",
        exportButtonTitle: "导出图片"
    }
});