使用 DevExtreme 在各处实现丰富的 HTML5 图表

移动设备的快速崛起为软件开发者创造了新的机会：随时随地可用的应用程序，但也带来了一些新的问题：我是否需要为每个平台制作一个网站，然后是一个单独的移动应用程序？

虽然 iOS、Android 和 Windows Phone 都使用不同的编程语言、框架和工具来开发原生应用程序，但跨平台的是 HTML 和 JavaScript。HTML5 移动应用程序不仅能让我们针对每个平台，还能复用传统网站开发的技能和知识。

在这篇博文中，我将介绍 DevExtreme，一个用于 Visual Studio 的跨平台 HTML JS 框架，特别是 DevExtreme 丰富的 JavaScript 图表控件。

安装和初步印象

DevExtreme 有一个外观精美的自定义安装程序，非常简单易用：选择试用安装，根据需要自定义安装位置，然后就完成了。

安装完成后，您将看到一个对话框，它充当开发人员开始使用 DevExtreme 的中心。可用的资源包括指向多个 在线演示、随 DevExtreme 一起安装的演示源代码以及全面的文档。

DevExtreme 数据可视化图库中的在线图表演示特别令人印象深刻。有超过 50 个图表及其源代码可用，这在我使用 DevExtreme 时提供了很大的帮助。

入门

为了试用 DevExtreme 的图表控件，我将为在线游戏流媒体网站 Twitch 创建一个简单的跨平台仪表板。我的仪表板应用程序将查询 Twitch 的 REST API 获取数据，并绘制正在流媒体的游戏和最受欢迎流媒体的观看者数量随时间的变化图表。

虽然我使用 ASP.NET MVC 和 Visual Studio 构建我的仪表板，但 DevExtreme 是一个 JavaScript 框架，可以与任何服务器端语言和 IDE 一起使用。

引用 DevExtreme CDN

第一步是将 DevExtreme 图表 JavaScript 文件添加到网站。幸运的是，DevExpress 提供了 CDN，托管了我们需要的 JavaScript 文件。

<script type="text/javascript" src="http://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。使用简单的 JSON 对象作为参数将选项传递给图表。

从 Twitch.tv 获取数据

现在饼图显示的是静态数据。为了获取一些真实世界的数据，我们将调用 Twitch.tv 的 REST API。因为他们的 API 支持 JSONP，我们可以使用 jQuery 直接从 JavaScript 调用服务。

var ds = [];
$.getJSON("https://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 和 pointClick 属性即可。

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("https://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);

每 5 秒，浏览器将轮询服务器以获取当前观看者，将计数和日期添加到数据集中，然后使用数据集作为参数更新图表。

总结

我发现 DevExtreme 中的图表控件设置速度快，易于使用，同时仍然提供了大量的自定义功能。

我的小型应用程序在这里几乎没有触及图表控件提供的表面，更不用说 DevExtreme 中包含的其他功能了。如果您正在寻找构建跨平台多设备应用程序，那么 DevExtreme 绝对值得一试。

点击此处下载 Twitch 仪表板应用程序源代码

材料连接披露：我免费收到了上面提到的一个或多个产品或服务，希望我能在我的博客上提及它。无论如何，我只推荐我个人使用并且相信我的读者会喜欢的产品或服务。我正在根据联邦贸易委员会的 16 CFR，第 255 部分进行披露：关于在广告中使用代言和推荐的指南。