原創|對比評測|編輯:郝浩|2013-09-18 09:52:09.000|閱讀 5414 次
概述:本文跟大家分享了初次體驗DevExpress跨平臺的HTML5 JS框架 DevExtreme的過程
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
移動設備的迅速發展為軟件開發者們創造了新的機會,但同時也帶來了新的問題:如何創建跨平臺移動應用程序。經過搜尋,筆者決定嘗試一下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 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'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界面數據可視化
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都控件