写点什么

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

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

关注

评论

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

将数据库系统实践转向 AI:使用生成式 AI 创建高效的开发和维护实践

哦豁完蛋了

AI Codec

云手机:海外社媒运营必备工具

Ogcloud

云手机 海外云手机 云手机海外版 云手机群控 海外社媒运营

最新进展!Intel 18A产品,成功点亮!

E科讯

天翼云HBlock有奖众测活动 在线邀请存储Geek玩转轻量存储

InfoQ写作社区官方

热门活动 礼品 活动推荐 天翼云

继“蓝屏”事件之后,微软再次出现全球性宕机

我再BUG界嘎嘎乱杀

黑客 网络安全 安全 DDoS 网安

在国内怎么运营TikTok?试试云手机!

Ogcloud

云手机 海外云手机 tiktok云手机 云手机海外版 海外云手机推荐

解锁亚马逊商品数据:API获取商品列表信息

tbapi

亚马逊API 亚马逊商品数据采集 亚马逊商品列表接口

一文全面了解HPC高性能计算平台是什么、怎么选型?高性能计算平台CHPC 都能做什么?

XxinQi

构建数据中台,引领零售业数字化转型的最佳实践

数造万象

数据中台 零售 数字化 数据智能 实践案例

JavaScript 字符串方法,让开发者生活更轻松

伤感汤姆布利柏

打卡智能中国(八):“水花消失术”的AI秘籍

脑极体

AI

安全性和合规性:保障企业数据的安全

可观测技术

数据安全 数据合规

2024 年 7 月区块链游戏研报:市场波动与数据分化的挑战与机遇

Footprint Analytics

链游

腾讯云大数据 TBDS 参编信通院《数据库发展研究报告》,引领数据湖仓创新

腾讯云大数据

TBDS

最佳实践:解读GaussDB(DWS) 统计信息自动收集方案

华为云开发者联盟

大数据 GaussDB(DWS) 企业号 8 月 PK 榜 2024企业号8月pk 实时查询

官宣|Apache Flink 1.20 发布公告

Apache Flink

flink 实时计算 官宣

观测云:多云架构下的监控革新与效能提升

可观测技术

监控 多云

润开鸿“龙芯+OpenHarmony”开发平台DAYU431先锋派新品发布

坚果

OpenHarmony 润开鸿

免费一站式搭建企业云上数据库与BI 数据可视化分析平台

XxinQi

Prometheus Exporter 在观测云中的应用与优势

可观测技术

#Prometheus

Grafana 与观测云:无缝集成的监控可视化体验

可观测技术

数据可视化

从困境到突破,EasyMR 集群迁移助力大数据底座信创国产化

袋鼠云数栈

集群架构 大数据存储 大数据计算与存储 大数据计算引擎 集群迁移

私网环境下如何使用云效流水线进行 CI/CD?

阿里云云效

阿里云 云原生 云效

数据复盘“黑色星期一”:加密市场震荡,代币表现如何?

区块链软件开发推广运营

dapp开发 区块链开发 链游开发 NFT开发 公链开发

NFTScan 正式上线 Gravity NFTScan 浏览器和 NFT API 数据服务

NFT Research

NFT NFTScan

ai做ppt的工具哪个好?盘点8个好用的AIPPT生成软件!

彭宏豪95

效率工具 职场 PPT 办公软件 AI生成PPT

腾讯云 ES 之日志分析新范式:10 倍性价比提升!基于 ES Serverless 完成审计日志溯源

腾讯云大数据

ES

Java RMI技术详解与案例分析

不在线第一只蜗牛

Java

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