图表入门

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

安装 Sencha Charts

Sencha Charts 默认不包含在 Ext JS 库中。为了包含 charts 包，只需将 "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

如果您想使用 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">

另请参阅 使用开放式工具

Chart 组件类

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

有三种类型的图表

• cartesian/chart（笛卡尔/图表）- 为使用笛卡尔坐标绘制值的系列实现创建 Chart。例如，包括柱状图、面积图、散点图和折线图。
• polar（极坐标）- 为使用极坐标绘制值的系列实现创建图表。例如，包括饼图和雷达图。
• spacefilling（空间填充）- 创建一个填充图表整个区域的图表。

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

Chart 组件管理

Chart 组件管理以下项目

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

坐标轴

我们提供 Ext.chart.axis.Axis 来表示各种坐标轴。坐标轴对象根据其停靠位置以不同的方式工作。

• left/right（左/右）- 坐标轴是垂直的。
• top/bottom（上/下）- 坐标轴是水平的。

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

• numeric（数值）- 附加到此坐标轴的数据是数值且连续的。
• time（时间）- 附加到此坐标轴的数据是（或转换为）日期/时间值；它是连续的。
• category（类别）- 附加到此坐标轴的数据属于有限集。数据点沿坐标轴均匀放置。

通过为坐标轴设置不同类型的坐标轴 layout（布局）和坐标轴 segmenter（分段器），可以轻松更改坐标轴的行为。

系列

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

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

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

面积图

Area（面积）系列创建堆积面积图，通常用于显示多个聚合信息层。与其他系列类似，面积系列必须添加到 Chart 的 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（柱状）系列创建可堆叠或可分组的柱状图，通常用于显示显示进展或回归的分类数字数据。请注意，与旧的 chart 包相反，柱状系列指的是垂直柱状系列，或列系列。您可以通过将 Chart 的 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 包中的交互功能。通过利用这些功能，您可以创建高度交互的图表，使用户能够可视化和导航复杂的数据集。

添加交互

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

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

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

项目高亮

"itemhighlight" 交互使您能够在图表上高亮显示单个数据点项目。

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

旋转

"rotate" 交互使用户能够旋转饼图或雷达图。默认情况下，旋转通过拖动手势进行。以下代码片段展示了如何轻松地将 rotate 交互添加到您的饼图或雷达图。

interactions: ['rotate']

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

图例存储

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

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