Sencha发布移动HTML5图表库_JavaScript_Dio Synodinos

QCon 演讲火热征集中，快来分享技术实践与洞见！了解详情 



 写点什么

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

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

该库使用了 HTML5 的一些功能，如通过

在 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 有哪些技术对于这个项目起到了至关重要的作用？


	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: [...]
	}
	});


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

创作场景

Sencha 发布移动 HTML5 图表库

评论

更多内容推荐

推荐阅读

电子书

大厂实战PPT下载