QCon 演讲火热征集中,快来分享技术实践与洞见! 了解详情
写点什么

Sencha 发布移动 HTML5 图表库

  • 2011-08-15
  • 本文字数:2058 字

    阅读完需:约 7 分钟

近日,Sencha 发布了 Sencha Touch Charts :一套使用 HTML5 构建并针对移动设备优化过的富客户端、交互式的图表组件的 Beta 版。作为 Sencha Touch 的一部分,开发者可以使用该库构建针对 Apple iOS、Android 以及 BlackBerry 设备的交互式雷达、柱状、直线、堆叠以及饼状图。

Sencha Touch Charts 利用了移动设备上的硬件加速来优化性能,还支持自然手势,这一切简化了复杂数据集的显示。这些手势包括捏拉缩放、数据的点击放大以及轻拍展现等。

该库使用了 HTML5 的一些功能,如通过元素进行绘制和使用 CSS3 编写样式、能够在当今移动 Web 浏览器上发布富用户体验的应用。它构建在 Sencha Touch 之上,这是一个移动 Web 应用框架,目前可以免费用于评估目的。

在 Sencha Touch Charts 中,组件的定义及其交互是通过 JavaScript 实现的:

复制代码
var chartPanel = new Ext.chart.Panel({
title: 'Pie Chart',
fullscreen: true,
dockedItems: [...],
items: {
cls: 'pie1',
theme: 'Demo',
store: store1,
shadow: false,
animate: true,
insetPadding: 20,
legend: {
position: {
portrait: 'bottom',
landscape: 'left'
}
},
interactions: [
{
type: 'reset',
confirm: true
},
{
type: 'rotate'
},
{
type: 'iteminfo',
gesture: 'taphold',
listeners: {...}
},
{
type: 'piegrouping',
//snapWhileDragging: true,
onSelectionChange: function(me, items) {
...
}
}
],
series: [...]
}
});

样式是通过 SASS/SCSS 实现的,SASS/SCSS 会被编译为 CSS3:

复制代码
...
chart[cls=piecombo1] {
padding: 20;
series {
label {
display: rotate;
contrast: true;
font: 14px Arial;
}
}
}
...

在 Beta 版期间,有一些问题需要解决,同时还会有一些变化:

  • Radar Axis 目前在 BlackBerry 上无法显示属性
  • 在 iPad 上过度放大会导致一个显示问题
  • 交互的默认手势仍旧在审核当中,在正式版发布前可能会有一些变化
  • SASS 语法仍旧在审核当中,在正式版发布前可能会有一些变化
  • 其他

InfoQ 有幸联系到了 Sencha 的代表以深入了解关于该新产品的一些细节信息:

InfoQ:你提到为了改进性能,你需要在核心绘图系统中实现一个 HTML5 Canvas 引擎。能否向广大读者透露一些关于该引擎的一些技术方面的细节信息?

Sencha:在 HTML5 浏览器中有几种绘图技术可供选择,分别是 SVG 与 Canvas。我们之所以为移动设备选择 Canvas 是出于两个主要原因。首先,Honeycomb 之前的 Android 系统并不支持 SVG。这样,为了支持市场中成千上万的 Android 2.x 设备,我们就没法使用 SVG 了。其次,根据我们的测试,Canvas 在所有的移动设备(手机与平板电脑)上具有最佳的通用性能表现。

InfoQ:Sencha Touch Charts 与其他产品如 Sencha Touch 或 Ext JS 4 之间有何联系呢?

Sencha:Sencha Touch Charts 是免费 Sencha Touch 的一个付费附加组件。Sencha Touch 是我们的移动 HTML5 框架,而 Ext JS 则是我们的桌面框架。我们尚未宣布最终的定价——请大家拭目以待!

InfoQ:几年前,甚至连简单的桌面图表也很难实现出跨浏览器版本。你认为 HTML5 有哪些技术对于这个项目起到了至关重要的作用?

Sencha:一般来说,对于图表与数据可视化来说,最大的发展在于浏览器中绘图系统的巨大改进。传统上,浏览器擅长于文本与文档布局,但借助于 Canvas 与 SVG,浏览器现在可以实现之前需要借助于 Flash 或 Sliverlight 才能实现的一些功能。因为浏览器内嵌了这些能力,因此你可以使用他们取代插件了。

InfoQ:相比于桌面浏览器来说,在与移动浏览器如移动 WebKit 打交道的过程中,你遇到的最大挑战是什么呢?

Sencha:我们在与移动设备打交道的过程中所遇到的最大挑战与任何移动开发者一样,那就是性能。我们将性能划分为两个坐标轴:首先就是原生的计算机 /CPU 能量。我们付出了巨大的努力来确保不会加重 CPU 的负担,这样图表就能以最快的速度响应。其次就是内存。移动设备的 RAM 大小很有限,这样我们做了很多额外的工作来确保在设备现有内存的情况下能够让图表平顺地显示。

InfoQ:你们为何选择了 SASS 语法来编写样式而非 SCSS 语法或普通的 CSS3?

Sencha:SASS 与 SCSS 是一回事。SCSS 只不过是 SASS v3 中新语法的名字而已。之所以使用它而没有选择 CSS3 在于它向 CSS 中添加了很多类似于元编程的功能。比如说,你可以说按钮的颜色比背景色淡 20%,并使用变量与函数来驱动应用的全部样式——而不必手工编写全部样式。

InfoQ:能否谈谈跨浏览器的交互式图表组件?

Sencha:现在的 Touch Charts 可用于各种移动浏览器平台。你可以在众多不同的移动 OS 数据集上通过捏拉、摇动、点击等方式来查看数据。

InfoQ:Touch Charts 目前还是 Beta 版,何时打算发布首个正式版呢?

Sencha:首个正式版(v1)将于下个月发布。

感兴趣的读者可以在 InfoQ 上找到关于 Sencha Touch Mobile ExtJS 的更多信息!

查看英文原文: Mobile HTML5 Charts by Sencha

2011-08-15 09:083721
用户头像

发布了 88 篇内容, 共 264.7 次阅读, 收获喜欢 8 次。

关注

评论

发布
暂无评论
发现更多内容

专注二次元的 Niji 模型上线独立 APP;华为整体销量已超越苹果丨 RTE 开发者日报 Vol.68

声网

深耕全面预算管理 拥抱企业数字未来

智达方通

自动化 全面预算管理 全面预算管理系统

李彦宏,AI原生应用的秋收时刻

脑极体

AI

AI大模型下一步怎么走?百度携AI原生应用抢先作答

陈橘又青

文心一言

简单好用的pdf编辑工具 PDF Expert 最新中文版

胖墩儿不胖y

PDF 编辑pdf pdf处理工具

Mac专业级的PDF编辑和管理软件:Acrobat Pro DC 2023

展初云

Mac软件 PDF编辑 PDF管理

程序员常用的19款办公软件和开发工具推荐!

彭宏豪95

效率工具 开发工具 科技 办公软件 软件开发工具

塑造未来经济的游戏规则改变者:去中心化金融交易所的发展

区块链软件开发推广运营

交易所开发 dapp开发 区块链开发 链游开发 NFT开发

RazorSQL for Mac(数据库查询工具) v10.4.6完整激活版

mac

苹果mac Windows软件 RazorSQL SQL数据库管理工具

在 Windows 平台下安装与配置 MySQL 5.7.36

小齐写代码

Sync Folders Pro for Mac(文件夹数据同步工具) v4.6.7永久激活版

mac

苹果mac Windows软件 Sync Folders Pro 文件夹同步工具

Bonree ONE 秋季产品发布会上新功能提前剧透!

博睿数据

可观测性 智能运维

sip中继的内容介绍

cts喜友科技

SIP sip中继

宁夏企业过等保选哪家测评机构好?选哪家堡垒机?

行云管家

等保 等级保护 宁夏

cad设计绘图工具:AutoCAD 2024 for Mac

展初云

设计 Mac软件 cad AutoCAD 2024下载

博睿数据获评2023中国智能运维领域“最具商业合作价值企业”

博睿数据

可观测平台 智能运维AIOps

IPQ9554 with QCN6274 Solution forCommercial Applications|Wi-Fi7

wallyslilly

ipq9554 qcn6274

文件比较对比软件中的佼佼者Beyond Compare 4 for Mac

展初云

Mac Mac软件 文件比较对比工具

HTX 与 Zebec  Protocol 展开深度合作,并将以质押者的身份参与 ZBC Staking

西柚子

浅谈分布式事务及解决方案 | 京东物流技术团队

京东科技开发者

数据库 分布式 分布式事务 事务 企业号10月PK榜

记录TritonServer部署多模型到多GPU踩坑 | 京东云技术团队

京东科技开发者

人工智能 gpu 企业号10月PK榜

SAAS堡垒机安全吗?为什么性价比那么高?

行云管家

云计算 软件 SaaS SAAS软件

「我在淘天做技术」一篇文章告诉你商品团队在做哪些有意思的事?

阿里技术

校园招聘 商品域

iOS代码混淆和加固技术详解

雪奈椰子

当 BACnet 遇上 IoT,你将体验到不一样的大楼

华为云开发者联盟

云计算 后端 物联网 华为云 华为云开发者联盟

Java基础面试题【Spring】一

派大星

Java 面试题

如何将电脑上的“小电影”隐藏为一张图片?这波操作绝了!!

冰河

程序员 图片 视频创作 知识分享 小视频

TDengine 资深研发整理:基于 SpringBoot 多语言实现 API 返回消息国际化

TDengine

时序数据库 ​TDengine

DBeaverUE for Mac旗舰激活版 数据库管理软件

iMac小白

DBeaverUE下载 DBeaverUE破解版

Mac电脑网页视频处理工具iTubeGo中文免激活版

mac大玩家j

视频处理工具 视频编辑器 在线视频工具

Sencha发布移动HTML5图表库_JavaScript_Dio Synodinos_InfoQ精选文章