移動設備的迅速發展為軟件開發者們創造了新的機會，但同時也帶來了新的問題：如何創建跨平臺移動應用程序。經過搜尋，筆者決定嘗試一下DevExpress的新一代產品 DevExtreme——一個跨平臺的HTML5 JS框架，帶有豐富的JavaScript圖表組件。

下載安裝

首先，下載DevExtreme試用版，安裝非常簡單，跟著向導幾步就可以完成。安裝好后會看到一個對話框，有一些在線文檔的鏈接，Demo的源代碼就在DevExtreme安裝文件中。在線圖表Demo讓人印象深刻，有50多種非常絢麗的圖表樣式，并且都有源代碼可以參考。

于是筆者首先嘗試了DevExtreme的圖表組件，準備為在線游戲網站 Twitch 創建一個簡單的跨平臺儀表盤。我的儀表盤app數據將查詢Twitch's REST API。

盡管我是在Visual Studio下用ASP.NET MVC創建儀表盤，但DevExtreme是一個JavaScript框架，所以它可以用于任何服務器端語言和IDE。

引用DevExtreme CDN

第一步是添加 DevExtreme charting JavaScript文件到網站上，驚喜的發現DevExtreme居然有一個CDN（內容分發網絡），提供了我需要的JavaScript文件。

<script type="text/javascript" src="//cdn3.devexpress.com/jslib/13.1.5/js/dx.chartjs.js"></script>

CDN會返回一個壓縮緩存響應，從而確保網站的性能不受影響。

創建圖表

DevExtreme的數據可視化組件包含線形、條形、面積圖、餅圖、圓形和線形儀表。在儀表盤主頁上，我準備創建一個餅圖，用于顯示Twitch上最流行的游戲。

$("#gamesChartContainer").dxPieChart({
    dataSource: [
        {
            game: "Test game 1",
            viewers: 50,
            channels: 1,
            image: "test-game-1.jpg"
        },
        {
            game: "Test game 1",
            viewers: 50,
            channels: 1,
            image: "test-game-1.jpg"
        }
    ],
    series: [
        {
            argumentField: "game",
            valueField: "viewers",
            label: {
                visible: true,
                connector: {
                    visible: true,
                    width: 1
                }
            }
        }
    ]
});

在你想要展現的元素上調用 dxPieChart。Options使用了一個簡單的JSON對象作為參數傳遞給圖表。

從Twitch.tv讀取數據

現在餅圖可以顯示靜態數據了，要顯示實時數據就要調用Twitch.tv's REST API。這個API支持JSONP，所以可以使用jQuery從JavaScript中直接調用服務。

var ds = [];
$.getJSON("//api.twitch.tv/kraken/games/top?callback=?", function (json) {
 
    for (var i = 0; i < json.top.length; i++) {
        ds.push({
            game: json.top[i].game.name,
            viewers: json.top[i].viewers,
            channels: json.top[i].channels,
            image: json.top[i].game.box.large
        });
    }
});

交互式圖表

DevExtreme 圖表組件有擴展選項可以響應客戶端事件。代碼：

tooltip: {
    enabled: true,
    customizeText: function () {
        var game = ds[this.point.index];
        return game.channels + ' streams, ' + game.viewers + ' viewers';
    }
},
pointClick: function (p) {
    var game = ds[p.index];
    $("#gameContainer").html("<img class='game-image' src='" + game.image + "'/>");
},

創建動態更新圖表

下面我將要創建一個面積圖，用于展示一個視頻游戲隨著時間推移所增加的瀏覽數。圖表開始的時候是沒有任何數據的，但每個數秒中就會調用一次 Twitch API ，并返回瀏覽數量，同時動態更新面積圖：

$("#streamChartContainer").dxChart({
    title: "Viewers",
    commonSeriesSettings: {
        type: "splineArea",
        argumentField: "date"
    },
    series: [
        { valueField: "viewers", name: "Viewers" }
    ],
    argumentAxis: { valueMarginsEnabled: false },
    legend: { visible: false },
    animation: { enabled: false }
});

注意在上面的代碼中沒有數據源，數據是從 Twitch API 中進行檢索的。

var dataSource = [];
 
function getStreamData() {
    $.getJSON("//api.twitch.tv/kraken/streams/" + name + "?callback=?", function (json) {
 
        var viewers = json.stream.viewers;
 
        dataSource.push({
            date: new Date(),
            viewers: viewers
        });
 
        $('#streamChartContainer').dxChart('option', 'dataSource', dataSource);
    });
}
 
setInterval(function () {
    getStreamData();
}, 5000);

面積圖：

總結

筆者發現，DevExtreme的圖表組件非常容易上手，還支持很多很強大的自定義功能。況且這個小小的應用程序還只是用到了DevExtreme的皮毛，還有很多更強大的功能等著大家去使用。

標簽：DevExpressJavaScript HTML5UI界面數據可視化