写点什么

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:083685
用户头像

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

关注

评论

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

小程序自定义组件开发

程序员海军

小程序 三周年连更

阿里云张献涛:云原生计算基础设施助力汽车行业数字化升级

云布道师

云计算

PageObject设计模式

测吧(北京)科技有限公司

测试

io_uring的10个技术点

linux大本营

高并发 异步 零拷贝 io_uring

OpenCV图像模糊操作(1) | 社区征文

A小调协奏曲

OpenCV C++ 三周年连更

薪资结构重铸: Zebec将业务范围扩大到Web2薪资管理领域

股市老人

Go HTTP 调用

陈明勇

Go golang HTTP 三周年连更

OpenResty接口的详细讲解

linux大本营

负载均衡 反向代理 openresty 网关 HTTP服务

借由Net5.5G,看到运营商的新沧海

脑极体

5.5G

程序踩内存后,应该怎么排查

linux大本营

进程 内存管理 内存泄漏 C++

C++如何拿到线程池的返回值

linux大本营

线程池 C++

lwip_recv_tcp阻塞读取数据代码

linux大本营

TCP 阻塞队列

Java EE应用服务器的事务管理

mazhen

Java transaction JavaEE

火山引擎边缘云,助力业务敏捷创新

火山引擎边缘云

CDN 边缘计算 火山引擎 边缘云

怎么用systemd进行进程守护

linux大本营

Linux 进程 守护进程

一键生成通用的web服务(gin)完整项目代码,开发效率至少提升2倍

vison

golang Web gin框架 代码自动生成

大型商业银行的超级App是如何“组装”而成?

Onegun

超级app 超级应用

Django笔记十二之defer、only指定返回字段

Hunter熊

Python django defer only

AI能训练出符合“核心价值观”的人工智能吗?

FN0

人工智能 ChatGPT Claude

MobTech 秒验|守护账户安全

MobTech袤博科技

中国年轻人阅读洞察2023

易观分析

年轻人 阅读

WebIntents 翻身战,操作系统实现无缝集成的王牌

鼎道智联

AI

c语言实现timer的10个技术点

linux大本营

进程 定时器, Timer 文件描述符

挑战 30 天学完 Python:Day10 循环语句

MegaQi

Python3 挑战30天学完Python 三周年连更

生活中的不确定性,如何应对?

Jack

用户痛点与根因识别:解锁企业数字化转型成功的关键

L3C老司机

OceanBase 4.1解读:我们想给用户一个开箱即用的OceanBase部署运维工具

OceanBase 数据库

数据库 oceanbase

2023-04-20:有一堆石头,用整数数组 stones 表示 其中 stones[i] 表示第 i 块石头的重量。 每一回合,从中选出任意两块石头,然后将它们一起粉碎 假设石头的重量分别为 x 和

福大大架构师每日一题

golang 算法 rust 福大大

算法题每日一练:组合总和 II

知心宝贝

数据结构 算法 前端 后端 三周年连更

xnginx在安全网关的应用场景

linux大本营

openresty 网关 web服务器

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