写点什么

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

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

关注

评论

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

备战一年半,我们让最火的开源网关上了云

API7.ai 技术团队

api 网关 APISIX SaaS 平台

SVN vs Git 不是技术之争,而是生态之争

极狐GitLab

git svn DevOps 版本控制 极狐GitLab

【图解】白嫖阿里云价值3.3万的TiDB

TiDB 社区干货传送门

实践案例 管理与运维 扩/缩容 6.x 实践

该如何正确的中断一个线程的执行

华为云开发者联盟

开发 华为云 华为云开发者联盟 企业号 3 月 PK 榜

一次不兼容ddl导致的cdc问题

TiDB 社区干货传送门

故障排查/诊断

【2.24-3.3】写作社区优秀技术博文一览

InfoQ写作社区官方

热门活动 优质创作周报

还在头疼你的API,送你一个保姆级的API设计管理平台

华为云开发者联盟

云计算 开发 华为云 华为云开发者联盟 企业号 3 月 PK 榜

吹爆Alibaba自研的Spring全能笔记,建议人手一份!

小小怪下士

Java spring springmvc springboot

极狐GitLab DevSecOps 为企业许可证安全合规保驾护航

极狐GitLab

许可证 DevSecOps 极狐GitLab 安全左移 安全合规

2023年2月中国网约车领域月度观察

易观分析

网约车 出行服务

火山引擎DataTester:A/B实验如何实现人群智能化定向?

字节跳动数据平台

大数据 AB testing实战

软件开发,如何同时保证效率和质量?

SoFlu软件机器人

TIDB云数据库试用体验

TiDB 社区干货传送门

安装 & 部署 扩/缩容 6.x 实践

云数据库 TiDB 试用体验总结

TiDB 社区干货传送门

版本测评

NFTScan x TiDB丨一栈式 HTAP 数据库为 Web3 数据服务提供毫秒级多维查询

TiDB 社区干货传送门

BSN-DDC基础网络详解(四):资金账户充值

BSN研习社

体验ChatGPT后,陷入沉思...

Openlab_cosmoplat

开源 行业趋势 ChatGPT

坚如磐石:TiDB 基于时间点的恢复(PiTR)特性优化之路丨6.5 新特性解析

PingCAP

TiDB

百度点石隐私计算平台与FATE开源框架实现互联互通

百度安全

人工智能 开源 联邦学习 开发

AI开发实践丨客流分析之未佩戴口罩识别

华为云开发者联盟

人工智能 华为云 华为云开发者联盟 企业号 3 月 PK 榜

云数据库TiDB试用初体验

TiDB 社区干货传送门

6.x 实践

天下武功唯快不破:TiDB 在线 DDL 性能提升 10 倍

TiDB 社区干货传送门

云数据库 TiDB 体验

TiDB 社区干货传送门

社区活动 6.x 实践

文件传输协议的五种安全文件传输替代方案

镭速

1.基于Label studio的训练数据标注指南:信息抽取(实体关系抽取)、文本分类等

汀丶人工智能

数据标注 关系抽取 labelstudio 实体抽取

国内“谁”能实现chatgpt,对MOSS、ChatYuan给出关键技术简评,一文带你深入了解宏观技术路线| 社区征文

汀丶人工智能

ChatGPT

爱奇艺统一实时计算平台建设

Apache Flink

大数据 flink 实时计算

基于Python+uiautomation的windowsGUI自动化测试概述

Python 自动化测试 unittest WindowsGUI UIaotumaiton

如何通过C#和VB.NET压缩PDF文档

Geek_249eec

C# .net PDF VB.NET

国内“谁”能实现chatgpt,一文带你深入了解宏观技术路线| 社区征文

汀丶人工智能

ChatGPT

政企专属的IM即时通讯平台,促进团队安全沟通与协作

WorkPlus

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