基於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: "導出圖片"
    }
});