---
title: "Ext.chart.Chart"
description: "xtype 为 chart 的 Ext JS 原生组件参考。"
---

> Documentation Index
> Fetch the complete documentation index at: https://ag.879818327.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Ext.chart.Chart

源码定义：`ext-all-debug.js:63064`。分类：图表与绘图。

## 创建示例

```javascript
var component = Ext.create("Ext.chart.Chart", {
  xtype: "chart",
  animate: false,
  background: false,
  configureAxisStyles: Ext.emptyFn,
  insetPadding: 10,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `animate` | `Boolean` | `false` | 控制值或位置变化时是否使用动画。 | `animate: false` |
| `background` | `Boolean` | `false` | 控制是否启用 `background` 行为。 | `background: false` |
| `configureAxisStyles` | `Mixed` | `Ext.emptyFn` | 配置组件的 `configureAxisStyles` 选项。 | `configureAxisStyles: Ext.emptyFn` |
| `insetPadding` | `Number` | `10` | 配置组件的 `insetPadding` 选项。 | `insetPadding: 10` |
| `legend` | `Boolean` | `false` | 控制是否启用 `legend` 行为。 | `legend: false` |
| `refreshBuffer` | `Number` | `1` | 配置组件的 `refreshBuffer` 选项。 | `refreshBuffer: 1` |
| `viewBox` | `Boolean` | `false` | 控制是否启用 `viewBox` 行为。 | `viewBox: false` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `getChartStore` | `` | 读取并返回 `chartStore`。 | `component.getChartStore()` |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `maxGutters`、`store` 状态。源码涉及 `callParent()`、`addEvents()`、`on()`。 | `component.initComponent()` |
| `afterComponentLayout` | `width, height, oldWidth, oldHeight` | 在 `componentLayout` 后执行后处理。 执行时会保留父类默认行为、更新 `curWidth`、`curHeight` 状态。源码涉及 `redraw()`、`callParent()`。 | `component.afterComponentLayout(...)` |
| `redraw` | `resize` | 重绘当前组件。 执行时会更新 `chartBBox`、`resizing` 状态。源码涉及 `initializeSeries()`、`initializeAxis()`、`alignAxes()`、`getMaxGutters()`。 | `component.redraw(...)` |
| `afterRender` | `` | 生成 `after` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `callParent()`、`setCategoryNames()`、`bindStore()`、`refresh()`。 | `component.afterRender()` |
| `onAddedVml` | `` | 处理 `addedVml` 回调。 执行时会更新 `needsRedraw` 状态。 | `component.onAddedVml()` |
| `onContainerAddedVml` | `container` | 处理 `containerAddedVml` 回调。 执行时会更新 `needsRedraw` 状态。源码涉及 `isDescendantOf()`。 | `component.onContainerAddedVml(...)` |
| `getEventXY` | `e` | 读取并返回 `eventXY`。 | `component.getEventXY(...)` |
| `onClick` | `e` | 处理 `click` 回调。源码涉及 `handleClick()`。 | `component.onClick(...)` |
| `onDblClick` | `e` | 处理 `dblClick` 回调。源码涉及 `handleClick()`。 | `component.onDblClick(...)` |
| `handleClick` | `name, e` | 处理 `click`。源码涉及 `getEventXY()`。 | `component.handleClick(...)` |
| `onMouseDown` | `e` | 处理 `mouseDown` 回调。源码涉及 `getEventXY()`。 | `component.onMouseDown(...)` |
| `onMouseUp` | `e` | 处理 `mouseUp` 回调。源码涉及 `getEventXY()`。 | `component.onMouseUp(...)` |
| `onMouseMove` | `e` | 处理 `mouseMove` 回调。源码涉及 `getEventXY()`。 | `component.onMouseMove(...)` |
| `onMouseLeave` | `e` | 处理 `mouseLeave` 回调。 | `component.onMouseLeave(...)` |
| `delayRefresh` | `` | 处理 `delayRefresh` 操作。 执行时会更新 `refreshTask` 状态。 | `component.delayRefresh()` |
| `refresh` | `` | 刷新组件。 执行时会派发 `beforerefresh`、`refresh` 事件、更新 `refreshPending` 状态。源码涉及 `isVisible()`、`setShowListeners()`、`fireEvent()`、`redraw()`。 | `component.refresh()` |
| `onShow` | `` | 处理 `show` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`delayRefresh()`、`setShowListeners()`。 | `component.onShow()` |
| `setShowListeners` | `method` | 设置 `showListeners`。 | `component.setShowListeners(...)` |
| `doRefresh` | `` | 执行 `refresh` 操作。源码涉及 `setSubStore()`、`refresh()`。 | `component.doRefresh()` |
| `forceRefresh` | `container` | 处理 `forceRefresh` 操作。源码涉及 `isDescendantOf()`、`setShowListeners()`、`delayRefresh()`。 | `component.forceRefresh(...)` |
| `bindStore` | `store, initial` | 绑定 `store`。源码涉及 `refresh()`。 | `component.bindStore(...)` |
| `getStoreListeners` | `` | 读取并返回 `storeListeners`。 | `component.getStoreListeners()` |
| `setSubStore` | `subStore` | 设置 `subStore`。 执行时会更新 `substore` 状态。 | `component.setSubStore(...)` |
| `initializeAxis` | `axis` | 初始化 `ializeAxis`。源码涉及 `configureAxisStyles()`。 | `component.initializeAxis(...)` |
| `getInsets` | `` | 读取并返回 `insets`。 | `component.getInsets()` |
| `calculateInsets` | `` | 计算 `insets`。源码涉及 `getInsets()`。 | `component.calculateInsets()` |
| `alignAxes` | `` | 对齐 `axes`。 执行时会更新 `chartBBox` 状态。源码涉及 `calculateInsets()`。 | `component.alignAxes()` |
| `initializeSeries` | `series, idx, themeIndex` | 初始化 `ializeSeries`。 | `component.initializeSeries(...)` |
| `getMaxGutters` | `` | 读取并返回 `maxGutters`。 执行时会更新 `maxGutters` 状态。 | `component.getMaxGutters()` |
| `drawAxis` | `axis` | 处理 `drawAxis` 操作。 | `component.drawAxis(...)` |
| `drawCharts` | `series` | 处理 `drawCharts` 操作。 | `component.drawCharts(...)` |
| `save` | `config` | 保存当前状态。 | `component.save(...)` |
| `destroy` | `` | 销毁组件并释放关联资源。 执行时会保留父类默认行为、更新 `refreshTask` 状态。源码涉及 `bindStore()`、`callParent()`。 | `component.destroy()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `beforerefresh` | 执行 `refresh` 对应的默认操作之前触发；监听器返回 `false` 可取消默认处理。 源码在 `refresh()` 中通过 `fireEvent()` 触发。 | `listeners: { beforerefresh: function () {} }` |
| `itemclick` | 用户点击子项时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { itemclick: function () {} }` |
| `itemdblclick` | 用户双击子项时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { itemdblclick: function () {} }` |
| `itemdrag` | 拖动数据项过程中触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { itemdrag: function () {} }` |
| `itemdragend` | 数据项拖动结束后触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { itemdragend: function () {} }` |
| `itemdragstart` | 开始拖动数据项时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { itemdragstart: function () {} }` |
| `itemmousedown` | 用户按下鼠标按钮数据项时触发。 源码在 `onMouseDown()` 中通过 `fireEvent()` 触发。 | `listeners: { itemmousedown: function () {} }` |
| `itemmouseout` | 用户移出数据项时触发。 源码在 `onMouseMove()` 中通过 `fireEvent()` 触发。 | `listeners: { itemmouseout: function () {} }` |
| `itemmouseover` | 用户悬停数据项时触发。 源码在 `onMouseMove()` 中通过 `fireEvent()` 触发。 | `listeners: { itemmouseover: function () {} }` |
| `itemmouseup` | 用户松开鼠标按钮数据项时触发。 源码在 `onMouseUp()` 中通过 `fireEvent()` 触发。 | `listeners: { itemmouseup: function () {} }` |
| `refresh` | 视图刷新后触发。 源码在 `refresh()` 中通过 `fireEvent()` 触发。 | `listeners: { refresh: function () {} }` |

Source: https://ag.879818327.xyz/ext/visual/chart-chart/index.mdx