ExtReact 7.5.0

显示私有类

图表入门

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

图表组件类

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

有三种类型的图表

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

笛卡尔图表是最常用的，并映射到 'chart' 的 xtype。设置 'chart' 的 xtype 假设您想要一个 柱状图、折线图、散点图 或 区域图。其他类型的图表可以指定为 'polar' 或 'spacefilling'。

图表组件管理

图表组件管理以下项目

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

坐标轴

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

left/right - 坐标轴是垂直的。
top/bottom - 坐标轴是水平的。

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

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

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

系列

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

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

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

区域图

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

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

展开代码

JS 运行

import React, { Component } from 'react';
import { Cartesian } from '@sencha/ext-charts';
import { ExtReact } from '@sencha/ext-react';

export default class MyExample extends Component {

   store = Ext.create('Ext.data.Store', {
        fields: ['name', 'data1', 'data2', 'data3'],
        data: [
         { 'name': 'metric one', 'data1': 10, 'data2': 12, 'data3': 14 },
         { 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16 },
         { 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14 },
         { 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6 },
         { 'name': 'metric five', 'data1': 27, 'data2': 38, 'data3': 36 }
        ]
   })

   render() {
       return (
            <ExtReact>
                <Cartesian
                    store={this.store}
                    series={[{
                    type: 'area',
                    xField: 'name',
                    yField: ['data1', 'data2', 'data3']
                    }]}
                    axes={[{
                    type: 'category',
                    position: 'bottom',
                    fields: ['name'],
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    }
                }]}
                />
            </ExtReact>
       )
   }
}

柱状图

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

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

展开代码

JS 运行

import React, { Component } from 'react';
import { ExtReact } from '@sencha/ext-react';
import { Cartesian } from '@sencha/ext-charts';

export default class MyExample extends Component {

   store = Ext.create('Ext.data.Store', {
        fields: ['name', 'data1', 'data2', 'data3'],
        data: [
         { 'name': 'metric one', 'data1': 10  },
         { 'name': 'metric two', 'data1': 7   },
         { 'name': 'metric three', 'data1': 5 },
         { 'name': 'metric four', 'data1': 2  },
         { 'name': 'metric five', 'data1': 2  }
        ]
   })

   render() {
       return (
          <ExtReact>
                <Cartesian
                    store={this.store}
                    series={[{
                    type: 'bar',
                    xField: 'name',
                    yField: 'data1'
                    }]}
                    axes={[{
                    type: 'category',
                    position: 'bottom',
                    fields: ['name'],
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    }
                },{
                    type: 'numeric',
                    position: 'left',
                    fields: 'data1'
                }]}
                />
          </ExtReact>
       )
   }
}

折线图

Line 系列创建折线图，它是柱状图的替代方案，用于显示分类的数字数据，这些数据展示了进展或回归。

展开代码

JS 运行

import React, { Component } from 'react';
import { ExtReact } from '@sencha/ext-react';
import { Cartesian } from '@sencha/ext-charts';

export default class MyExample extends Component {

   store = Ext.create('Ext.data.Store', {
        fields: ['name', 'data1', 'data2', 'data3'],
        data: [
            { name: 'metric one', data1: 14, data2: 19 },
            { name: 'metric two', data1: 16, data2: 7 },
            { name: 'metric three', data1: 11, data2: 25 },
            { name: 'metric four', data1: 6, data2: 4 },
            { name: 'metric five', data1: 36, data2: 12 }
        ]
   })

   render() {
       return (
           <ExtReact>
                <Cartesian
                    store={this.store}
                    interactions={['rotate']}
                    axes={[{
                    type: 'numeric',
                    position: 'left',
                    fields: ['data1'],
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    },
                    grid: true,
                    minimum: 0
                    }, {
                    type: 'category',
                    position: 'bottom',
                    fields: ['name'],
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    }
                }]}
                series={[{
                    type: 'line',
                    style: {
                        stroke: '#30BDA7',
                        lineWidth: 2
                    },
                    xField: 'name',
                    yField: 'data1',
                    marker: {
                        type: 'path',
                        path: ['M', - 4, 0, 0, 4, 4, 0, 0, - 4, 'Z'],
                        stroke: '#30BDA7',
                        lineWidth: 2,
                        fill: 'white'
                    }
                    }, {
                    type: 'line',
                    fill: true,
                    style: {
                        fill: '#96D4C6',
                        fillOpacity: .6,
                        stroke: '#0A3F50',
                        strokeOpacity: .6,
                    },
                    xField: 'name',
                    yField: 'data2',
                    marker: {
                        type: 'circle',
                        radius: 4,
                        lineWidth: 2,
                        fill: 'white'
                    }
                }]}
                />
            </ExtReact>
       )
   }
}

饼图

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

展开代码

JS 运行

import React, { Component } from 'react';
import { ExtReact } from '@sencha/ext-react';
import { Polar } from '@sencha/ext-charts';

export default class MyExample extends Component {

    store = Ext.create('Ext.data.Store', {
        fields: ['name', 'data1'],
        data: [
             { name: 'metric one', data1: 14 },
             { name: 'metric two', data1: 16 },
             { name: 'metric three', data1: 14 },
             { name: 'metric four', data1: 6 },
             { name: 'metric five', data1: 36 }
        ]
   })

   render() {
       return (
           <ExtReact>
                <Polar
                    store={this.store}
                    theme="green"
                    interactions={['rotate']}
                    series={[{
                    type: 'pie',
                    angleField: 'data1',
                    donut: 30,
                    label: {
                        field: 'name',
                        display: 'rotate'
                    },
                    }]}
                />
            </ExtReact>
       )
   }
}

雷达图

Radar 系列创建雷达图，它是显示有限数量类别的不同定量值比较的好方法。

展开代码

JS 运行

import React, { Component } from 'react';
import { ExtReact } from '@sencha/ext-react';
import { Polar } from '@sencha/ext-charts';

export default class MyExample extends Component {

   store = Ext.create('Ext.data.Store', {
        fields: ['name', 'data1'],
        data: [
             { name: 'metric one', data1: 14 },
             { name: 'metric two', data1: 16 },
             { name: 'metric three', data1: 14 },
             { name: 'metric four', data1: 6 },
             { name: 'metric five', data1: 36 }
        ]
   })

   render() {
       return (
           <ExtReact>
                <Polar
                    store={this.store}
                    theme="green"
                    interactions={['rotate']}
                    series={[{
                    type: 'radar',
                    angleField: 'name',
                    radiusField: 'data1',
                    style: {
                        fillStyle: '#388FAD',
                        fillOpacity: .1,
                        strokeStyle: '#388FAD',
                        strokeOpacity: .8,
                        lineWidth: 1
                    }
                    }]}
                    axes={[{
                    type: 'numeric',
                    position: 'radial',
                    fields: 'data1',
                    style: {
                        estStepSize: 10
                    },
                    grid: true
                    }, {
                    type: 'category',
                    position: 'angular',
                    fields: 'name',
                    style: {
                        estStepSize: 1
                    },
                    grid: true
                }]}
                />
            </ExtReact>
       )
   }
}

散点图

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

展开代码

JS 运行

import React, { Component } from 'react';
import { ExtReact } from '@sencha/ext-react';
import { Cartesian } from '@sencha/ext-charts';

export default class MyExample extends Component {

   store = Ext.create('Ext.data.Store', {
        fields: ['name', 'data1', 'data2', 'data3'],
        data: [
            { name: 'metric one', data1: 14, data2: 19 },
            { name: 'metric two', data1: 16, data2: 7 },
            { name: 'metric three', data1: 11, data2: 25 },
            { name: 'metric four', data1: 6, data2: 4 },
            { name: 'metric five', data1: 36, data2: 12 }
        ]
   })

   render() {
       return (
           <ExtReact>
                <Cartesian
                    store={this.store}
                    interactions={['rotate']}
                    axes={[{
                    type: 'numeric',
                    position: 'left',
                    fields: ['data1'],
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    },
                    grid: true,
                    minimum: 0
                    }, {
                    type: 'category',
                    position: 'bottom',
                    fields: ['name'],
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    }
                }]}
                series={[{
                    type: 'scatter',
                    highlight: {
                        size: 12,
                        radius: 12,
                        fill: '#96D4C6',
                        stroke: '#30BDA7'
                    },
                    fill: true,
                    xField: 'name',
                    yField: 'data2',
                    marker: {
                        type: 'circle',
                        fill: '#30BDA7',
                        radius: 10,
                        lineWidth: 0
                    }
                }]}
                />
            </ExtReact>
       )
   }
}

仪表图

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

展开代码

JS 运行

import React, { Component } from 'react';
import { ExtReact } from '@sencha/ext-react';
import { Polar } from '@sencha/ext-charts';

export default class MyExample extends Component {

   store = Ext.create('Ext.data.Store', {
        fields: ['name', 'data1', 'data2', 'data3'],
        data: [{
            mph: 65,
            fuel: 50,
            temp: 150,
            rpm: 6000
        }]
   })

   render() {
       return (
           <ExtReact>
                <Polar
                    store={this.store}
                    series={[{
                    type: 'gauge',
                    angleField: 'mph',
                    needle: true,
                    donut: 30
                    }]}
                />
            </ExtReact>
       )
   }
}

交互

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

添加交互

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

您可以通过扩展 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 组件包含一个 dock 配置，它停靠在该侧。

目录

简介

术语、图标和标签

访问级别

成员类型

成员语法

成员标志

类图标

成员图标

导航和功能

类成员快速导航菜单

Getter 和 Setter 方法

历史记录栏

搜索和过滤器

API 文档类元数据

展开和折叠示例及类成员

桌面与移动视图

查看类源代码

ExtReact 7.5.0

目录

图表入门

图表组件类

图表组件管理

坐标轴

系列

区域图

柱状图

折线图

饼图

雷达图

散点图

仪表图

交互

添加交互

项目高亮

旋转

图例存储

ExtReact 7.5.0