使用Bootstrap與ShieldUI創建銷售業績儀表板

jopen 9年前發布 | 49K 次閱讀 Bootstrap 前端技術

今天，讓我們來創建一個基于Bootstrap框架的儀表板（dashboard）應用程序。

Bootstrap是一套非常流行的前端框架，它旨在幫助開發者解決開發過程中的一些主要問題，例如元素的定位、應用的響應式能力以及在多種設備上進行輸出。這個儀表板應用程序的元素包括一系列的可視化圖形，它們各自代表了各種關鍵性能指標，例如預算、訪問量及其它一些關鍵指標。

如果你想要實現的應用不僅僅能夠簡單地表現數據，還能以一種具有競爭力及優秀的表現形式進行呈現，則需要通過以下兩個步驟進行實現。

首先，我們需要以小部件（widget）的形式呈現所有底層的數據，并提供一種額外的交互層次，例如提示（tooktip）、選項（selection）及鼠標放置（hover）效果。某些數據還可以使用經過編碼的QR碼形式進行呈現，它所適用的場合包括：展現一個很長的超鏈接，或是對某個特定的條目需要顯示額外的細節信息。

可以使用ShieldUI這套web開發框架實現這一任務，這套框架提供了我們所需的各種小部件。我們將使用這套框架中的jQuery小部件，例如圖表（chart）、網格（grid）、QR碼以及評分部件，這些部件提供了非常優秀的客戶端性能以及影響式的能力。

其次，我們需要確保將儀表板中的所有元素都呈現在頁面中相互分離的各個區域。不僅如此，我們還需要確保所有這些區域在定位上都是相連的，并且在任何設備上都能夠良好地進行呈現。一般來說，實現這個任務是非常復雜的。但幸運的是，Bootstrap框架能夠大大地簡化這一任務，只需正確地使用某些CSS類便可實現了。

你可以在這里找到該示例的完整代碼下載。完成的應用程序界面請見下圖：

（單擊圖片以放大）

應用程序結構

一個完整的儀表板或許會包括無數種小部件與頁面布局的組合，我在這里選擇的是最常見的組合。從布局的角度來說，該應用的頁面共分為五個響應式的面板，這些面板的定位是由Bootstrap的布局系統所決定的。在較小的屏幕尺寸上，每個區域都會充分占據所有可用的空間。

該應用中所用到的小部件包括jQuery QR碼、jQuery評分控件、兩種不同布局的圖形控件、一個jQuery圖表插件，一個環形的進度條，以及一個網格控件。在開發的角度上，我創建了一個簡單的html文件，將所有必需的代碼都放在該文件中。

必需的資源文件

該應用程序的head區域引用了所需的全部資源文件，包括Bootstrap的CDN資源，它會負責加載所有必需的CSS類，以及jQuery和ShieldUI的腳本文件引用。Head區域的最后是一段JSON文件的引用，它包含了網格組件所需的原始數據。

以下是完整的head區域的內容：

<head>
    <title>Bootstrap Dashboard</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href=" />
<link rel="stylesheet" type="text/css" href=" />
<link rel="stylesheet" type="text/css" href=" />
<script type="text/javascript" src="></script>
<script type="text/javascript" src="></script>
<script src="gridData.js"></script>

</head></pre> 
當所有的資源文件都準備好之后，我們就可以著手打造該頁面了。我會依次講解該頁面中所有面板的功能。 

用戶個人信息 

該區域將使用一個標準的Bootstrap面板以呈現基本的用戶信息細節：包括用戶/雇員名稱、所屬部門以及職位。在該面板的注腳部分包含了一個QR碼，其中包含了額外的用戶信息，也可對它進行擴展，以經過編碼的URL形式表示完整的用戶信息或其它相關數據的對應頁面。 

 

這塊區域是由以下代碼所生成的： 

<div class="col-sm-6 col-lg-3">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h4 class="text-center">User Profile<span class="glyphicon glyphicon-user 
pull-right"></span></h4>
                    </div>
                    <div class="panel-body text-center">
                        <p class="lead">
                            <strong>Mike Smith</strong>
                        </p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item liitem"><strong>Position:</strong>
                            <span class="pull-right">Developer</span>
                        </li>
                        <li class="list-group-item liitem"><strong>Company:</strong>
                            <span class="pull-right">EasyTech</span>
                        </li>
                        <li class="list-group-item liitem"><strong>Department:</strong>
                            <span class="pull-right">Dataviz</span>
                        </li>
                        <li class="list-group-item liitem"><strong>Project Duration:</strong>
                            <span class="pull-right">12 months</span>
                        </li>
                    </ul>
                    <div class="panel-footer">
                        <div class="row">
                            <div class="col-xs-4 col-sm-3 col-md-4 col-lg-2">
                            </div>
                            <div class="col-xs-2 col-sm-4 col-md-4 col-lg-4" id="qr1">
                            </div>
                            <div class="col-xs-6 col-sm-5 col-md-4 col-lg-6">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
 這個面板的注腳部分包含了一個id為“qr1”的div，在頁面進行加載時，QR碼會在該div中進行初始化。其它所有html元素都應用了標準的Bootstrap類，這些類會負責處理與定位和響應式編碼，這就為開發者解決了大量的問題與開發過程中可能遇到的挑戰。 

用戶細節 

頁面中的這部分內容與前文所述的用戶信息非常相似，但它所列舉的是用戶的個人技能信息。每一項個人技能的右方是一個評分組件，描述了每一項內容的個人專業程度。將鼠標移至該評分元素上，并單擊選擇，就可以對每一項評分的值進行變更。 

與第一個面板相同，注腳部分同樣包含了一個QR碼，包含了經過編碼的額外信息，例如某個獨立的頁面或Url。 

 

這一區域是由以下代碼所創建的： 

<div class="panel panel-primary">
                    <div class="panel-heading">
                        <h4 class="text-center">Skills<span class="glyphicon glyphicon-saved
 pull-right"></span></h4>
                    </div>
                    <div class="panel-body text-center">
                        <p class="lead">
                            <strong>Technology Overview</strong>
                        </p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item liitem">
                            <div class="skillLineDefault">
                                <div class="skill pull-left text-center">HTML5</div>
                                <div class="rating" id="rate1"></div>
                            </div>
                        </li>
                        <li class="list-group-item liitem">
                            <div class="skillLineDefault">
                                <div class="skill pull-left text-center">CSS</div>
                                <div class="rating" id="rate2"></div>
                            </div>
                        </li>
                        <li class="list-group-item liitem">
                            <div class="skillLineDefault">
                                <div class="skill pull-left text-center">jQuery</div>
                                <div class="rating" id="rate3"></div>
                            </div>
                        </li>
                        <li class="list-group-item liitem">
                            <div class="skillLineDefault">
                                <div class="skill pull-left text-center">C#</div>
                                <div class="rating" id="rate4"></div>
                            </div>
                        </li>
                    </ul>
                    <div class="panel-footer">
                        <div class="row">
                            <div class="col-xs-4 col-sm-3 col-md-4 col-lg-2">
                            </div>
                            <div class="col-xs-2 col-sm-4 col-md-4 col-lg-4" id="qr2">
                            </div>
                            <div class="col-xs-6 col-sm-5 col-md-4 col-lg-6">
                            </div>
                        </div>
                    </div>
                </div>
 包括QR碼與評分控件在內的所有小部件元素，都是由一個包含了唯一的ID的簡單的div元素進行展現的。頁面在運行時會通過該ID創建一個相應的小部件。 

季度業績區域 

儀表板中的這一區域將通過一個jQuery圖表插件展現該季度的數據。這段示例中包括了兩個序列的數據，可用以繪制個人、員工或公司數據。可以對序列的數量進行調整，以適應對更多數據展現的需要。不過應盡可能將序列的數量控制在最小范圍內，以確保良好的閱讀體驗。 

 

這一區域是由以下代碼所創建的： 

<div class="col-sm-12 col-md-12 col-lg-6">
                <div class="panel panel-primary" style="height: 491px;">
                    <div class="panel-heading">
                        <h4 class="text-center">Quarterly Performance<span 
class="glyphicon glyphicon-screenshot pull-right"></span></h4>
                    </div>
                    <div id="chart1">
                    </div>
                </div>
            </div>
 這個面板中僅包含了兩個區域的內容，因此對應的html代碼也十分簡單易懂。圖表小部件在運行時加載數據，它的整體結構是由以下JavaScript代碼專用所定義的： 

function initializeChart1() {
            var data1 = getRandomArray(20, 1, 50);
            var data2 = getRandomArray(20, 20, 70);
            $("#chart1").shieldChart({
                theme: "light",
                exportOptions: {
                    image: false,
                    print: false
                },
                primaryHeader: {
                    text: "Performance Data"
                },
                tooltipSettings: {
                    axisMarkers: {
                        enabled: true,
                        mode: 'x',
                        width: 2,
                        zIndex: 3,
                        drawColor: "white"
                    }
                },
                dataSeries: [
                    {
                        seriesType: 'bar',
                        collectionAlias: 'Achieved',
                        data: data1
                    },
                    {
                        seriesType: 'line',
                        collectionAlias: 'Target',
                        data: data2
                    }
                ]
            });
        }
 出于本文的篇幅考慮，這段示例使用的是隨機數據，但也可對其進行擴展，從其它任何渠道獲取數據。代碼中的dataSeries屬性用于描述該圖表中所呈現的兩種類型的序列，即線狀圖與餅圖。 

整體業績區域 

該區域也是一個包含了可視化數據的面板，其中使用了一個進度條控件，可表現業績數據，或是某個任務或目標的完成進度百分比。它為用戶提供了一種查看某個目標能否及時完成的快速的可視化參考。 

通過對這段代碼進行簡單的擴展，可以使用不同的顏色集，例如以綠色表示目標達成，或是以紅色表示進度落后。 

 

全公司業績區域 

這個區域的代碼相比其它幾個區域有所增加，因此可以參考本文所附帶的示例，以獲取完整的內容。從結構的角度來說，該面板區域共包含了三個子區域。 


文本子區域可以讓用戶快速地了解該面板對應了哪種可視化的數據，在本例中它表示的是預算的趨勢。 

第二個子區域中包含了三個圖表及簡單的布局，即以數據曲線所表現的趨勢數據。 

最后一個子區域中是一個高度可見的文本區域，它直接反應了每一行所對應的數值。 
</ul>
 

完整的公司數據區域 

該區域包含了一個標準的網格表，以多個行的形式表現數據。可以在該網格中展現公司數據，或用以展現某個公司的全體員工列表。該組件內置了對排序及分頁的支持。 

（單擊圖片以放大） 

 

該區域所對應的html部分代碼如下所示： 

<div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12">
                <div class="panel panel-primary" style="height: 472px; min-width: 597px;">
                    <div class="panel-heading">
                        <h4 class="text-center">Full Company Data<span class="glyphicon 
glyphicon-eye-open pull-right"></span></h4>
                    </div>
                    <div id="grid1" style="max-height: 393px;">
                    </div>
                </div>
            </div>
        </div>
 這段代碼包含了面板的聲明，包括header與body。除此之外，其中還包含了一個id為“grid1”的div，它將在運行時呈現整個表格的布局。 

初始化小部件 

每個小部件都與一個JavaScript函數所對應，后者會負責進行初始化工作。舉例來說，前文中所提到的網格小部件是由以下函數進行初始化的： 

function initializeGrid1() {
            $("#grid1").shieldGrid({
                dataSource: {
                    data: gridData
                },
                sorting: {
                    multiple: false
                },
                paging: {
                    pageSize: 8,
                    pageLinksCount: 10
                },
                selection: {
                    type: "row",
                    multiple: true,
                    toggle: false
                },
                columns: [
                    { field: "id", title: "ID" },
                    { field: "name", title: "Person Name" },
                    { field: "company", title: "Company Name" },
                    { field: "email", title: "Email Address" }
                ]
            });
        }
 為了本文的簡潔性，我沒有列舉出完整的代碼，但邏輯是相同的：即每個這樣的函數都將對一個獨立的小部件進行初始化，而每個小部件會進一步進行可視化與交互的相關操作。 

至此，頁面的裝配工作以及大部分的元素已準備就緒。歡迎讀者下載示例的代碼，在本機進行嘗試，或進一步探索每個區域、元素或小部件的功能。 

關于作者 

 David Johnson來自于英國倫敦，他是一位37歲的開發者。過去的15年間，他主要工作于web技術的領域，而近10年間，他主要專注于ASP.NET和MVC平臺。David作為一名外包開發者參與過許多項目，最近的職位是在ShieldUI擔任首席開發者。 

 

查看英文原文：Article: Creating a Sales Dashboard with Bootstrap and ShieldUI 
來自：http://www.infoq.com/cn/articles/Bootstrap-Dashboard