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

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

关注

评论

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

Nginx的反向代理与负载均衡--配置Nginx

Linux服务器开发

nginx 负载均衡 反向代理 后端 Linux服务器

CPU飙高问题排查

程序猿玄微子

架构师训练营第 1 期 - 第 10 周 - 学习总结

wgl

极客大学架构师训练营

《华为数据之道》读书笔记:第 6 章 面向“自助消费”的数据服务建设

方志

数据中台 数据仓库 数字化转型 数据治理

聊聊销售背后的策略

吴晨曦

创业 销售管理

Spring 源码学习 02:关于 Spring IoC 和 Bean 的概念

程序员小航

spring 源码 源码分析 ioc

《华为数据之道》读书笔记:第 8 章 打造“清洁数据”的质量综合管理能力

方志

数字化转型 数据质量管理

阿里内部“高并发通关秘籍”曝光,看完带给你独一无二的认知!

比伯

Java 编程 架构 面试 计算机

我是如何使计算提速>150倍的

白日梦想家

Python 代码优化 Numpy

今年最火的 Golang 云原生开源项目,可能就是它了!

孙健波

Kubernetes k8s OAM KubeVela CloudNative

一枚程序猿的MacBook M1详细体验报告

Zhendong

三万字无坑搭建基于Docker+K8S+GitLab/SVN+Jenkins+Harbor持续集成交付环境!!

冰河

Docker 云原生 k8s

现在Php、Java、Python横行霸道的市场,C++程序员们都在干什么呢?

ShenDu_Linux

c++ 程序员 编程语言 C语言 软件工程师

第六周作业

Griffenliu

免费下载O’Reilly出版社全新之作《建立机器学习流水线》

计算机与AI

学习

甲方日常 59

句子

工作 随笔杂谈 日常

使用 Go 实现 Async/Await 模式

Roc

channel goroutines Async Go 语言

苹果开始告别英特尔

罗燕珊

macOS Big Sur 芯片 苹果 MacBook 英特尔

第六周学习总结

Griffenliu

磁盘到底是怎样工作的?一文理解硬盘结构

Guanngxu

操作系统

Spock单元测试框架实战指南四 - 异常测试

Java老k

单元测试 spock

《华为数据之道》读书笔记:第 7章 打造“数字孪生”的数据全量感知能力

方志

数据中台 数字化转型

区块链政务系统开发解决方案

t13823115967

区块链+ 区块链开发落地 政务系统开发解决方案

【薪火计划】06 - 你推崇的领导方式是怎么样的?

AR7

管理

监控之美——监控系统选型分析及误区探讨

华章IT

运维 云原生 监控 Prometheus

5分钟学会6个阿里内部编程的方法

Java架构师迁哥

区块链开发落地,联盟链系统平台搭建

t13823115967

区块链 区块链开发落地 联盟链系统平台搭建

前嗅教你大数据:常见几种编码介绍

前嗅大数据

大数据 编码 编码指南

JVM调优不知道怎么回答,阿里总结四大模块,学不会就背过来

小Q

Java 学习 架构 面试 JVM

面试无忧:源码+实践,讲到MySQL调优的底层算法实现

小Q

Java 数据库 学习 面试 算法

二分发代码模板

小兵

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