基於MVC4+EasyUI的Web開發架構經驗總結（4）--使用圖表控制項Highcharts

標籤：style   class   blog   c   code   java   

在我們做各種應用的時候，我們可能都會使用到圖表統計，以前接觸過一些不同的圖表控制項，在無意中發現了圖表控制項Highcharts，其強大的功能和豐富的互動效果，令人難以忘懷。本篇主要介紹在Web開發中使用圖表控制項Highcharts，以及對其進行統一漢化等操作，讓我們的程式功能更加豐富，內容更加美觀。

1、Highcharts基礎介紹

Highcharts是一個非常流行，介面美觀的純Javascript圖表庫。它主要包括兩個部分：Highcharts和Highstock。Highcharts可以為您的網站或Web應用程式提供直觀，互動式的圖表。目前支援線，樣條，面積，areaspline，直條圖，橫條圖，餅圖和散佈圖類型。Highstock可以為您方便地建立股票或一般的時間軸圖表。它包括先進的導航選項，預設的日期範圍，日期選取器，滾動和平移等等。

HIghChartS官網：http://www.highcharts.com/

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

Highcharts支援曲線圖、餅圖、柱狀圖、儀錶圖、散佈圖等等幾十種圖形，介面展示效果非常豐富，3D效果也很好看。列出幾個供參考下吧

   

Highcharts使用jQuery等Javascript架構來處理基本的Javascript任務。因此,在使用Highcharts之前，需要在頁面頭部引用這些指令檔。如果你使用jQuery作為基本架構，那麼你需要在頁面頭部同時引用jQuery和Hightcharts兩個檔案就可以了。

由於我在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>

但是為了更好的展示效果，我們一般添加一個表徵圖預定義的樣式進去，同時添加匯出功能的指令碼，如下所示。

    @*圖表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>

 

2、圖表的產生操作

前面說了，這個圖表控制項主要就是使用Jquery和Javascript來實現，我們來分析下一個餅圖的Demo代碼。

$(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>

完成以上的代碼，我們運行就可以看到下面的圖形了，這樣看起來是不是比較酷一些呢。

3、圖表的匯出功能及菜單漢化

從上面的圖表裡面看到，每個圖表的右上方，都有一個菜單的功能，裡面有一些功能，如列印圖片、匯出圖片等操作，具體菜單的表現如下所示。

但是上面的菜單式我經過了漢化處理的， 預設的顯示效果是英文的，如下所示。

顯然英文的菜單，不是我們希望的，我們需要漢化一下才更好，那麼如何漢化上面的通用菜單呢，需要每個模組都重複一樣的漢化嗎，當然不需要了。我們可以把它放到全域設定裡面。

前面我們介紹了，為了使得圖表展示更好的效果，我們包含了一個grid.js的圖表樣式，其實裡面也還有其他樣式可以使用的，不過我覺得還是grid.js的樣式最佳，如下所示。

那麼既然使用了這個樣式設定，我們把全域的一些設定，如漢化的操作，也放到這裡就可以了。

我們在這個檔案的底部，增加一個SetOption的作業碼就可以，這些漢化的菜單，由於我使用了最新版本，有些參數是和舊版本不一致的，所以衝著這個辛苦勁，應該推薦鼓勵下哦。呵呵

設定漢化的代碼。如下所示。

// Apply the themevar highchartsOptions = Highcharts.setOptions(Highcharts.theme);//漢化圖表菜單Highcharts.setOptions({    lang: {        contextButtonTitle: "圖表菜單",        printChart: "列印圖片",        downloadJPEG: "下載JPEG 圖片",        downloadPDF: "下載PDF文檔",        downloadPNG: "下載PNG 圖片",        downloadSVG: "下載SVG 向量圖",        exportButtonTitle: "匯出圖片"    }});