提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
原创|对比评测|编辑:郝浩|2013-09-18 09:52:09.000|阅读 5361 次
概述:本文跟大家分享了初次体验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@pclwef.cn
文章转载自:慧都控件当您需要在 SWT 应用程序中显示 Web 内容时,通常有两种选择:内置浏览器小部件或像 JxBrowser 这样的商业选项?本文分析了两者之间的差异,并帮助您根据自己的需求选择合适的解决方案。
本文将介绍标准WPF DataGrid与DevExpress WPF GridControl之间的主要区别,希望能帮助大家选择正确的工具!
本文将介绍标准WPF DataGrid与DevExpress WPF GridControl之间的主要区别,希望能帮助大家选择正确的工具!
本文将详细评测Navicat的主要功能、用户体验以及其在数据库管理中的应用,希望能帮助到大家~
高性能HTML5/JavaScript开发框架,利用现代Web开发堆栈构建优异性能的应用程序。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢