半岛外围网上直营

移动设备的迅速发展为软件开发者们创造了新的机会，但同时也带来了新的问题：如何创建跨平台移动应用程序。经过搜寻，笔者决定尝试一下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界面数据可视化