Sencha Touch 2.4

显示私有类

顶部

在 Sencha Touch 中使用 Draw 和 Chart 包

本指南概述了 Sencha Touch Draw 和 Chart 包的用法。这些包使您能够以通用的方式创建跨浏览器和跨设备的图形。

在过去的几个月中，draw 和 chart 包已被重构，现在它们已直接集成到 Sencha Touch 中。此重构主要侧重于

性能 - 此版本的 draw 和 chart 包提供了显着的性能提升。
可维护性 - draw 和 chart 功能已彻底分离，从而更容易修复错误和提供新功能。
灵活性 - 系列和精灵都以易于自定义和/或扩展的方式提供。您可以编写自己的精灵类并定义可以自动动画和操作的属性。

本指南涵盖以下主题

Draw 组件：一个跨浏览器/跨设备的包，用于绘制通用图形和动画。
Chart 组件：定义图表容器的类层次结构，该容器提供可视化数据的能力。

Draw 组件

Draw 包旨在满足移动应用程序图形渲染的开发需求，提供了一种通用的工具，能够创建跨浏览器、跨设备的自定义图形和丰富的动画。Draw 包专为性能而设计，并通过大量低内存占用的图表实现丰富的用户交互。

Draw 包包含一个 Surface（表面）类 (Ext.draw.Surface)，该类抽象了底层图形实现，并允许创建任意形状的对象，称为精灵，或精灵组。精灵响应触摸事件（点击、滑动等）等交互，并且还为所有样式属性（例如形状、颜色、大小等）提供丰富的动画。

Surface（表面）类的底层实现是 HTML Canvas 引擎。选择 Canvas 是因为使用 2D Canvas API 进行程序绘图通常优于基于 DOM 的方法。

Surface（表面）

您可以创建一个简单的绘图表面，而无需加载 Chart 包。这对于创建可在所有设备上运行且动画效果良好的任意图形非常有用。例如，您可以创建美国互动地图，其中每个州都是一个精灵而不是简单的图像，或者创建一个信息图，其元素是精灵。使用精灵而不是图像为网页提供了更丰富的用户体验，从而提供了交互性和动画。

展开代码

代码运行

正如您可能在本示例中注意到的那样，HiDPI 显示器被检测到，并且像素率被提升以适应分辨率。请注意，这对于用户和开发人员来说都是透明发生的。Surface（表面）中使用的“像素”始终与普通 HTML 页面中的像素大小相同，无论显示设备是否为 HiDPI。因此，图表在 Retina 设备上将不再显得模糊。

Draw 包还支持 SVG 后端。只需将“Ext.draw.engine.SVG”设置为 Draw 组件的默认引擎，它就可以按预期工作。继续使用 Canvas API 进行程序绘图，而无需考虑后端，它都为您抽象化了。

Sprites（精灵）

精灵是在绘图表面上渲染的对象。它们被添加到 getItems() 集合中的表面。以下示例包括一个类型为 circle（圆形）、radius（半径）为 100 且颜色为淡黄色 (#ff8) 的精灵，这会导致在表面的左上角出现一个黄色圆圈。

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { Ext.create("Ext.draw.Component", { fullscreen: true, sprites: [ { type: 'circle', fillStyle: '#ff8', strokeStyle: 'black', lineWidth: 3, radius: 100, x: 100, y: 100 } ] }); } });

在当前版本的 Draw 包中，精灵由它们自己的类表示。除了提高渲染性能外，这也使得修改它们变得更加容易。

此外，Draw 包还为精灵引入了以下增强功能

属性定义 - 为了创建自定义精灵类型，您需要定义其他属性，这些属性也可以通过 setAttribute 方法更改。您可以定义属性的数据类型、动画的插值方法，以及在属性更改后要调用的回调。
修饰符 - 修饰符是原始属性的装饰器。修饰符像精心分离的管道一样链接在一起，因此每个修饰符都不需要了解其他修饰符，并且属性将通过管道进行装饰。您可以非常轻松地链接和取消链接修饰符，并且精灵的外观将正确更改。
享元实例化 - Chart 包在每种图表中都提供标记和标签。您可以将任何精灵注册为实例化精灵的模板，这基本上会在不同的位置多次渲染相同的对象。

每个功能都在后续章节中描述。

除了 Circle（圆形）类型外，您还可以使用以下其他精灵类型

rect（矩形） - 创建一个矩形。您可以通过设置其 radius（半径）属性为其提供圆角。
image（图像） - 创建在表面上渲染的位图图像。
path（路径） - 使用 SVG 路径语法创建任意形状。这是最强大的原始精灵类型。有关 SVG 路径语法的教程，请参阅 Mozilla 开发者网络。

与旧的 Draw 包不同，属性是使用符合 HTML Canvas API 而不是 SVG API 的命名约定定义的。但是，由于属性定义中的别名机制，您仍然可以使用符合 SVG API 的旧命名约定。

此外，精灵可以使用以下属性进行变换

scalingX（X 轴缩放） - X 轴上的缩放因子。
scalingY（Y 轴缩放） - Y 轴上的缩放因子。
scalingCenterX（X 轴缩放中心） - 执行缩放的原点的 X 坐标。null 表示精灵的中心。
scalingCenterY（Y 轴缩放中心） - 执行缩放的原点的 Y 坐标。null 表示精灵的中心。
rotationRads（旋转弧度） - 顺时针旋转的角度（以弧度为单位）。
rotationCenterX（X 轴旋转中心） - 旋转中心的 X 坐标。null 表示精灵的中心。
rotationCenterY（Y 轴旋转中心） - 旋转中心的 Y 坐标。null 表示精灵的中心。
translationX（X 轴平移） - X 方向上的平移。
translationY（Y 轴平移） - Y 方向上的平移。

该包不再将变换对象存储在属性集中，但您可以继续使用变换对象来设置这些属性。变换对象的定义与旧的 Draw 包兼容。变换按以下顺序执行：缩放、旋转、平移。

在设置任何先前描述的变换属性后，matrix（矩阵）和 inverseMatrix（逆矩阵）属性将更新。在新的 Draw 包中，您也可以直接简单地设置 matrix（矩阵）属性。为了保持一致性，您给出的矩阵将被提取到上述属性中。

属性定义和修饰符

Sencha Touch Draw 包还引入了精灵属性定义机制以及精灵修饰符。这些功能代表了可维护性和性能方面的重要改进，如果您想编写自己的精灵，它们至关重要。让我们仔细看看这些功能中的每一个

属性定义

属性定义使您能够定义自定义精灵类的自定义属性，以执行“延迟”更新。属性定义的主要目的是定义当调用 setAttributes 方法时，数据如何用于更改属性集的内容。每个精灵都有一个名为 attr 的成员（精灵的“属性集”）。

所有精灵状态（以及缓存）都存储在属性集中。此架构有意将“模型”（属性）与“视图”（精灵）分离。这样，我们可以共享相同的精灵来显示不同的属性集，这就是享元实例化的工作原理。

属性定义在以下示例中说明（来自折线精灵的代码片段）

...
inheritableStatics: {
    def: {
        processors: {
            smooth: 'bool',
            step: 'bool',
            preciseStroke: 'bool'
        },

        defaults: {
            smooth: false,
            step: false,
            preciseStroke: false
        },

        dirtyTriggers: {
            dataX: 'dataX,bbox,smooth',
            dataY: 'dataY,bbox,smooth',
            smooth: 'smooth'
        },

        updaters: {
            "smooth": function (attr) {
                if (attr.smooth && attr.dataX && attr.dataY) {
                    this.smoothX = Ext.draw.Draw.spline(attr.dataX);
                    this.smoothY = Ext.draw.Draw.spline(attr.dataY);
                } else {
                    delete this.smoothX;
                    delete this.smoothY;
                }
            }
        }
    }
},
...

属性定义在类定义的 inheritableStatics 部分中定义，它们将通过类继承自动继承。由于它被定义为静态成员，因此管理该机制的对象对于每个类仅创建一次。由于属性和精灵的分离，我们能够使用相同的属性管理器精灵属性定义来处理相同类型的所有精灵。

属性定义可以定义 applier（在示例代码中称为 processors（处理器））和 updater，其方式与 Sencha Touch 配置系统相对相似，但具有批处理更新处理器以获得更好的性能。例如，当您更改矩形精灵的 width（宽度）和 height（高度）时，其缓存的路径会更新。如果您在同一个 setAttributes 调用中设置两个属性，Draw 包会批量更新，以便路径只需计算一次。属性定义的 applier 或处理器使您能够在将值应用于属性集之前检查和规范化该值。由于名称可以用作对预定义处理器的引用，因此这种方法非常方便，并且大大提高了可维护性。属性定义还允许您定义属性项的别名，因此您可以使用使用旧 Sencha Touch 1.0 命名约定的旧代码，而不会产生重大的兼容性影响。

修饰符

修饰符使您能够向属性集添加更改。修饰符是装饰器模式的一种改编。一个精灵可以有一个修饰符列表，这些修饰符链接在一起以处理属性集的内容。通过这种方式，修饰符就像一个过滤器管道，逐步构建生成的属性。例如，当您查询属性集的值时，Highlight（高亮显示）修饰符会将某些属性更改为其高亮显示值；类似地，Animation（动画）修饰符为每一帧的每个动画属性生成当前值。

由于修饰符旨在独立工作，因此通过使每个修改模块化来提高可维护性。以前，高亮显示精灵涉及到在突出显示代码内部使用动画，这每次您想进行此技巧时都涉及到大约十行类似的、可能容易出错的代码。您需要使用不同的方法来高亮显示精灵，具体取决于它是否在动画中。在动画部分中，您需要再次执行相同的操作。但是，现在，通过使用修饰符，高亮显示仅需两行代码，并且仅涉及设置将激活高亮显示修饰符的 highlighted（高亮显示）属性。修饰符会完全按照预期高亮显示精灵，而无需了解有关动画的信息。

修饰符以这样一种方式实现：对属性的查询实际上是在查询直接存在于 JavaScript 对象上的属性。属性集被构造为由修饰符控制的原型链。

在 setAttributes 方法中，您想要对属性集进行的更改称为“更改请求”。setAttributes 将在修饰符链的末尾针对该请求调用 pushDown 方法。修饰符负责在必要时（反例是当修饰符知道在此点之后不会进行任何更改时，它可以停止 pushDown）将更改请求向下传递到链中。剩余的更改将作为返回值弹出。修饰符还可以修改弹出的更改和/或将更改放置到它实际应该放置的位置（在原型链中）。

尽管修饰符的实现非常复杂，可能难以理解，但在实践中它非常简单易用。在大多数情况下，您不需要了解其背后的原理，它就可以简单地工作。例如，您无需启动更新循环或“启动”任何东西即可使用 Animation 修饰符。您只需设置修饰符的持续时间，然后，无论何时您更改精灵的属性，它都会启动平滑的动画。

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { Ext.create("Ext.draw.Component", { fullscreen: true, background: 'white', sprites: [{ zIndex: 30, type: 'circle', radius: 30, fill: 'gray', stroke: 'black', fx: { duration: 300 }, translate: { x: 180, y: 90 } }, { type: 'text', fontSize: 18, fill: '#ddd', text: 'Click the screen to watch the circle move', textAlign: 'center', x: 240, y: 280 }], listeners: { element: "element", touchstart: function (e) { var sprite = this.getSurface().getItems()[1]; sprite.setAttributes({ translationX: e.pageX, translationY: e.pageY }); } } }); } });

享元精灵实例

Sencha Touch Draw 包中引入的另一个增强功能是称为享元实例的功能，它提供了主要的性能改进。

新的 Chart 包将图表的许多可视化元素表示为“标记”——从单个属性原型派生的享元精灵。这些标记共享相同的精灵对象。通过这种方式，精灵定义了渲染的逻辑（因此称为“视图”），而不是数据（因此称为“模型”）。创建大量的精灵是一项重量级操作，并且在计算上可能很昂贵。相反，对于一组略有不同的对象，仅创建用于渲染的增量数据，这可以节省大量的内存。这种技术在其他计算机图形领域通常被称为“实例渲染”。在新的 Draw 包中，“实例精灵”是派生实例的容器，并使用实例渲染来渲染它们。

Chart 包在每种图表类型中都提供“标记”。标记由名为 Markers 精灵的实例精灵子类支持。标记和常规实例精灵之间的主要区别在于，标记附加到另一个名为“标记持有者”的精灵。每当绘制标记持有者时，标记精灵将收集有关实例更改的信息。虽然以前标记只是精灵配置对象的一小部分子集，但在当前版本中，您可以使用自己的模板，它可以是任何东西，并且可以出现在任何地方。

图表组件概述

Chart 包由一系列类组成，这些类提供数据可视化功能。这些包括系列、轴、交互以及用于实现标记和图例的机制。本节概述了这些类如何联系在一起以及每个类中包含的功能。以下各节介绍了特定的轴、系列和交互。

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { var store = Ext.create("Ext.data.Store", { fields: ['name', 'value1', 'value2'], data: [ { name: 'Jan', value1: 5, value2: 412 }, { name: 'Feb', value1: 23, value2: 142 }, { name: 'Mar', value1: 83, value2: 113 }, { name: 'Apr', value1: 233, value2: 834 }, { name: 'May', value1: 509, value2: 1024 }, { name: 'Jun', value1: 864, value2: 1102 }, { name: 'Jul', value1: 1144, value2: 425 }, { name: 'Aug', value1: 1179, value2: 324 }, { name: 'Sep', value1: 946, value2: 39 }, { name: 'Oct', value1: 591, value2: 1142 }, { name: 'Nov', value1: 288, value2: 523 }, { name: 'Dec', value1: 109, value2: 634 } ] }); Ext.create("Ext.Panel", { fullscreen: true, layout: 'fit', style: 'background: white', items: [ { xtype: 'chart', background: "none", store: store, animate: true, interactions: ['panzoom', 'itemhighlight'], legend: { position: "bottom" }, series: [ { type: 'line', xField: 'name', yField: 'value1', title: 'Line', style: { smooth: true, stroke: '#115fa6', lineWidth: 3, shadowColor: 'rgba(0,0,0,0.7)', shadowBlur: 10, shadowOffsetX: 3, shadowOffsetY: 3 }, highlightCfg: { scale: 2 }, marker: { type: 'circle', stroke: '#0d1f96', fill: '#115fa6', lineWidth: 2, radius: 4, shadowColor: 'rgba(0,0,0,0.7)', shadowBlur: 10, shadowOffsetX: 3, shadowOffsetY: 3, fx: {duration: 300} } }, { type: 'bar', xField: 'name', yField: ['value2'], title: ['Bar'], style: { maxBarWidth: 15, lineWidth: 1.5, fill: "#a61120", stroke: 'black', shadowColor: 'rgba(0,0,0,0.7)', shadowBlur: 10, shadowOffsetX: 3, shadowOffsetY: 3 } } ], axes: [ { type: 'numeric', position: 'left', grid: { odd: { fill: '#fafafa' } }, style: { axisLine: false, estStepSize: 20, stroke: '#ddd' }, minimum: 0, maximum: 1210 }, { type: 'category', position: 'bottom', visibleRange: [0, 0.7], style: { estStepSize: 1, stroke: '#999' } } ] }, { xtype: 'container', left: 40, top: -10, width: 160, height: 160, layout: 'fit', items: [{ interactions: ['rotate', 'itemhighlight'], style: 'z-index: 5', xtype: 'polar', store: store, innerPadding: 16, series: [ { type: 'pie', xField: 'value2', donut: 30, highlightCfg: { margin: 15 }, style: { fillOpacity: 0.9, stroke: "#444" }, subStyle: { fillStyle: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"] } } ] }] } ] }); } });

图表组件类

所有类型的图表组件都从抽象图表类扩展而来，抽象图表类又扩展自 draw 组件。

图表组件是用于管理系列和轴的容器。它负责在每次尺寸更改时布局系列和轴。抽象类的实现必须覆盖 performLayout 方法。

例如，笛卡尔图表需要响应轴厚度的变化并重新计算系列区域。

在新的 Chart 包中，有三种类型的图表

笛卡尔图表 - 此类用于在笛卡尔坐标系中渲染系列和轴。Ext.chart.Chart 也用于指代此类。
极坐标图表 - 此类用于在极坐标系中渲染系列和轴。
空间填充图表 - 此类用于将系列填充到组件的大小。这种类型的图表不使用轴。

Chart 组件管理以下项目

轴 - 这些轴通过 Ext.chart.series.Series 访问，并表示为此可视化定义和绘制的所有轴。这是一个混合集合。
系列 - 这些系列通过 Ext.chart.series.Series 访问，并表示为图表绘制的所有系列。这可以是折线图、柱状图、散点图等等。这也是一个混合集合。
交互 - 这些是控制器，当识别出某些触摸手势时，它们会直接操作系列和轴。
图例存储 - 这表示从系列收集的图例信息。通常，您可以将数据列表附加到此存储，并在图例信息更改时自动更新。

Chart 组件将触摸事件委托给图表的不同区域，例如轴、系列等。您可以直接在 Chart 组件上监听“itemXXXX”事件，它将委托来自已注册系列的事件

chart.on({
    'itemtap': function(series, item, e) {
       alert('An item from ' + series.id + ' has been tapped!');
    }
});

轴

在 Sencha Touch Chart 包中，我们提供了一个 axis 类来表示各种轴。轴对象根据其停靠位置以不同的方式工作。有四种类型的停靠

左/右 - 轴是垂直的。
顶部/底部 - 轴是水平的。
径向 - 轴径向放置在极坐标图表内部，以识别当前半径。
角度 - 轴放置在极坐标图表的边界之外，以识别当前角度。

轴帮助系列将数据值映射到坐标。它们绑定到需要表示的数据类型。有用于类别信息的轴 (Ext.chart.axis.Category) 和用于定量信息的轴 (Ext.chart.axis.Numeric)。时间轴 (Ext.chart.axis.Time) 允许在特定时间段内渲染信息，并使用平滑动画进行更新。

有关每个轴的具体信息，请参阅轴类文档。本指南后续章节中包含的系列示例提供了轴配置示例。

您可以启用附加到轴对象的网格。网格垂直于轴放置，并在系列下方绘制。可以通过将样式对象指定为轴配置的 grid 字段来设置网格样式。通过为 grid 字段指定 true 值，它将使用默认样式绘制网格。

网格样式接收两个特殊字段 even 和 odd，用于为偶数网格和奇数网格指定额外的样式。您还可以设置网格的 fillStyle 参数，这将渲染两个网格之间的填充。

例如，以下配置为折线系列在左轴中生成小刻度线

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { 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 } } ] }); } });

系列

Series 是一个抽象类，由具体的可视化效果扩展而来，例如折线系列、柱状系列或散点系列。

Series 类本身包含所有这些系列通用的代码，例如事件处理、高亮显示、标记、标签等等。

以下各节描述了可用的系列类型。它还展示了一个完整的系列配置示例，包括 Chart、Axis 和 Series 选项。有关更具体的信息，请参阅 Series 文档。

面积图

面积系列创建堆积面积图，通常用于显示多个聚合的信息层。与其他系列类似，面积系列必须添加到图表的 series 配置中。

您可以在堆积系列（例如面积系列和柱状系列）上指定多个 y 字段。

面积系列的典型配置对象如下面的代码示例所示

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { 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 parameters subStyle: { fill: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"] } } ] }); } });

柱状图

柱状系列创建可堆叠或可分组的柱状图，通常用于显示按类别划分的数字数据，这些数据展示了进展或衰退。请注意，与旧的图表包相反，柱状系列指的是垂直柱状系列或柱形系列。您可以通过将图表的 flipXY 设置为 true 来获得水平柱状系列。

柱状系列可以是堆叠的或分组的。您可以将系列的 stacked 配置设置为 false，以便将系列切换到分组模式。

以下示例显示了一个柱状图示例

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { 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 configuration legend: { 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 parameters subStyle: { fill: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"] } } ] }); } });

折线图

折线系列创建折线图，这是柱状图的替代方案，用于显示按类别划分的数字数据，这些数据展示了进展或衰退。以下示例显示了折线系列的典型配置对象

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { Ext.create("Ext.chart.CartesianChart", { fullscreen: 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} ] }, background: 'white', interactions: ['panzoom'], legend: { position: 'bottom' }, //define x and y-axis. axes: [ { type: 'numeric', position: 'left' }, { type: 'category', visibleRange: [0, 1], position: 'bottom' } ], //define the actual series series: [{ type: 'line', xField: 'name', yField: 'g1', title: 'Normal', style: { fill: "#115fa6", stroke: "#115fa6", fillOpacity: 0.6, miterLimit: 3, lineCap: 'miter', lineWidth: 2 } }, { type: 'line', xField: 'name', yField: 'g2', title: 'Smooth', style: { smooth: true, stroke: "#94ae0a", fillOpacity: 0.6, miterLimit: 3, lineCap: 'miter', lineWidth: 2 } }, { type: 'line', xField: 'name', yField: 'g3', title: 'Step line', style: { step: true, stroke: "#a61120", fillOpacity: 0.6, miterLimit: 3, lineCap: 'miter', lineWidth: 2 } }] }); } });

饼图

饼图系列创建饼图，这是显示许多类别的定量信息的好方法，这些类别作为一个整体也具有意义，例如，给定年份的所有 12 个月。

请注意，与之前的所有系列相反，饼图系列和雷达图系列是极坐标系列。因此，您不能将它们与笛卡尔图表一起使用，而必须将它们包含在极坐标图表中。

以下代码示例给出了一个饼图示例

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { 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 structure interactions: ['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', label: { field: 'name', display: 'rotate' }, donut: 25, style: { miterLimit: 10, lineCap: 'miter', lineWidth: 2 } } ] }); } });

雷达图

雷达系列创建雷达图，这是比较有限数量类别的不同定量值的好方法。以下代码说明了雷达图系列示例

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { 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": "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} ] }, 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' } } ], series: [ { type: 'radar', xField: 'name', yField: 'g1', style: { fillStyle: 'rgba(0,255,0,0.2)', strokeStyle: 'rgba(0,0,0,0.8)', lineWidth: 1 } } ] }); } });

散点图

散点系列创建散点图，使应用程序能够在同一可视化中显示两个以上的变量。

这些变量可以映射到 x、y 坐标，也可以映射到元素的属性，例如半径、大小、颜色等等。

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { Ext.create('Ext.chart.CartesianChart', { fullscreen: true, innerPadding: 15, 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} ] }, background: 'white', // Set rotation and double tap reset interactions. interactions: ['rotate'], axes: [{ type: 'category', position: 'bottom', hidden: true }], series: [ { type: 'scatter', xField: 'g1', yField: 'g2', marker: { type: 'circle', radius: 5, fillStyle: 'rgba(0,255,0,0.2)', strokeStyle: 'rgba(0,0,0,0.8)', lineWidth: 1 }, style: { renderer: function (sprite, config, rendererData, index) { var itemData = rendererData.store.getAt(index).data; config.radius = interpolate(itemData.g3, 0, 30, 5, 12); config.fillOpacity = interpolate(itemData.g3, 0, 30, 1, 0.7); config.fill = interpolateColor(itemData.g3, 0, 200); } } } ] }); function interpolate(lambda, minSrc, maxSrc, minDst, maxDst) { return minDst + (maxDst - minDst) * Math.max(0, Math.min(1, (lambda - minSrc) / (maxSrc - minSrc))); } var fromHSL = Ext.draw.Color.fly('blue').getHSL(), toHSL = Ext.draw.Color.fly('red').getHSL(); fromHSL[2] = 0.0; fromHSL[2] = 0.3; function interpolateColor(lambda, minSrc, maxSrc) { return Ext.draw.Color.fly(0, 0, 0, 0).setHSL( interpolate(lambda, minSrc, maxSrc, fromHSL[0], toHSL[0]), interpolate(lambda, minSrc, maxSrc, fromHSL[1], toHSL[1]), interpolate(lambda, minSrc, maxSrc, fromHSL[2], toHSL[2]) ).toString(); } } });

仪表盘

仪表盘系列创建仪表盘图表，通常用于显示某个变量的进度。除了使用 store 之外，您还可以设置仪表盘系列的值以显示该值。

仪表盘系列使用空间填充图表类型。

以下代码示例给出了一个示例

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { var value = 300; Ext.create("Ext.Panel", { fullscreen: true, layout: 'fit', items: [ { xtype: 'titlebar', docked: 'top', title: 'Gauge Demo', items: [{ xtype: 'button', text: 'Smaller', ui: 'back', align: 'left', handler: function () { if (value > 100) { value -= 50; Ext.ComponentQuery.query('spacefilling')[0].getSeries()[0].setValue(value); } } }, { xtype: 'button', text: 'Bigger', ui: 'forward', align: 'right', handler: function () { if (value < 900) { value += 50; Ext.ComponentQuery.query('spacefilling')[0].getSeries()[0].setValue(value); } } }] }, { xtype: 'spacefilling', animate: { easing: 'elasticIn', duration: 1000 }, series: [ { type: 'gauge', value: value, minimum: 0, maximum: 1000, donut: 30, style: { miterLimit: 10, lineCap: 'miter', lineWidth: 2 }, subStyle: { fillStyle: ["#115fa6", "lightgrey"] } } ] } ] }); } });

交互

本节介绍 Sencha Touch Chart 包中的交互功能。通过利用这些功能，您可以创建高度交互式的图表，使用户能够可视化和导航复杂的数据集。

出色的移动图表用户体验

在移动触摸设备上部署图表比在桌面环境中带来一些独特的问题

小屏幕尺寸限制了可以一次显示的数据量和复杂性。
触摸输入使用户难以准确选择数据点以查看详细信息。
硬件限制使移动设备难以重绘图表数据。

这些独特的问题使得在 Web 上常见的图表实际上在触摸设备上无法使用。为了提供出色的移动图表用户体验，Touch Charts 实现了其他当前图表产品所不具备的交互级别。此外，Touch Charts 交互提供了高度的可配置性，并且设计为在移动硬件上表现良好。

让我们仔细看看 Sencha Touch Charts 支持的交互类型。

向图表添加交互

要向图表添加交互，请将图表的 interactions 配置设置为交互配置对象的数组。

每个对象必须是字符串，或者必须包含与后续章节中描述的交互类型之一匹配的 type 属性。每个对象还可能包含适用于特定交互的其他配置选项。

例如，让我们考虑以下代码示例，该示例创建一个 Chart 并在其上配置交互

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { Ext.create("Ext.Panel", { fullscreen: true, layout: 'fit', items: [{ xtype: 'titlebar', title: 'Try tap hold on bars', docked: "top" }, { xtype: 'chart', 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}] }, axes: [{ type: 'numeric', position: 'left', grid: true, maximum: 40 }, { type: 'category', position: 'bottom', visibleRange: [0, 0.75] }], series: [{ type: 'bar', xField: 'name', yField: 'g1', highlightCfg: { fillStyle: '#f99', strokeStyle: 'black', shadowColor: 'black', shadowBlur: 8, shadowOffsetX: 4, shadowOffsetY: 4 }, style: { fillStyle: '#55a', strokeStyle: '#55a' } }], interactions: [ // If all you want is to use the default interaction, // simply put its name here. 'panzoom', 'itemhighlight', { type: 'iteminfo', // For some interactions, you can specify the gesture // to trigger it. gesture: 'itemtaphold', // You can also attach listeners to an interaction. listeners: { show: function (me, item, panel) { panel.setHtml("Current Item: " + item.record.data.name); } } } ] }], listeners: { initialize: function () { // The panzoom interaction provides an toggle button, you can add them anywhere (once). // It will be destroyed when the interaction is destroyed. var button = Ext.ComponentQuery.query("interaction[type=panzoom]")[0].getModeToggleButton(); Ext.ComponentQuery.query("titlebar")[0].add(button); } } }); } });

此柱状图配置了以下两个交互

panzoom - 允许沿左轴和底轴进行缩放和平移。您可以通过单击左上角的按钮来切换模式。
itemhighlight - 通过点击高亮显示柱状图项。
iteminfo - 在 doubletap 手势的弹出面板中显示有关系列数据点的详细信息。

您可以通过实现 Ext.chart.interactions.Abstract 类并使用带有 interaction 前缀的别名注册名称来定义自己的交互。例如，如果您想创建一个名为 remove 的交互，请创建名为 "interaction.remove" 的类的别名，然后在交互配置中设置 type: 'remove'。

手势

所有受支持的交互默认都绑定到在大多数情况下有意义的手势，但是您可能想要更改哪些手势触发哪些交互。当组合默认手势相互冲突的交互时，尤其可能需要这样做，例如 itemhighlight 和 iteminfo 交互，它们默认都绑定到 tap 手势。

为了允许自定义手势，每个交互都公开一个或多个 gesture 配置属性。对于配置了单个手势的简单交互，请使用 gesture 配置，如下面的代码示例所示

interactions: [{
    type: 'iteminfo',
    gesture: 'doubletap' //changed to use doubletap instead of the default itemtap gesture
}]

对于使用多个手势的更复杂交互，会公开多个 fooGesture 配置，用于自定义每个交互。请参阅 Ext.chart.interactions.Abstract 中每个交互类的说明，以了解其支持的手势属性。

项目高亮显示

itemhighlight 交互使您能够在图表上高亮显示单个数据点项目，并且默认绑定到 tap 手势。

高亮显示效果也可以通过每个系列的 highlightCfg 配置属性进行自定义。以下代码示例说明了 tap 手势上的高亮显示效果

interactions: [{
    type: 'itemhighlight',
    gesture: 'tap'
}]

此交互由 Ext.chart.interactions.ItemHighlight 类实现。有关详细配置选项，请参阅 ItemHighlight。

项目信息

iteminfo 交互使您能够在图表上选择单个数据点项目，并在弹出面板中查看有关它的详细信息。默认情况下，它绑定到 itemtap。虽然您可以使用 gesture 配置来更改此行为，但您仍然必须将交互绑定到 itemXXXX 事件。

显示的弹出面板没有任何默认内容。其内容取决于正在使用的特定数据模型和图表配置。您必须为交互的 show 事件实现一个处理程序来填充面板。处理程序会传递交互实例、选定项目和面板实例的引用。以下代码给出了一个示例

interactions: [{
    type: 'iteminfo',
    gesture: 'doubletap',
    listeners: {
        show: function(interaction, item, panel) {
            panel.setHtml('Stock Price: $' + item.record.get('price'));
        }
    }
}]

此交互由 Ext.chart.interactions.ItemInfo 类实现。有关详细配置选项，请参阅 itemInfo。

轴平移/缩放导航

panzoom 交互使用户能够通过放大/缩小和平移来导航笛卡尔图表中的一个或多个轴。这对于具有大量数据点的系列尤其有用，因为缩放使用户能够查看详细信息并更轻松地与单个数据点进行交互。

您可以使用 getModeToggleButton 方法从交互中获取一个切换按钮，并将其放置在任何位置。然后它将随着交互的销毁而被销毁。

在支持多点触控事件的设备上，双指捏合手势执行缩放，单指拖动手势执行平移。此交互必须绑定到一个或多个轴。可以为每个轴单独配置平移/缩放操作的参数，如下面的示例代码所示

interactions: [
    {
        type: 'panzoom',
        axes: {
            "left": {
                allowPan: false,
                allowZoom: false
            },
            "bottom": {
                allowPan: true,
                allowZoom: true
            }
        }
    }
]

此交互由 Ext.chart.interactions.PanZoom 类实现。有关详细配置选项，请参阅 panzoom class。

饼图/雷达图旋转

rotate 交互使用户能够旋转饼图或雷达图，默认情况下，旋转使用拖动手势执行。

以下代码片段是一个示例

interactions: ['rotate']

此交互由 Ext.chart.interactions.Rotate class 实现。有关详细配置选项，请参阅 rotate class。

图例

图表公开了一个 store，用于表示从系列收集的图例信息。从技术上讲，您可以对此 store 执行任何操作。同样，这种架构可以帮助您将图例信息与图例组件解耦，因此您可以使用任何技术和自定义在任何所需位置显示图例。

为了您的方便，我们还提供了一个默认的图例组件，该组件已经实现了一些用于显示图例的常用和基本功能。Chart 配置对象接受一个 legend 部分，以启用默认的图例组件并将其插入到图表的父级中。默认的图例组件包含一个 position 配置，并且停靠在该侧。

以下示例显示了图例停靠在不同侧面的外观。请注意，由于图例信息和图例组件之间是分离的，因此您可以将多个图例附加到同一图表，并且它们可以很好地协同工作。

展开代码

代码运行

Ext.application({ name: 'Sencha', launch: function() { var cmp = Ext.create("Ext.chart.Chart", { store: { fields: ['name', 'g1', 'g2', 'g3', 'g4', 'g5'], data: [ {"name": "Item-0", "g1": 18.341524994680185, "g2": 0.04297258032918805, "g3": 22.351114037029276, "g4": 10.501821959142115, "g5": 18.422488416954124}, {"name": "Item-1", "g1": 2.6795750960073192, "g2": 14.875638789052152, "g3": 0.41991764062895953, "g4": 19.15924362650272, "g5": 1.6495555940993327}, {"name": "Item-2", "g1": 1.9082894708999651, "g2": 5.729225849931112, "g3": 14.809082259901247, "g4": 38.935629377514275, "g5": 2.7729804343737}, {"name": "Item-3", "g1": 21.372004559042896, "g2": 2.131323680889345, "g3": 12.98075950737056, "g4": 63.8279558143009, "g5": 18.852890370148263}, {"name": "Item-4", "g1": 2.678644589238747, "g2": 8.533478458163483, "g3": 4.442247207672851, "g4": 87.39642008886551, "g5": 27.236700916073737}, {"name": "Item-5", "g1": 18.22581616728662, "g2": 4.6238789653695616, "g3": 8.266150112323874, "g4": 97.63735394909592, "g5": 34.37480220555298}, {"name": "Item-6", "g1": 28.511145638423226, "g2": 12.432353979532314, "g3": 28.6741228261814, "g4": 108.2977419283445, "g5": 47.84666069220649}, {"name": "Item-7", "g1": 34.43620878689124, "g2": 4.400807521399271, "g3": 9.897771308372459, "g4": 127.27483400942947, "g5": 36.90075111658946}, {"name": "Item-8", "g1": 21.65297419507408, "g2": 13.873965184960143, "g3": 5.442452028141574, "g4": 112.4995128779431, "g5": 16.29340203114538}, {"name": "Item-9", "g1": 12.982003004868435, "g2": 35.44230021285489, "g3": 16.375689050647726, "g4": 135.54558258822468, "g5": 16.789054656397266}, {"name": "Item-10", "g1": 22.966357646171907, "g2": 38.70605529653733, "g3": 18.15839081425259, "g4": 114.96437921865811, "g5": 8.512883775942063}, {"name": "Item-11", "g1": 0.4961773512983534, "g2": 51.906332843946664, "g3": 19.982581780133525, "g4": 95.0096628034602, "g5": 9.69666590645371}, {"name": "Item-12", "g1": 20.871287522024215, "g2": 62.07049642190715, "g3": 25.96145180733678, "g4": 87.79060021422934, "g5": 3.1888208090676873}, {"name": "Item-13", "g1": 25.10282655149528, "g2": 78.46673576692024, "g3": 26.04466591703436, "g4": 91.54713327066283, "g5": 12.412469961213306}, {"name": "Item-14", "g1": 16.879928748894088, "g2": 56.800978947642236, "g3": 1.3917379459365016, "g4": 71.78792090708514, "g5": 16.54836327119026}, {"name": "Item-15", "g1": 31.831917729546152, "g2": 35.07601255548843, "g3": 25.844745424414132, "g4": 93.52833383209733, "g5": 2.671401561125716}, {"name": "Item-16", "g1": 44.11346876157489, "g2": 23.027433139122376, "g3": 46.411196237286674, "g4": 106.58174110647265, "g5": 2.277851404192951}, {"name": "Item-17", "g1": 40.670861391890135, "g2": 23.5440618568825, "g3": 56.71228987546458, "g4": 114.62825504295904, "g5": 26.280211845137366}, {"name": "Item-18", "g1": 55.6065040501508, "g2": 1.5722659966184906, "g3": 77.43817238547803, "g4": 130.08908094416222, "g5": 12.23868295330551}, {"name": "Item-19", "g1": 46.07941778348976, "g2": 10.21326337003686, "g3": 60.41723272409542, "g4": 125.57289205728488, "g5": 3.455769238542464}, {"name": "Item-20", "g1": 61.593189686585355, "g2": 3.0287808932196434, "g3": 62.962364348922236, "g4": 116.50437959216974, "g5": 19.021231015303968}, {"name": "Item-21", "g1": 49.131662515684056, "g2": 17.359720612610033, "g3": 81.85955411171707, "g4": 104.35194501037188, "g5": 38.019468830156185}, {"name": "Item-22", "g1": 38.505053519952455, "g2": 9.397924777062864, "g3": 64.1364369949548, "g4": 89.23287654726165, "g5": 62.22153503719187}, {"name": "Item-23", "g1": 56.45625324619134, "g2": 32.961040643270024, "g3": 72.43948657468295, "g4": 67.10892520115654, "g5": 80.64986971100456}, {"name": "Item-24", "g1": 37.22410682076297, "g2": 45.05562961930172, "g3": 57.567780112761504, "g4": 45.04615762614276, "g5": 100.00207932829655}, {"name": "Item-25", "g1": 31.942472041872094, "g2": 67.8029444580495, "g3": 53.55223417785279, "g4": 36.91141400902115, "g5": 79.66745070976023}, {"name": "Item-26", "g1": 27.389579901973637, "g2": 51.55427314558277, "g3": 60.697297359605265, "g4": 47.301868053483474, "g5": 89.06330678114135}, {"name": "Item-27", "g1": 21.76700657982844, "g2": 69.1534159811903, "g3": 78.94435417727888, "g4": 25.332426000355156, "g5": 109.82473177890374}, {"name": "Item-28", "g1": 37.76452404604049, "g2": 63.21592972099229, "g3": 91.7883116482889, "g4": 21.77618381260634, "g5": 108.62547474389665}, {"name": "Item-29", "g1": 22.15574281743333, "g2": 80.02333316902416, "g3": 98.08010371357004, "g4": 19.28224399835162, "g5": 123.46698354865038} ] }, animate: false, interactions: ['panzoom'], series: [ { type: 'line', xField: 'name', yField: 'g1', title: 'Line1', style: { lineWidth: 2, stroke: 'rgba(0,40,170,0.7)' } }, { type: 'line', xField: 'name', yField: 'g2', title: 'Line2', style: { lineWidth: 2, stroke: 'rgba(80,40,170,0.7)' } }, { type: 'line', xField: 'name', yField: 'g3', title: 'Line3', style: { lineWidth: 2, stroke: 'rgba(180,40,170,0.7)' } } ], axes: [ { type: 'numeric', position: 'left', grid: true }, { type: 'category', position: 'bottom', grid: true, visibleRange: [0, 0.5] } ] }); Ext.Viewport.add({ layout: 'fit', items: [ { xtype: 'legend', docked: 'left', width: 90 }, { xtype: 'legend', docked: 'right', width: 90 }, { xtype: 'legend', docked: 'top' }, { xtype: 'legend', docked: 'bottom' }, cmp ] }); var legends = Ext.ComponentQuery.query('legend'); legends[0].setStore(cmp.getLegendStore()); legends[1].setStore(cmp.getLegendStore()); legends[2].setStore(cmp.getLegendStore()); legends[3].setStore(cmp.getLegendStore()); } });

目录

术语、图标和标签

访问级别

成员类型

成员语法

成员标志

类图标

成员图标

导航和功能

类成员快速导航菜单

Getter 和 Setter 方法

历史记录栏

搜索和过滤器

API 文档类元数据

展开和折叠示例和类成员

桌面与移动视图

查看类源代码

Sencha Touch 2.4

目录

在 Sencha Touch 中使用 Draw 和 Chart 包

Draw 组件

Surface（表面）

Sprites（精灵）

属性定义和修饰符

属性定义

修饰符

享元精灵实例

图表组件概述

图表组件类

轴

系列

面积图

柱状图

折线图

饼图

雷达图

散点图

仪表盘

交互

出色的移动图表用户体验

向图表添加交互

手势

项目高亮显示

项目信息

轴平移/缩放导航

饼图/雷达图旋转

图例

Sencha Touch 2.4