图表包包含一个类的层次结构提供数据的可视化功能，包括系列、轴、相互作用和机制实现标记和说明。本教程提供一个这些类相互作用的概述和每个类的功能的概述。下面的章节涵盖了特定的轴,系列,和交互.
安装 Sencha 图表
Ext JS类库默认没有包含图表. 为了使用图表，简单添加 “charts” (**“sencha-charts”** 如果工作在 Ext JS 5.x) 到requires模块在Sencha Cmd生成的程序的 {appRoot}/app.json 文件. 添加一个包名到requires数组运行Cmd使包在你的程序可用.
然后，确保程序已经重建，程序可以用下面的命令重建:
sencha app build也可以激活 “app watch”:
sencha app watchSencha app watch监控程序的资源和重建在检测到变化时.
备注: 关于更多使用Sencha Cmd构建apps请看Intro to Cmd 引导.
不通过Sencha Cmd使用图表
如果你想使用图表，但不想用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
<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 performLayout 方法必须要重写. 例如, 一个图表需要回应到轴的厚度改变和重新计算系列区域.
这是三种类型的图表:
- cartesian/chart - 创建一个图表系列实现标绘值使用笛卡尔坐标。 这样的例子包括柱、区、分散、和线图表.
- polar - 创建一个图表系列实现使用极坐标图值。这样的例子包括圆和径向图表.
- spacefilling - 创建一个表,填满整个区域的图表.
“ext-charts” 包 (从4.x传承下来的图表包 - 在 5.x里可用但在6.x里就淘汰掉了)试图通过评估系列类型自动判定图表类型. 这允许用户简单的设置xtype为‘chart’. 虽然, “sencha-charts” (_**“charts”**_ 是6.x开始使用的包名) 在一些情形下需要指定的xtype. Cartesian Charts(笛卡尔图表)是比较通用的图表，并且xtype被映射到‘chart’的xtype. 设置一个‘chart’的 xtype 使得假设你想要的一个Bar, Line, Scatter, 或者 Area 图表. 其他图表的类型将需要指定一个xtype 为‘polar’ 或者‘spacefilling’.
图表组件管理
一个图表组件管理如下项:
- Axes - 通过Ext.chart.axis.Axis访问并且展现所有被定义和可视化绘制的轴. 这是一个混合的集合.
- Series - 通过 Ext.chart.series.Series访问并展现所有一系列正在绘制的图表. 可以是line, bar, scatter等等. 这同样是一个混合的集合.
- Interactions - 它们是直接控制series 和 axes的控制器,当某些特定的事件被识出.
- Legend Store - 展现从series收集到的图例信息. 通常你可以附件一个数据列表到这个store 并且自动更新图例信息的变化.
Axes(坐标轴)
我们提供了 Ext.chart.axis.Axis 去展现所有类型的坐标轴. 这些轴对象根据停靠的位置展现不同的效果.
- left/right - 垂直轴.
- top/bottom - 水平轴.
坐标轴帮助 series映射数据值到坐标系. 它们被绑定到需要展示的数据类型.
- numeric - 这类附加到坐标轴的数据是数值型的,并且连续的.
- time - 这类附加到坐标轴的数据是(或者被转换为) 一个日期/时间值型的; 它是连续的.
- category - 这类附加到轴的数据属于一个有限集. 这些数据沿轴均匀放置.
轴的行为很容易被改变通过设置不同类型的轴layout 和轴 segmenter.
Series
Series是具体的可视化扩展的一个抽象类, 例如Line Series, Bar Series, 或者Scatter Series.
Series类本身包含的代码对于这些series是通用的, 例如event handling, highlighting, markers, labels, 等等.
下面的部分描述了有效的series类型. 它同时也展示了一个完整的series配置示例, 包含Chart, Axis, 和 Series 选项. 更多的细节信息, 请看Series文档.
Area
Area series 创建一个堆叠式的图表, 通常显示多个聚合信息的图层.跟其它series类似, Area series 必须被添加到图表的 series 配置中去.
你可以在stacked series上指定多个y 字段，例如Area series 和 Bar series.典型的Area series配置对象看起像下面的示例代码:
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
Bar series 创建一个堆叠或者可分组的条形图, 经常用来显示数值型分类数据表明进步或者后退. 注意与旧版的图表包截然不同, 一个Bar series指一个纵向的bar series, 或者一个column series. 您可以通过设置 flipXY 为true 获得一个水平方向的图表.
Bar series 可堆叠,可分组. 您可以设置stacked 为 false 切换到分组模式.
下面的例子演示一个简单的Bar chart:
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
Line series 创建线状图表, 相对于bar Chart, 它是另外一个选择用来展示数值型分类数据表明进步或者后退. 下面的例子演示一个典型的线状图的配置对象:
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
Pie series 创建一个饼图, 一个伟大的方式来显示定量信息为若干类, 例如, 一年中的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
Radar series创建一个雷达图, 个伟大的方式来显示不同的量化约束数值分类的比较. 一个雷达图如下面示例:
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
Scatter series 创建散射图, 使得一个程序可以在同一个可视化界面显示超过两个变量. 这些变量可以被映射到 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
Gauge series 创建衡量图表, 通常用于在某些变量中显示进度. 除了使用 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"]
}]
});Interactions
这个章节介绍Sencha Charts包中的交互特性. 通过利用这些特性,您可以创建友好交互的图表 使得用户可以更好的查看和导航复杂的数据集.
Adding Interactions
给图表添加交互, 给图表的interactions 配置项设置一个交互配置对象数组. 每个对象必须是一个字符串或者必须包含随后章节会描述到的交互类型. 每个对象还可以包含适用的特定交互配置选项.
You can define your own interaction by extending the Ext.chart.interactions.Abstract class and registering the name using an alias with the “interaction” prefix. For example, if you want to create an interaction called “remove”, create an alias of the class named “interaction.remove”, then set the type: 'remove' in the interaction config.
Here are a couple of examples of basic interactions.
Item Highlighting
The “itemhighlight” interaction enables you to highlight individual data point items on the chart.
This interaction is implemented by the Ext.chart.interactions.ItemHighlight class. See the class documentation for detailed configuration options.
Rotate
The “rotate” interaction enables users to rotate a pie or a radar Chart, by default the rotation being performed using a drag gesture. The following code snippet is an example of how simple it is to add the rotate interaction to your pie or radar Charts:
interactions: ['rotate']This interaction is implemented by the Ext.chart.interactions.Rotate class. See the class documentation for detailed configuration options.
Legend Store
The Chart exposes a store to represent legend information collected from series. Technically, you can do anything with this store. Again, this architecture can help you decouple the legend information from the legend component, so you can use any technology and customization for showing the legend at any desired place.
For you convenience, we also provide a default Legend component that already implements some common and basic functionality for displaying legends. The Chart configuration object accepts a legend section to enable the default Legend component and dock it in the Chart. The default Legend component contains a dock config and it is docked on that side.