本指南提供了使用的煎茶触摸2.1的抽奖及图表包的概述。这些软件包，可以在一个通用的方式来创建跨浏览器和跨设备的图形。
在过去的几个月中，平局和图表包已经通过的重构，现在他们直接集成到煎茶触摸2.1。这种重构主要集中在：
- 性能 -此版本的抽奖及图表包提供了一个显着的性能提升。
- 可维护性 -抽奖及图表功能已彻底分离。这将是更容易的修复bug和提供新的功能。
- 灵活性 -系列和精灵在这样一种方式，他们更容易进行定制，或延长。你可以写你自己的精灵类和属性定义，可以自动的动画和操作。
本指南涵盖以下主题：
- 绘制组件：A cross-browser/cross-device包，制订通用的图形和动画。
- 图表组件：A类定义图表容器，它提供了可视化数据的能力层次结构。
绘制组件
抽奖包是专为满足移动应用的图形渲染的发展需要，提供了一个多功能的工具，可以创建跨浏览器，跨设备的自定义图形和丰富的动画。抽奖包的性能和设计，通过大量的图表与低内存占用，实现丰富的用户交互。
抽奖包中包含的一个表面类（Ext.draw.Surface）底层的图形，抽象的实施，使创建任意形状的物体，称为精灵，或团体的精灵。精灵的相互作用，如触摸事件（自来水，刷卡等），同时也提供了丰富的动画样式属性，如形状，颜色，大小，等等。
表面类的底层实现是的HTML画布引擎。帆布的选择，因为程序的绘图与2D Canvas API在通常优于基于DOM的方法。
表面
您可以创建一个简单的绘图表面，而无需装载在所有图表包。创建工作的所有设备，这动画以及任意图形，这可能是有用的。例如，您可以创建一个互动地图，其中每个国家的美国是一个精灵，而不是一个简单的图像，它的元素是雪碧的信息图表。使用精灵，而不是图像，让网页更丰富的用户体验，包括互动性和动画。
正如您可能已经注意到，在上面的例子中，HIDPI显示检测到的像素速率将提高到适应的分辨率。请注意，这是透明的用户和开发者。中使用的表面是“像素”总是作为常见的HTML页面中的相同的尺寸，无论如果显示设备HIDPI。这些图表将不再是模糊的视网膜上的设备。
抽签包还支持SVG后端。只需设置“Ext.draw.engine.SVG”为您绘制组件的默认引擎，它的工作原理如预期。继续使用Canvas API绘制的后端程序和忘记，这一切都抽象为你。
精灵
精灵是一个绘图表面上呈现的对象。它们被添加到一个表面的GetItems（）集合。下面的例子包括一个精灵型 圈，一个半径为100和黄颜色（＃FF8），这将导致一个黄色的圆圈出现在左上角的表面。
/ /点击切换到“实时预览”按钮上面运行的例子。
在这个新版本的抽奖包精灵来表示自己的类。这使得它更容易对它们进行修改，也提高了性能。
此外，抽奖包进行了以下改进精灵：
- 属性定义 -创建自定义的精灵类型，你需要定义额外的属性，也可以改变
的setAttribute方法。您可以定义属性的数据类型，动画的插补方法，以及的回调函数调用后已更改的属性。 - 改性剂 -改性剂是装饰的原始属性。修饰符是链接在一起，就像一个管道小心地分离，使每个修改并不需要其他的知识，并且这些属性将被装饰虽然管道。你可以链和unchain的修饰符很容易和正确的精灵将会改变外观。
- 次最轻量级职业拳击手的实例化 -图包提供了标尺，以及在各种图表的标签。你可以注册任意精灵为模板的实例化精灵，将基本呈现相同的对象多次在不同的地方。
这些功能中的每一个是在随后的一节中描述。
除了圈类型，您可以使用其他的精灵类型。例如：
- 正确的 -创建一个矩形。您可以通过设置其
半径属性的圆角。 - 图像 -创建一个位图图像，将呈现在表面上。
- 路径 -创建任意形状的。这是最强大的原始精灵类型。SVG路径语法入门的教程，请参见。
与旧的抽奖包，属性定义的命名惯例符合，而不是HTML Canvas API在SVG API。但是，您仍然可以使用旧的命名惯例符合SVG API由于属性定义的别名机制。
此外，子画面可以使用下列属性的转化：
- scalingX -的缩放X因素。
- scalingY - Y因子缩放。
- scalingCenterX - X坐标的起源进行缩放。
空指中心的精灵。 - scalingCenterY - y坐标的起源进行缩放。
空指中心的精灵。 - rotationRads -以弧度为单位的顺时针方向旋转的角度。
- rotationCenterX -旋转中心的x坐标。
空指的子画面的中心。 - rotationCenterY -旋转中心的y坐标。
空指的子画面的中心。 - translationX - x方向上的翻译。
- translationY - y方向上的翻译。
我们不再存储变换对象的属性集，但您可以继续使用转换对象来设置这些属性。变换对象的定义兼容与老拉伸包。的变换将被执行的顺序的缩放，然后旋转，然后翻译。
设置任何上述变换属性后，的矩阵和inverseMatrix属性将被更新。在新的抽奖包，你也可以简单地设置矩阵的属性直接。你给的矩阵将被提取到上述属性保留一致性。
属性的定义和修改
煎茶触摸2.1画包还引入了一个机制，精灵的属性的定义以及精灵的修饰。他们是一个巨大的改进可维护性和性能。这些都是必要的，如果你要编写自己的精灵。让我们来仔细看看这些功能：
属性定义
属性定义，您可以定义自定义属性的自定义精灵类来执行“偷懒”的更新。属性定义的主要目的是，以定义数据是如何用于改变setAttributes方法被称为时的属性的一组内容。每个小精灵有一个成员叫ATTR（“设置属性”的精灵。）所有精灵-以及高速缓存-存储的属性集。这种架构刻意分开的“模型”（属性）从“视图”（sprite.）这样我们就可以共享相同的精灵显示一组不同的属性，这是轻量级的实例化的作品。
，作为以下（一个片段来自Ext.chart.series.sprite.Line），属性定义：
// Click at "Live Preview" button above to switch to runnable example.// Create draw component with a yellow circle in it("Ext.draw.Component",{ fullscreen:true, sprites:[{ type:'circle', fillStyle:'#ff8', strokeStyle:'black', lineWidth:3, radius:100, x:100, y:100}]}); 属性定义中定义一个类的定义的的inheritableStatics部分，他们将被自动继承通过类继承。也正因为它被定义为一个静态成员，管理机制，将创建只有一次，每类的对象。由于分离的属性和子画面，我们能够使用相同的属性的经理（Ext.draw.sprite.AttributeDefinition）来处理所有的相同类型的子画面。
在煎茶触摸配置系统比较类似的方式，可以定义属性定义的施放（称为处理器中的代码）和更新程序，但批量更新的处理器有更好的表现。例如，当你改变一个矩形的宽度和高度的精灵，它的缓存路径将被更新。抽签包批次更新，如果你设置了这两个属性在同一setAttributes呼叫，只需要计算一次这样的路径需要。施放的属性定义，或处理器，让您可以检查和归一化值，然后将它应用到的一组属性。由于名称可以使用预定义的处理器，这种做法是非常方便，大大提高了可维护性。属性的定义也可让您定义别名的属性，所以你可以使用旧的代码使用煎茶触摸1.0命名约定，没有一个巨大的兼容性影响。
修饰符
修饰符使您能够改变的一组属性。修饰符是一个适应的。一个精灵可以有一系列的修饰词是串联在一起的，处理一个属性集的内容。在这种方式中，改性剂是建立的过滤器，所得到的属性逐步像一个管道。例如，当你查询的价值属性集，高光修饰词改变某些属性是它的高亮显示的值，同样，每一帧动画修改生成的每个动画属性的当前值。
修饰符设计的独立工作能力。每次修改的模块化，提高了可维护性。此前，突出一个精灵与动画内的突出显示的代码，涉及约10相似，容易出错的代码行，每 次你想要做的伎俩。您需要使用不同的方式取决于它是否是在动画或突出一个精灵。在动画部分，你需要做同样的事情了。但是现在，使用修饰符，突出做的只有两行，仅需要设置突出显示的属性，将激活的亮点修改。的修饰符凸显了精灵的动画，而不需要知道的信息完全按预期。
改性剂是在这样一种方式，该属性的查询实际上是直接存在于JavaScript对象查询一个属性实施。控制修饰符的属性设置结构为原型链。
在setAttributes方法，你想的属性集称为“变更请求”。setAttributes将调用下推方法，对要求的修改链。改性剂，可以修改变更请求，负责通过变更请求时，通过连锁经营的必要（一个反例是，当修改的都知道，这一点不会有任何变化后，那么就可以停止下推）。其他变化时，会弹出一个返回值。修饰符也可以修改，在弹出的变化和/或地点的变化，其中的原型链中，它实际上应该被放置。
改性剂的实施是复杂的，可能是很难理解的。但在实践中，它的使用相当简单。在大多数情况下，你不需要知道的背后是什么，它只是工作。例如，您不需要开始更新或“开始”循环使用的动画修改。您只需设置的改性剂的持续时间，并随时更改属性的精灵，它会启动一个流畅的动画效果。
飞锤实例化的精灵
煎茶触摸2.1平局包的引入另一项增强功能，是一个功能叫做轻量级的实例化，提供了重要的性能改进。
新的图表包代表了很多视觉元素的图表作为“标记” - 轻量级的精灵分支的属性从单一的一套原型。这些标记共享相同的sprite对象。以这种方式，一个sprite定义用于呈现（因此，“查看”），而不是数据（因此，“模型”）的逻辑。创建数量庞大的小精灵，是一个重量级的操作，可以计算昂贵。相反，略有不同的对象的一组中，只有用于渲染的增量数据创建，这节省了显着的内存量。这种技术通常被称为“实例渲染”其他计算机图形领域中。在新的拉伸包一个“实例化雪碧”叉形实例是一个容器，并且使它们使用实例渲染。
图表包提供的“标记”在每一个图表类型。标记的一个子类的实例精灵叫做标记精灵的支持。标记和常规实例精灵之间的主要区别是，标记被附加到被称为“标记持有人”另一个Sprite。每当标记持有人绘制，标记精灵将收集信息的变化的情况下。而在此前的标志是只有一小部分的一个精灵的配置对象，在当前版本中，你可以使用你自己的模板，它可以是任何东西，可以出现在任何地方。
图表组件概述
图表包包括一个类层次结构提供数据可视化功能。这些措施包括系列，轴，相互作用和机制来实现标记和图例。本节简要介绍这些类是如何连接在一起，并在每个类中包含哪些功能。以下各节涵盖了特定的轴，串联和互动。
图表组件类
所有类型的图表组件的扩展的抽象图类，延伸Ext.draw.Component的。图表组件是容器管理系列和轴。它负责布局的系列和轴的大小被改变时每次。一个实现的抽象类必须覆盖performLayout的方法。例如，笛卡尔图表需要响应的轴和重新计算的一系列区域的厚度的变化。
在新的包中，有三种类型的图表：
- 笛卡尔图 -这个类用于在直角坐标系中的布局系列和轴。另一个名称
Ext.chart.Chart也用来指这一类。 - 极坐标图 -这个类用于OT的布局sereis和一个的polay坐标系统的坐标轴。
- 空间填充图 -这个类只是填补了一系列的组件的大小。无轴可以用在这种类型的图表。
一个图表组件管理：
- 轴 -这些都是通过
Ext.chart.series.Series访问，并代表所有轴的定义，并制定此可视化。这是一个混合的集合。 - 系列 -这些都是通过
Ext.chart.series.Series访问，并表示正在绘制的图表的所有系列。这可能是线，棒材，分散，等等。这也是一个混合收集。 - 相互作用 -这些都是直接操作系列和轴一定的触摸手势识别控制器。
- 联想存储 -这代表的图例信息收集系列。通常你可以将一个数据表，这家商店和自动更新的图例信息的变化。
图表组件代表触摸事件的图表，不同的领域，如轴，系列，等等。你可以听的“itemXXXX”事件上的图表组件，它会从已注册的系列事件委托：
chart.on({ 'itemtap':function(series, item, e){ alert('An item from '+ series.id +' has been tapped!');}}); 轴
在煎茶触摸2.1中图包，我们提供了一个的类Ext.chart.axis.Axis代表各种轴。轴对象的工作方式不同根据停靠轴的位置。对接有4种类型：
- 左/右 -轴是垂直的。
- 顶部/底部 -将轴水平。
- 径向 -径向轴将被放置在一个极坐标图，以确定当前的半径。
- 角 -轴将放在对极坐标图的边界，以确定目前的角度。
轴有助于一系列数据值映射到坐标。他们必然需要代表的数据类型。有轴的类信息（Ext.chart.axis.Category）和定量信息（Ext.chart.axis.Numeric）。时间的轴线（Ext.chart.axis.Time）能够在一个特定的时间内和更新与平滑的动画的信息的呈现。
类文件的具体信息，对每个轴的轴。在随后的章节本指南所包含的一系列例子，可提供轴配置的例子。
您可以启用网格连接到一个轴对象。网格放置在垂直于轴线的下面绘制任何系列。网格可以风格样式对象的轴配置的电网领域。通过电网领域一个简单的真实价值，将绘制网格，默认的样式。网格样式收到两个特殊领域，甚至和奇数偶数和奇数格，以指定其他样式。您还可以设置将FillStyle的网格，它会提供两个电网之间的填充。
前面所示的配置产生轻微的左轴刻度线系列，如下图所示：
系列
系列是一个抽象类，具体的可视化，如Line系列，酒吧系列，或散点图系列的扩展。
该系列类本身包含的代码，是共同所有的这些系列中，如事件处理，高亮，标记，标签等。
以下各节描述的系列类型。它也显示了一个完整系列的配置例子，包括图表，Axis和系列选项。对于更具体的信息，请参阅系列文件。
区域
区域系列创建一个堆积面积图，它是通常用于显示多个凝集层的信息。其他系列一样，必须加入到该地区系列系列配置的图表。
您可以指定多个y字段，如区域系列和酒吧系列堆叠系列。
一个典型的配置对象区域系列看起来像什么，你可以看到在代码中的演示：
线
该生产线系列创建一个折线图，条形图显示分类的数字的数据显示进展或回归的替代品。下面的例子显示了一个典型的配置对象的线系列：
馅饼
的饼系列创建一个饼图，一个伟大的方式来显示定量信息的类别，也有作为一个整体的意义，例如，某一年的12个月的。
需要注意的是，除非以前所有的系列，馅饼系列雷达系列是有极性的系列。你不能使用一个直角坐标图。相反，它们必须被包含在一个极坐标图。
一个饼图的例子为：
雷达
雷达系列创建一个雷达图，一个伟大的方式来显示不同的定量值比较有限的一类。给出一个例子为：