文档帮助

内容

术语、图标和标签 访问级别 成员类型 成员语法 成员标志 类图标 成员图标 导航和功能 类成员快速导航菜单 Getter 和 Setter 方法 历史记录栏 搜索和过滤器 API 文档类元数据 展开和折叠示例和类成员 桌面 -vs- 移动视图 查看类源代码

术语、图标和标签

许多类在使用配置对象创建（实例化）时使用快捷名称。快捷名称称为别名（如果类扩展了 Ext.Component，则称为xtype）。为了便于参考，别名/xtype 列在适用类的类名旁边。

访问级别

框架类或其成员可以指定为private或protected。否则，类/成员为public。Public、protected和private是访问描述符，用于传达类或类成员的使用方式和时间。

成员类型

成员语法

以下是一个示例类成员，我们可以对其进行分析以显示类成员的语法（在本例中，从 Ext.button.Button 类中查看的 lookupComponent 方法）。

Ext.container.Container
查看源代码
lookupComponent ( item ) : Ext.Component
protected

在初始化items配置期间或添加新项目时，将原始配置对象添加到此容器时调用added), or {@link #insert inserted.

此方法将传递的对象转换为实例化的子组件。

当需要对子项创建应用特殊处理时，可以在子类中覆盖此方法。

参数

item :  Object

要添加的配置对象。

返回值
Ext.Component

要添加的组件。

让我们看看成员行的每个部分

成员标记

API 文档使用许多标记来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。

类图标

- 表示框架类。

- 单例框架类。*有关更多信息，请参阅单例标记。

- 组件类型框架类（Ext JS 框架中任何扩展 Ext.Component 的类）

- 表示该类、成员或指南在当前查看的版本中是新的

成员图标

- 表示类型为 config 的类成员

- 表示类型为 property 的类成员

- 表示类型为 method 的类成员

- 表示类型为 event 的类成员

- 表示类型为 theme variable 的类成员

- 表示类型为 theme mixin 的类成员

- 表示该类、成员或指南在当前查看的版本中是新的

类成员快速导航菜单

在 API 文档页面上的类名下方，有一行按钮，对应于当前类拥有的成员类型。每个按钮都显示了按类型划分的成员数量（此数量会随着应用过滤器而更新）。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示一个弹出菜单，其中包含该类型的所有成员，以便快速导航。

Getter 和 Setter 方法

与类配置选项相关的 Getter 和 Setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中，紧挨着它们所处理的配置。Getter 和 Setter 方法文档将在配置行中找到，以便于参考。

历史记录栏

您的页面历史记录保存在本地存储中，并在顶部标题栏下方显示（使用可用的空间）。默认情况下，仅显示与您当前查看的产品/版本匹配的页面搜索结果。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选按钮来扩展显示的内容。这将显示所有产品/版本在历史记录栏中的所有最近页面。

在历史记录配置菜单中，您还将看到最近页面访问的列表。结果按“当前产品/版本”和“全部”单选按钮进行过滤。单击 按钮将清除历史记录栏以及本地存储中保存的历史记录。

如果在历史记录配置菜单中选择了“全部”，则“在历史记录栏中显示产品详细信息”的复选框选项将被启用。选中后，每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将光标悬停在历史记录栏中的页面名称上也会显示产品/版本作为工具提示。

搜索和过滤器

可以使用页面顶部的搜索字段搜索 API 文档和指南。

在 API 文档页面上，还有一个过滤器输入字段，使用过滤器字符串过滤成员行。除了按字符串过滤外，还可以按访问级别、继承和只读过滤类成员。这是使用页面顶部的复选框完成的。

API 类导航树底部的复选框过滤类列表，以包含或排除私有类。

单击空的搜索字段将显示您最近的 10 次搜索，以便快速导航。

API 文档类元数据

每个 API 文档页面（除了 Javascript 原语页面）都具有一个与该类相关的元数据的菜单视图。此元数据视图将包含以下一项或多项

展开和折叠示例和类成员

默认情况下，可运行示例（Fiddles）在页面上展开。您可以使用代码块左上角的箭头分别折叠和展开示例代码块。您也可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间保留。

默认情况下，类成员在页面上折叠。您可以使用成员行左侧的箭头图标或使用右上角的展开/折叠所有切换按钮全局展开和折叠成员。

桌面 -vs- 移动视图

在较窄的屏幕或浏览器上查看文档将导致针对较小外形尺寸优化的视图。桌面视图和“移动”视图之间的主要区别在于

查看类源代码

可以通过单击 API 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。

Ext JS 7.8.0


顶部

内容

安装 Sencha Charts 在没有 Sencha Cmd 的情况下使用 Sencha Charts 图表组件类 图表组件管理 轴 系列 区域 条形图 折线图 饼图 雷达图 散点图 仪表盘 交互 添加交互 项目突出显示 旋转 图例存储

图表简介

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

安装 Sencha Charts

Sencha Charts 默认情况下不包含在 Ext JS 库中。为了包含图表包，只需将“charts”（如果您使用的是 Ext JS 5.x，则为“sencha-charts”）添加到 Sencha Cmd 生成的应用程序的{appRoot}/app.json文件中的 requires 块中。将包名称添加到 requires 数组中会指示 Cmd 将该包提供给您的应用程序。

完成包含后，请确保您的应用程序已重建。可以通过手动执行以下命令来重建应用程序

sencha app build

您也可以激活“app watch”

sencha app watch

Sencha app watch 监视应用程序的资产，并在检测到更改时重建。

注意：有关使用 Sencha Cmd 生成和构建应用程序的更多信息，请参阅Cmd 简介指南。

注意：如果您使用的是基于 npm 的工具，请查看本指南：使用 npm

在没有 Sencha Cmd 的情况下使用 Sencha Charts

如果您想使用图表，但不想使用 Sencha Cmd，您可以简单地将以下包含项添加到应用程序的 index.html 页面。

// in Ext JS 5.x

<script type="text/javascript" src="{SDKLocation}/build/packages/sencha-charts/build/sencha-charts.js"></script>
<link rel="stylesheet" type="text/css" href="{SDKLocation}/build/packages/sencha-charts/build/{themeName}/resources/sencha-charts-all.css">


// in Ext JS 6.x, 7.x

<script type="text/javascript" src="{SDKLocation}/build/packages/charts/{toolkitName}/charts.js"></script>
<link rel="stylesheet" type="text/css"  href="{SDKLocation}/build/packages/charts/{toolkitName}/{themeName}/resources/charts-all.css">

另请参阅 使用开放工具

图表组件类

所有类型的图表组件都从 AbstractChart 类扩展而来，该类扩展了 Ext.draw.Container。图表组件是用于管理系列和轴的容器。它负责在每次大小更改时布局系列和轴。抽象类的实现必须覆盖 performLayout 方法。例如，图表需要响应轴厚度的变化并重新计算系列区域。

有三种类型的图表

  • 笛卡尔/图表 - 为使用笛卡尔坐标绘制值的系列实现创建图表。这方面的示例包括条形图、面积图、散点图和折线图。
  • 极坐标 - 为使用极坐标绘制值的系列实现创建图表。这方面的示例包括饼图和径向图。
  • 空间填充 - 创建一个填充图表整个区域的图表。

“ext-charts” 包（来自 4.x 的旧版图表包 - 在 5.x 中可用，并在 6.x 中被弃用）尝试通过评估系列类型来自动确定图表类型。这允许用户只需将 xtype 设置为 'chart'。但是，“sencha-charts”（“charts” 是 6.x 中的包名称）在某些情况下需要指定的 xtype。笛卡尔图表是最常用的，并映射到 'chart' 的 xtype。设置 'chart' 的 xtype 假设您想要一个 条形图、折线图、散点图 或 面积图。其他类型的图表将需要 'polar' 或 'spacefilling' 的 xtype 指定。

图表组件管理

图表组件管理以下项目

  • 轴 - 这些可以通过 Ext.chart.axis.Axis 访问，并代表为该可视化定义和绘制的所有轴。这是一个混合集合。
  • 系列 - 这些可以通过 Ext.chart.series.Series 访问，并代表为图表绘制的所有系列。这可能是折线、条形、散点等等。这也是一个混合集合。
  • 交互 - 这些是当识别到某些事件时直接操纵系列和轴的控制器。
  • 图例存储 - 这表示从系列收集的图例信息。通常，您可以将数据列表附加到此存储，并在图例信息更改时自动更新。

轴

我们提供 Ext.chart.axis.Axis 来表示所有类型的轴。轴对象根据其对接位置以不同的方式工作。

  • 左/右 - 轴是垂直的。
  • 上/下 - 轴是水平的。

轴帮助系列将数据值映射到坐标。它们绑定到需要表示的数据类型。

  • 数字 - 附加到此轴的数据是数字和连续的。
  • 时间 - 附加到此轴的数据是（或被转换为）日期/时间值；它是连续的。
  • 类别 - 附加到此轴的数据属于一个有限集。数据点沿轴均匀放置。

通过设置不同类型的轴 布局 和轴 分段器 到轴，可以轻松更改轴的行为。

系列

系列 是一个抽象类，由具体的可视化扩展，例如折线系列、条形系列或散点系列。

系列类本身包含所有这些系列共有的代码，例如事件处理、突出显示、标记、标签等等。

以下部分描述了可用的系列类型。它还显示了一个完整的系列配置示例，包括图表、轴和系列选项。有关更具体的信息，请参阅系列文档。

面积

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

您可以在堆叠系列（如面积图系列和条形图系列）上指定多个y字段。面积图系列的典型配置对象如下面的代码示例所示

Ext.create('Ext.chart.CartesianChart', {
    renderTo: document.body,
    width: 500,
    height: 300,
    store: {
        fields: ['name', 'g1', 'g2'],
        data: [
            {"name": "Item-0", "g1": 18.34,"g2": 0.04},
            {"name": "Item-1", "g1": 2.67, "g2": 14.87},
            {"name": "Item-2", "g1": 1.90, "g2": 5.72},
            {"name": "Item-3", "g1": 21.37,"g2": 2.13},
            {"name": "Item-4", "g1": 2.67, "g2": 8.53},
            {"name": "Item-5", "g1": 18.22,"g2": 4.62},
            {"name": "Item-6", "g1": 28.51, "g2": 12.43},
            {"name": "Item-7", "g1": 34.43, "g2": 4.40},
            {"name": "Item-8", "g1": 21.65, "g2": 13.87},
            {"name": "Item-9", "g1": 12.98, "g2": 35.44},
            {"name": "Item-10", "g1": 22.96, "g2": 38.70},
            {"name": "Item-11", "g1": 0.49, "g2": 51.90},
            {"name": "Item-12", "g1": 20.87, "g2": 62.07},
            {"name": "Item-13", "g1": 25.10, "g2": 78.46},
            {"name": "Item-14", "g1": 16.87, "g2": 56.80}
        ]
    },

    interactions: {
        type: 'panzoom'
    },

    legend: {
        docked: 'right'
    },

    axes: [{
        type: 'numeric',
        position: 'left',
        grid: true
    }, {
        type: 'category',
        position: 'bottom',
        visibleRange: [0, 0.4]
    }],

    series: [{
        type: 'area',
        xField: 'name',
        yField: ['g1', 'g2'],
        title: ['G1', 'G2'],
        style: {
            stroke: '#666666',
            fillOpacity: 0.8
        }
    }]
});

条形图

条形图Bar系列创建了一个可堆叠或可分组的条形图，通常用于显示显示进展或回归的分类数值数据。请注意，与旧的图表包相反，条形图系列指的是垂直条形图或柱状图。您可以通过将flipXY设置为true来获得水平配置图表。

条形图系列可以堆叠或分组。您可以将系列上的stacked配置设置为false，以将系列切换到分组模式。

下面的示例显示了一个示例条形图

Ext.create('Ext.chart.CartesianChart', {
    renderTo: document.body,
    width: 500,
    height: 500,
    flipXY: true,
    store: {
        fields: ['name', 'g1', 'g2'],
        data: [
            {"name": "Item-0", "g1": 18.34,"g2": 0.04},
            {"name": "Item-1", "g1": 2.67, "g2": 14.87},
            {"name": "Item-2", "g1": 1.90, "g2": 5.72},
            {"name": "Item-3", "g1": 21.37,"g2": 2.13},
            {"name": "Item-4", "g1": 2.67, "g2": 8.53},
            {"name": "Item-5", "g1": 18.22,"g2": 4.62},
            {"name": "Item-6", "g1": 28.51, "g2": 12.43},
            {"name": "Item-7", "g1": 34.43, "g2": 4.40},
            {"name": "Item-8", "g1": 21.65, "g2": 13.87},
            {"name": "Item-9", "g1": 12.98, "g2": 35.44},
            {"name": "Item-10", "g1": 22.96, "g2": 38.70},
            {"name": "Item-11", "g1": 0.49, "g2": 51.90},
            {"name": "Item-12", "g1": 20.87, "g2": 62.07},
            {"name": "Item-13", "g1": 25.10, "g2": 78.46},
            {"name": "Item-14", "g1": 16.87, "g2": 56.80}
        ]
    },  

    //set legend configuration
    legend: {
        docked: 'right'
    },

    //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'],
        axis: 'bottom',
        // Cycles the green and blue fill mode over 2008 and 2009
        // subStyle parameters also override style parameters
        subStyle: {
            fill: ["#115fa6", "#94ae0a"]
        }
    }]
});

折线图

折线图Line系列创建了一个折线图，它是条形图的替代方案，用于显示显示进展或回归的分类数值数据。以下示例显示了折线图系列的典型配置对象

Ext.create('Ext.chart.CartesianChart', {
    renderTo: document.body,
    width: 500,
    height: 500,
    store: {
        fields: ['name', 'g1', 'g2'],
        data: [
            {"name": "Item-0", "g1": 18.34,"g2": 0.04},
            {"name": "Item-1", "g1": 2.67, "g2": 14.87},
            {"name": "Item-2", "g1": 1.90, "g2": 5.72},
            {"name": "Item-3", "g1": 21.37,"g2": 2.13},
            {"name": "Item-4", "g1": 2.67, "g2": 8.53},
            {"name": "Item-5", "g1": 18.22,"g2": 4.62},
            {"name": "Item-6", "g1": 28.51, "g2": 12.43},
            {"name": "Item-7", "g1": 34.43, "g2": 4.40},
            {"name": "Item-8", "g1": 21.65, "g2": 13.87},
            {"name": "Item-9", "g1": 12.98, "g2": 35.44},
            {"name": "Item-10", "g1": 22.96, "g2": 38.70},
            {"name": "Item-11", "g1": 0.49, "g2": 51.90},
            {"name": "Item-12", "g1": 20.87, "g2": 62.07},
            {"name": "Item-13", "g1": 25.10, "g2": 78.46},
            {"name": "Item-14", "g1": 16.87, "g2": 56.80}
        ]
    },
    interactions: ['panzoom'],

    legend: {
        docked: '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
        }
    }]
});

饼图

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

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

Ext.create('Ext.chart.PolarChart', {
    renderTo: document.body,
    width: 500,
    height: 500,
    store: {
        fields: ['name', 'g1', 'g2'],
        data: [
            {"name": "Item-0", "g1": 18.34,"g2": 0.04},
            {"name": "Item-1", "g1": 2.67, "g2": 14.87},
            {"name": "Item-2", "g1": 1.90, "g2": 5.72},
            {"name": "Item-3", "g1": 21.37,"g2": 2.13},
            {"name": "Item-4", "g1": 2.67, "g2": 8.53},
            {"name": "Item-5", "g1": 18.22,"g2": 4.62}
        ]
    },

    interactions: ['rotate'],

    //configure the legend.
    legend: {
        docked: 'bottom'
    },

    //describe the actual pie series.
    series: [{
        type: 'pie',
        xField: 'g1',
        label: {
            field: 'name',
            display: 'rotate'
        },
        donut: 25,
        style: {
            miterLimit: 10,
            lineCap: 'miter',
            lineWidth: 2
        }
    }]
});

雷达图

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

Ext.create('Ext.chart.PolarChart', {
    renderTo: document.body,
    width: 500,
    height: 500,
    store: {
        fields: ['name', 'g1', 'g2'],
        data: [
            {"name": "0", "g1": 18.34},
            {"name": "1", "g1": 2.67},
            {"name": "2", "g1": 1.90},
            {"name": "3", "g1": 21.37},
            {"name": "4", "g1": 2.67},
            {"name": "5", "g1": 18.22},
            {"name": "6", "g1": 28.51},
            {"name": "7", "g1": 34.43},
            {"name": "8", "g1": 21.65},
            {"name": "9", "g1": 12.98},
            {"name": "10", "g1": 22.96},
            {"name": "11", "g1": 0.49},
            {"name": "12", "g1": 20.87},
            {"name": "13", "g1": 25.10},
            {"name": "14", "g1": 16.87}
        ]
    },

    // Set rotation
    interactions: ['rotate'],

    // Define radial and angular axis for the radar chart.
    axes: [{
        type: 'numeric',
        position: 'radial',
        fields: 'g1',
        grid: true,
        label: {
            fill: 'black',
            y: -8
        }
    }, {
        type: 'category',
        position: 'angular',
        fields: 'name',
        grid: true,
        label: {
            fill: 'black'
        }
    }],

    series: [{
        type: 'radar',
        xField: 'name',
        yField: 'g1'
    }]
});

散点图

散点图Scatter系列创建了一个散点图，它使应用程序能够在同一可视化中显示两个以上的变量。这些变量可以映射到x、y坐标，也可以映射到元素的属性，例如半径、大小、颜色等等。

Ext.create('Ext.chart.CartesianChart', {
    renderTo: document.body,
    width: 500,
    height: 500,
    store: {
        fields: ['name', 'g1', 'g2'],
        data: [
            {"name": "Item-0", "g1": 18.34,"g2": 0.04},
            {"name": "Item-1", "g1": 2.67, "g2": 14.87},
            {"name": "Item-2", "g1": 1.90, "g2": 5.72},
            {"name": "Item-3", "g1": 21.37,"g2": 2.13},
            {"name": "Item-4", "g1": 2.67, "g2": 8.53},
            {"name": "Item-5", "g1": 18.22,"g2": 4.62},
            {"name": "Item-6", "g1": 28.51, "g2": 12.43},
            {"name": "Item-7", "g1": 34.43, "g2": 4.40},
            {"name": "Item-8", "g1": 21.65, "g2": 13.87},
            {"name": "Item-9", "g1": 12.98, "g2": 35.44},
            {"name": "Item-10", "g1": 22.96, "g2": 38.70},
            {"name": "Item-11", "g1": 0.49, "g2": 51.90},
            {"name": "Item-12", "g1": 20.87, "g2": 62.07},
            {"name": "Item-13", "g1": 25.10, "g2": 78.46},
            {"name": "Item-14", "g1": 16.87, "g2": 56.80}
        ]
    },

    axes: [{
        type: 'numeric',
        position: 'bottom'
    }, {
        type: 'numeric',
        position: 'left'
    }],
    series: [{
        type: 'scatter',
        xField: 'g1',
        yField: 'g2',
        marker: {
            radius: 4
        },
        highlight: {
            fillStyle: 'yellow',
            radius: 7,
            lineWidth: 2
        },
    }]
});

仪表盘

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

下面的代码示例给出了一个示例

Ext.create('Ext.chart.PolarChart', {
    renderTo: document.body,
    width: 500,
    height: 500,
    series: [{
        type: 'gauge',
        minimum: 100,
        maximum: 800,
        value: 400,
        donut: 30,
        colors: ["#115fa6", "lightgrey"]
    }]
});

交互

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

添加交互

要向图表添加交互，请将图表的interactions配置设置为交互配置对象的数组。每个对象必须是一个字符串，或者必须包含一个与后续部分中描述的交互类型之一匹配的类型属性。每个对象还可以包含适合特定交互的附加配置选项。

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

以下是一些基本交互的示例。

项目突出显示

“itemhighlight”交互使您能够突出显示图表上的单个数据点项目。

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

旋转

“旋转” 交互允许用户旋转饼图或雷达图，默认情况下，旋转是使用拖动手势执行的。以下代码片段是将 旋转 交互添加到饼图或雷达图的示例。

interactions: ['rotate']

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

图例存储

图表公开了一个存储，用于表示从系列收集的图例信息。从技术上讲，您可以对这个存储做任何事情。同样，这种架构可以帮助您将图例信息与图例组件分离，因此您可以使用任何技术和自定义来在任何所需的位置显示图例。

为了方便起见，我们还提供了一个默认的 图例 组件，该组件已经实现了用于显示图例的一些常见和基本功能。图表配置对象接受一个 legend 部分来启用默认图例组件并将其停靠在图表中。默认图例组件包含一个 docked 配置，它被停靠在该侧。

Ext JS 7.8.0