Sencha-组件-Chart(图表)（官网文档翻译17）

本指南提供了使用的煎茶触摸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路径语法。这是最强大的原始精灵类型。SVG路径语法入门的教程，请参见Mozilla开发者网络。

与旧的抽奖包，属性定义的命名惯例符合，而不是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 itExt.create("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命名约定，没有一个巨大的兼容性影响。

修饰符

修饰符使您能够改变的一组属性。修饰符是一个适应的Decorator模式。一个精灵可以有一系列的修饰词是串联在一起的，处理一个属性集的内容。在这种方式中，改性剂是建立的过滤器，所得到的属性逐步像一个管道。例如，当你查询的价值属性集，高光修饰词改变某些属性是它的高亮显示的值，同样，每一帧动画修改生成的每个动画属性的当前值。

修饰符设计的独立工作能力。每次修改的模块化，提高了可维护性。此前，突出一个精灵与动画内的突出显示的代码，涉及约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的网格，它会提供两个电网之间的填充。

前面所示的配置产生轻微的左轴刻度线系列，如下图所示：

Ext.create("Ext.chart.Chart",{fullscreen:true,store:{fields:['name','value'],data:[{ name:'Jan', value:110},{ name:'Feb', value:252},{ name:'Mar', value:952},{ name:'Apr', value:325},{ name:'May', value:123},{ name:'Jun', value:52},{ name:'Jul', value:1122},{ name:'Aug', value:35},{ name:'Sep', value:172},{ name:'Oct', value:752},{ name:'Nov', value:810},{ name:'Dec', value:410}]},animate:false,interactions:['panzoom'],series:[{type:'line',xField:'name',yField:'value',style:{fill:'rgba(0,40,170,0.3)',stroke:'black'}}],axes:[{type:'numeric',position:'left',title:'Number of Hits',minimum:0,maximum:1200,grid:{fill:'#efefef',odd:{fill:'#cdcdcd'},even:{lineWidth:3}}},{type:'category',position:'bottom',title:'Month of the Year',grid:true,style:{estStepSize:1}}]});

系列

系列是一个抽象类，具体的可视化，如Line系列，酒吧系列，或散点图系列的扩展。

该系列类本身包含的代码，是共同所有的这些系列中，如事件处理，高亮，标记，标签等。

以下各节描述的系列类型。它也显示了一个完整系列的配置例子，包括图表，Axis和系列选项。对于更具体的信息，请参阅系列文件。

区域

区域系列创建一个堆积面积图，它是通常用于显示多个凝集层的信息。其他系列一样，必须加入到该地区系列系列配置的图表。

您可以指定多个y字段，如区域系列和酒吧系列堆叠系列。

一个典型的配置对象区域系列看起来像什么，你可以看到在代码中的演示：

Ext.create("Ext.chart.CartesianChart",{fullscreen:true,background:'white',store:{fields:['name','g1','g2','g3','g4','g5'],data:[{"name":"Item-0","g1":18.34,"g2":0.04,"g3":22.35,"g4":10.50,"g5":18.42},{"name":"Item-1","g1":2.67,"g2":14.87,"g3":0.41,"g4":19.15,"g5":1.64},{"name":"Item-2","g1":1.90,"g2":5.72,"g3":14.80,"g4":38.93,"g5":2.77},{"name":"Item-3","g1":21.37,"g2":2.13,"g3":12.98,"g4":63.82,"g5":18.85},{"name":"Item-4","g1":2.67,"g2":8.53,"g3":4.44,"g4":87.39,"g5":27.23},{"name":"Item-5","g1":18.22,"g2":4.62,"g3":8.26,"g4":97.63,"g5":34.37},{"name":"Item-6","g1":28.51,"g2":12.43,"g3":28.67,"g4":108.29,"g5":47.84},{"name":"Item-7","g1":34.43,"g2":4.40,"g3":9.89,"g4":127.27,"g5":36.90},{"name":"Item-8","g1":21.65,"g2":13.87,"g3":5.44,"g4":112.49,"g5":16.29},{"name":"Item-9","g1":12.98,"g2":35.44,"g3":16.37,"g4":135.54,"g5":16.78},{"name":"Item-10","g1":22.96,"g2":38.70,"g3":18.15,"g4":114.96,"g5":8.51},{"name":"Item-11","g1":0.49,"g2":51.90,"g3":19.98,"g4":95.00,"g5":9.69},{"name":"Item-12","g1":20.87,"g2":62.07,"g3":25.96,"g4":87.79,"g5":3.18},{"name":"Item-13","g1":25.10,"g2":78.46,"g3":26.04,"g4":91.54,"g5":12.41},{"name":"Item-14","g1":16.87,"g2":56.80,"g3":1.39,"g4":71.78,"g5":16.54}]},interactions:{type:'panzoom'},legend:{position:'right',width:80},axes:[{type:'numeric',position:'left',grid:true},{type:'category',position:'bottom',visibleRange:[0,0.25]}],series:[{type:'area',xField:'name',yField:['g1','g2','g3','g4','g5'],title:['G1','G2','G3','G4','G5'],style:{stroke:'black',fillOpacity:0.8},//cycles the red, green, and blue fill mode over the g1, g2,..., g5 items//cycles the black and white strokes lines over the g1, g2,..., g5 items//substyle parameters also override style parameterssubStyle:{fill:["#115fa6","#94ae0a","#a61120","#ff8809","#ffd13e","#a61187","#24ad9a","#7c7474","#a66111"]}}]});

线

该生产线系列创建一个折线图，条形图显示分类的数字的数据显示进展或回归的替代品。下面的例子显示了一个典型的配置对象的线系列：

Ext.create("Ext.chart.CartesianChart",{fullscreen:true,background:'white',flipXY:true,store:{fields:['name','g1','g2','g3','g4','g5'],data:[{"name":"Item-0","g1":18.34,"g2":0.04,"g3":22.35,"g4":10.50,"g5":18.42},{"name":"Item-1","g1":2.67,"g2":14.87,"g3":0.41,"g4":19.15,"g5":1.64},{"name":"Item-2","g1":1.90,"g2":5.72,"g3":14.80,"g4":38.93,"g5":2.77},{"name":"Item-3","g1":21.37,"g2":2.13,"g3":12.98,"g4":63.82,"g5":18.85},{"name":"Item-4","g1":2.67,"g2":8.53,"g3":4.44,"g4":87.39,"g5":27.23},{"name":"Item-5","g1":18.22,"g2":4.62,"g3":8.26,"g4":97.63,"g5":34.37},{"name":"Item-6","g1":28.51,"g2":12.43,"g3":28.67,"g4":108.29,"g5":47.84},{"name":"Item-7","g1":34.43,"g2":4.40,"g3":9.89,"g4":127.27,"g5":36.90},{"name":"Item-8","g1":21.65,"g2":13.87,"g3":5.44,"g4":112.49,"g5":16.29},{"name":"Item-9","g1":12.98,"g2":35.44,"g3":16.37,"g4":135.54,"g5":16.78},{"name":"Item-10","g1":22.96,"g2":38.70,"g3":18.15,"g4":114.96,"g5":8.51},{"name":"Item-11","g1":0.49,"g2":51.90,"g3":19.98,"g4":95.00,"g5":9.69},{"name":"Item-12","g1":20.87,"g2":62.07,"g3":25.96,"g4":87.79,"g5":3.18},{"name":"Item-13","g1":25.10,"g2":78.46,"g3":26.04,"g4":91.54,"g5":12.41},{"name":"Item-14","g1":16.87,"g2":56.80,"g3":1.39,"g4":71.78,"g5":16.54}]},interactions:['panzoom'],//set legend configurationlegend:{position:'right',width:80},//define the x and y-axis configuration.axes:[{type:'numeric',position:'bottom',grid:true,minimum:0},{type:'category',position:'left'}],//define the actual bar series.series:[{type:'bar',xField:'name',yField:['g1','g2','g3','g4','g5'],axis:'bottom',highlight:true,showInLegend:true,style:{stroke:'rgb(40,40,40)',maxBarWidth:30},// Cycles the red, green, and blue fill mode over the 2008, 2009,.., 2011, 2012 items// subStyle parameters also override style parameterssubStyle:{fill:["#115fa6","#94ae0a","#a61120","#ff8809","#ffd13e","#a61187","#24ad9a","#7c7474","#a66111"]}}]});

馅饼

的饼系列创建一个饼图，一个伟大的方式来显示定量信息的类别，也有作为一个整体的意义，例如，某一年的12个月的。

需要注意的是，除非以前所有的系列，馅饼系列雷达系列是有极性的系列。你不能使用一个直角坐标图。相反，它们必须被包含在一个极坐标图。

一个饼图的例子为：

Ext.create('Ext.chart.PolarChart',{background:'white',store:{fields:['name','g1','g2','g3','g4','g5'],data:[{"name":"Item-0","g1":18.34,"g2":0.04,"g3":22.35,"g4":10.50,"g5":18.42},{"name":"Item-1","g1":2.67,"g2":14.87,"g3":0.41,"g4":19.15,"g5":1.64},{"name":"Item-2","g1":1.90,"g2":5.72,"g3":14.80,"g4":38.93,"g5":2.77},{"name":"Item-3","g1":21.37,"g2":2.13,"g3":12.98,"g4":63.82,"g5":18.85},{"name":"Item-4","g1":2.67,"g2":8.53,"g3":4.44,"g4":87.39,"g5":27.23},{"name":"Item-5","g1":18.22,"g2":4.62,"g3":8.26,"g4":97.63,"g5":34.37}]},fullscreen:true,innerPadding:35,//bind the chart to a store with the following structureinteractions:['rotate'],colors:["#115fa6","#94ae0a","#a61120","#ff8809","#ffd13e","#a61187","#24ad9a","#7c7474","#a66111"],//configure the legend.legend:{position:'right',width:100},//describe the actual pie series.series:[{type:'pie',xField:'g1',labelField:'name',donut:25,style:{miterLimit:10,lineCap:'miter',lineWidth:2}}]});

雷达

雷达系列创建一个雷达图，一个伟大的方式来显示不同的定量值比较有限的一类。给出一个例子为：

// Create a panel to put the chart in.Ext.create('Ext.chart.PolarChart',{fullscreen:true,innerPadding:10,store:{fields:['name','g1','g2','g3','g4','g5'],data:[{"name":"0","g1":18.34,"g2":0.04,"g3":22.35,"g4":10.50,"g5":18.42},{"name":"1","g1":2.67,"g2":14.87,"g3":0.41,"g4":19.15,"g5":1.64},{"name":"2","g1":1.90,"g2":5.72,"g3":14.80,"g4":38.93,"g5":2.77},{"name":"3","g1":21.37,"g2":2.13,"g3":12.98,"g4":63.82,"g5":18.85},{"name":"4","g1":2.67,"g2":8.53,"g3":4.44,"g4":87.39,"g5":27.23},{"name":"5","g1":18.22,"g2":4.62,"g3":8.26,"g4":97.63,"g5":34.37},{"name":"6","g1":28.51,"g2":12.43,"g3":28.67,"g4":108.29,"g5":47.84},{"name":"7","g1":34.43,"g2":4.40,"g3":9.89,"g4":127.27,"g5":36.90},{"name":"8","g1":21.65,"g2":13.87,"g3":5.44,"g4":112.49,"g5":16.29},{"name":"9","g1":12.98,"g2":35.44,"g3":16.37,"g4":135.54,"g5":16.78},{"name":"10","g1":22.96,"g2":38.70,"g3":18.15,"g4":114.96,"g5":8.51},{"name":"11","g1":0.49,"g2":51.90,"g3":19.98,"g4":95.00,"g5":9.69},{"name":"12","g1":20.87,"g2":62.07,"g3":25.96,"g4":87.79,"g5":3.18},{"name":"13","g1":25.10,"g2":78.46,"g3":26.04,"g4":91.54,"g5":12.41},{"name":"14","g1":16.87,"g2":56.80,"g3":1.39,"g4":71.78,"g5":16.54}]},background:'white',// Set rotation and double tap reset interactions.interactions:['rotate'],// Define radial and angular axis for the radar chart.axes:[{type:'numeric',position:'radial',fields:'g1',grid:true,style:{estStepSize:20},label:{fill:'black',y:-8}},{type:'category',position:'angular',fields:'name',grid:true,style:{estStepSize:2},label:{fill:'black'}}

转载于:https://www.cnblogs.com/cheman/archive/2012/12/26/2834922.html