# @devexperts/dxcharts-lite 中文文档
规范地址：https://npmcn.com/package/%40devexperts/dxcharts-lite/
版本：2\.7\.39
npm 元数据更新时间：2026-10-08T08:05:38.967Z
中文译文更新时间：2026-11-12T03:01:19.609Z
软件包许可：MPL 2\.0
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40devexperts/dxcharts-lite
原文对照：https://npmcn.com/package/%40devexperts/dxcharts-lite/?lang=original
项目主页：https://github.com/devexperts/dxcharts-lite#readme
源码仓库：https://github.com/devexperts/dxcharts-lite
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：2 MB，434 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：rxjs \>=6\.6\.7
- 首次发布：2023-08-16T13:46:31.936Z
- 最新版本发布：2026-10-08T08:05:38.621Z
- 近 30 天下载量：29345（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：67（近 12 个月 20 个）
## 中文简介
DX 图表属性
## 安装
```sh
npm install @devexperts/dxcharts-lite
```
也可以使用：`pnpm add @devexperts/dxcharts-lite`、`yarn add @devexperts/dxcharts-lite`、`bun add @devexperts/dxcharts-lite`
## README
# DX图 文学: 强大的财务图绘制工具
_DXcharts Lite是可视化金融数据的一种现代解决方案,其图表类型多种多样.
最初是作为数百万用户使用的大型交易应用程序的一部分开发的,
DXcharts Lite已经成熟成一个独立的产品.
它可以作为博客的简单部件或企业交易解决方案的组成部分.
_
[](https://opensource.org/licenses/MPL-2.0) [ ](https://devexperts.com/kb/dxcharts/docs/how-to-contribute) [](https://devexperts.com/dxcharts-demo/?lang=en)
* * *
## 概览
通过安装库并配置到您的需要中来启动 DXCharts lite .
- 🚀 [快开始](https://npmcn.com/package/%40devexperts/dxcharts-lite/#readme-quick-start)
- 📦 [安装](https://npmcn.com/package/%40devexperts/dxcharts-lite/#readme-installation)
- 🛠️ [创建图表](https://npmcn.com/package/%40devexperts/dxcharts-lite/#readme-create-chart)
- 📈 [设定数据](https://npmcn.com/package/%40devexperts/dxcharts-lite/#readme-set-data)
- 📄 [HTML 标记](https://npmcn.com/package/%40devexperts/dxcharts-lite/#readme-html-markup)
- ⚙️ [配置](https://npmcn.com/package/%40devexperts/dxcharts-lite/#readme-configuration)
- 🔌 [API 密码](https://npmcn.com/package/%40devexperts/dxcharts-lite/#readme-api)
- 📒 [实例](https://npmcn.com/package/%40devexperts/dxcharts-lite/#readme-examples)
- 🧮 [演示](https://npmcn.com/package/%40devexperts/dxcharts-lite/#readme-demo)
## 快速启动
### 安装
在您的工程中安装库 :
```js
npm install @devexperts/dxcharts-lite
```
`package.json` 安装后:
```json
"dependencies": {
"@devexperts/dxcharts-lite": "1.0.0",
...
}
```
### 创建图表
如果您使用 Web 包或其他捆绑器,请导入 `createChart` 方法并传递显示图表的元素作为第一个参数.
```js
export const createChartInstance = () => {
const container = document.getElementById('chart_container');
const chartInstance = DXChart.createChart(container);
return chartInstance;
};
```
这个 `createChart` 方法创建新图表实例 `ChartBootstrap` 班级和返回它.
它接受两个参数:
- `element`: 显示图表的 HTML 元素.
- `config` (可选) : 一个实例 [图表配置](https://npmcn.com/chart/chart-config/overview)。 。 。 .
> 注:设置 `width: 100%` 财务报告和审定财务报表 `height: 100%` 用于母容器. 默认情况下, 图表自动更改大小到父目录, 但您可以通过设置更改 `fixedSize` 在配置中.
你现在应该在屏幕上看到一张空的图表.
### 设定数据
要显示数据( 例如 ). `Candles`,可以使用捆绑的函数生成模拟数据. 导入 `generateCandlesData` 用它来创造蜡烛.
```js
export const generateMockData = () => {
const candles = generateCandlesData();
chart.setData({ candles });
};
```
您现在应该看到一个基本图表, 如下图:
### HTML 标记
以下是完整的快速启动代码示例:
```html
```
## 配置
您可以使用 `ChartConfig` 对象(可选).
`ChartConfig` 设置图表实例的初始属性. 以下为现有备选方案表(详见文件).
- [`FullChartConfig`](https://npmcn.com/package/%40devexperts/dxcharts-lite/docs/generated/FullChartConfig.md)
## API 密码
每个图表组件都有一个API,允许您更改苍蝇上的许多参数,在运行时修改外观,并订阅各种图表事件(比如在蜡烛上徘徊).
主要组成部分包括:
- [`ChartComponent`](https://npmcn.com/package/%40devexperts/dxcharts-lite/docs/generated/ChartComponent.md): 设置数据, 订阅数据变化
- [`XAxisComponent`](https://npmcn.com/package/%40devexperts/dxcharts-lite/docs/generated/XAxisComponent.md): 配置x轴标签
- [`YAxisComponent`](https://npmcn.com/package/%40devexperts/dxcharts-lite/docs/generated/YAxisComponent.md): 配置 Y 轴标签和类型
- [`CrossToolComponent`](https://npmcn.com/package/%40devexperts/dxcharts-lite/docs/generated/CrossToolComponent.md): Crosshair 类型, OHLC 磁铁
- [`EventsComponent`](https://npmcn.com/package/%40devexperts/dxcharts-lite/docs/generated/EventsComponent.md): 设置事件数据
- [`VolumesComponent`](https://npmcn.com/package/%40devexperts/dxcharts-lite/docs/generated/VolumesComponent.md): 设置音量数据
- [`WaterMarkComponent`](https://npmcn.com/package/%40devexperts/dxcharts-lite/docs/generated/WaterMarkComponent.md): 创建和管理水印
- [`NavigationMapComponent`](https://npmcn.com/package/%40devexperts/dxcharts-lite/docs/generated/NavigationMapComponent.md): 创建导航地图
- [`SnapshotComponent`](https://npmcn.com/package/%40devexperts/dxcharts-lite/docs/generated/SnapshotComponent.md): 创建快照
- [`HighlightsComponent`](https://npmcn.com/package/%40devexperts/dxcharts-lite/docs/generated/HighlightsComponent.md): 在标签等画布对象上绘制亮点
- [`PaneManager`](https://npmcn.com/package/%40devexperts/dxcharts-lite/docs/generated/PaneManager.md): 创建和管理窗体
- [`PaneComponent`](https://npmcn.com/package/%40devexperts/dxcharts-lite/docs/generated/PaneComponent.md): 创建和管理窗格数据序列
## 实例
我们创造了许多不同图表配置的例子. 你可以找到他们 [这里](https://github.com/devexperts/dxcharts-lite/tree/master/docs/how-to)。 。 。 .
## 演示
为了展示它的能力,我们创造了一个 [演示版本](https://devexperts.com/dxcharts-demo/) 基于 DX Charts 文学. 探索我们图书馆的全部动力!
## 常见问题
### @devexperts/dxcharts-lite 是什么？
DX 图表属性
### 如何安装 @devexperts/dxcharts-lite？
在项目目录运行 npm install @devexperts/dxcharts-lite，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：rxjs（\>=6\.6\.7）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @devexperts/dxcharts-lite 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @devexperts/dxcharts-lite 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @devexperts/dxcharts-lite 可以商用吗？
@devexperts/dxcharts-lite 使用 MPL 2\.0 许可。声明的许可为 MPL 2\.0，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。
### @devexperts/dxcharts-lite 的下载量有多少？
根据 npm 官方下载统计，@devexperts/dxcharts-lite 在 2026/10/12 – 2026/11/10 这 30 天内被下载 29,345 次，日均约 978 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @devexperts/dxcharts-lite 还在维护吗？
最新版本 2\.7\.39 发布于 2026/10/08（1 个月前）；至今共发布 67 个版本，其中过去 12 个月发布了 20 个；首次发布于 2023/08/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。