# @fabriq/apexcharts 中文文档

规范地址：https://npmcn.com/package/%40fabriq/apexcharts/

版本：3\.37\.0
npm 元数据更新时间：2025-08-16T23:57:27.892Z
中文译文更新时间：2026-11-14T08:03:19.286Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fabriq/apexcharts
原文对照：https://npmcn.com/package/%40fabriq/apexcharts/?lang=original
项目主页：https://apexcharts.com/
源码仓库：https://github.com/apexcharts/apexcharts.js

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：4.6 MB，183 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- 首次发布：2025-08-16T23:57:27.261Z
- 最新版本发布：2025-08-16T23:57:27.559Z
- 近 30 天下载量：3358（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

一个 JavaScript 图表库

## 安装

```sh
npm install @fabriq/apexcharts
```

也可以使用：`pnpm add @fabriq/apexcharts`、`yarn add @fabriq/apexcharts`、`bun add @fabriq/apexcharts`

## README

![](https://apexcharts.com/media/apexcharts-logo.png)

[![License](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://github.com/apexcharts/apexcharts.js/blob/master/LICENSE) [![build](https://api.travis-ci.com/apexcharts/apexcharts.js.svg?branch=master)](https://travis-ci.com/apexcharts/apexcharts.js) ![downloads](https://img.shields.io/npm/dm/apexcharts.svg) [![ver](https://img.shields.io/npm/v/apexcharts.svg)](https://www.npmjs.com/package/apexcharts) ![size](https://badgen.net/bundlephobia/min/apexcharts?label=size) [![](https://badgen.net/npm/types/apexcharts)](https://cdn.jsdelivr.net/npm/apexcharts@3.12.0/types/apexcharts.d.ts) [![prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/apexcharts/badge)](https://www.jsdelivr.com/package/npm/apexcharts) [![](https://badgen.net/codeclimate/maintainability/apexcharts/apexcharts.js)](https://codeclimate.com/github/apexcharts/apexcharts.js) ![](https://badgen.net/codeclimate/tech-debt/apexcharts/apexcharts.js)

[![](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Create%20visualizations%20with%20this%20free%20and%20open-source%20JavaScript%20Chart%20library&url=https://www.apexcharts.com&hashtags=javascript,charts,visualizations,developers,apexcharts)

一个现代的JavaScript图表库,它允许您用简单的API和100+即用样本构建交互式数据可视化. Apex Charts 包含了十几种图表类型,在你的应用软件和仪表板中提供优美的,响应性的可视化功能. ApexCharts是一个MIT许可的开源项目,可用于商业和非商业项目.

[![](https://apexcharts.com/media/apexcharts-banner.png)](https://apexcharts.com/javascript-chart-demos/)

  

## 浏览器支持

| [![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/)  
火花 | [![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/)  
颜色 | [![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/)  
萨法里 | [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/)  
边缘 | [![IE](https://user-images.githubusercontent.com/17712401/124668393-30772d00-de87-11eb-9360-3199c3b68b95.png)](http://godban.github.io/browsers-support-badges/)  
IE11 数据 |
| --- | --- | --- | --- | --- |
| 31+ | 35+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ | 6+ | 边缘 | [(环境倡议11)](https://npmcn.com/package/%40fabriq/apexcharts/#readme-using-it-with-ie11) ✔ |

## 下载和安装

##### 通过 npm 安装

```bash
npm install apexcharts --save
```

##### 直接的 < script> 包括

```html
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
```

## Vue/反应/Angular/Stencil包装器

与第三方框架容易结合

-   [vue- 缩写](https://github.com/apexcharts/vue-apexcharts)
-   [反应-缩略图](https://github.com/apexcharts/react-apexcharts)
-   [纳克-缩略图](https://github.com/apexcharts/ng-apexcharts) - 插件来自 [莫里斯·雅纳泽克](https://morrisj.net/)
-   [平面图](https://github.com/apexcharts/stencil-apexcharts)

### 非正式包装

除上述通俗框架之外,其他包装的有用链接

-   [上图](https://github.com/dreamRs/apexcharter) - Htmlwidget的顶级图
-   [顶级.rb](https://github.com/styd/apexcharts.rb) - Ruby包装图
-   [拉帕克图](https://github.com/ArielMejiaDev/larapex-charts) - 拉拉维尔包装图
-   [blazor 缩略图](https://github.com/apexcharts/Blazor-ApexCharts) - 布拉佐尔包装图 [演示](https://apexcharts.github.io/Blazor-ApexCharts/)
-   [丝绒-缩略图](https://github.com/galkatz373/svelte-apexcharts) - 顶级图的斯维尔特包装器

## 使用量

```js
import ApexCharts from 'apexcharts'
```

要创建配置最小的基本条形图,请写作:

```js
var options = {
  chart: {
    type: 'bar'
  },
  series: [
    {
      name: 'sales',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    }
  ],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
```

这将形成下图

[![](https://apexcharts.com/media/first-bar-chart.svg)](https://apexcharts.com/javascript-chart-demos/column-charts/)

### 一点点比基本

您可以创建不同图表的组合,同步它们,并以无限的可能性呈现出所期望的外观. 下面是带有github风格的同步图表的例子.

[![](https://apexcharts.com/media/github-charts.gif)](https://apexcharts.com/javascript-chart-demos/area-charts/github-style/)

## 互动

缩放、潘和通过数据滚动。 使用这些选择进行选择并加载其他图表. 显示一些交互作用的例子

[![interactive chart](https://apexcharts.com/media/interactivity.gif)](https://codepen.io/apexcharts/pen/QrbEQg)

## 动态序列更新

另一种方法是下潜图表,其中一种选择更新了其他图表的数据. 将动态序列加载到图表的示例如下:

[![dynamic-loading-chart](https://apexcharts.com/media/dynamic-selection.gif)](https://apexcharts.com/javascript-chart-demos/column-charts/dynamic-loaded-chart/)

## 说明

说明允许您就特定值或轴值编写自定义文本。 珍贵地拓展了您图表的视觉吸引力并让其更加翔实.

[![annotations](https://apexcharts.com/media/annotations.png)](https://apexcharts.com/docs/annotations/)

## 混合图

可以结合多个图表类型来创建组合/混合图表. 可能的组合可以是一行/一行/一列并用一行图. 每个图表类型都可以有自己的y轴.

[![annotations](https://apexcharts.com/wp-content/uploads/2018/05/line-column-area-mixed-chart.svg)](https://apexcharts.com/javascript-chart-demos/mixed-charts/)

## 烛台

使用烛台图(通用财务图)来描述一种证券,衍生物,或货币的价格变化. 下面的图像显示您如何使用另一个图表作为刷子/预览面板, 它充当浏览主烛台图表的手柄 .

[![candlestick](https://apexcharts.com/media/candlestick.png)](https://apexcharts.com/javascript-chart-demos/candlestick-charts/)

## 热图

使用热图通过颜色和阴影来表示数据. 它们经常用于收集更大的数据,对识别模式和重点领域很有价值.

[![heatmap](https://apexcharts.com/media/heatmap-charts.png)](https://apexcharts.com/javascript-chart-demos/heatmap-charts/)

## 高地语

微量测量仪是仪表板的重要组成部分,对显示单系列数据有用. 这些测量仪的演示:

[![radialbar-chart](https://apexcharts.com/media/radialbars-gauges.png)](https://apexcharts.com/javascript-chart-demos/radialbar-charts/)

## 闪光线

利用闪光线来显示数据的趋势,例如偶尔的增减、货币周期,或显示最极端和最低值:

[![sparkline-chart](https://apexcharts.com/media/sparklines.png)](https://apexcharts.com/javascript-chart-demos/sparklines/)

## 您的下一个项目需要高级数据网格吗 ?

我们和野蛮人合作 创造了地球上最快的数据网 Ignite UI Grids可以处理无限行和列的数据,同时提供自定义模板和实时数据更新的访问.

[![](https://apexcharts.com/media/infragistics-data-grid.png)](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid)

设计出一种直观的API来方便地进行主题和品牌制作,可以快速地用最小的手接编码来绑定数据. 网格可以在你最喜欢的框架中找到:

[角数据网格](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) | [反应数据网格](https://www.infragistics.com/products/ignite-ui-react/react/components/grids) | [布拉佐尔数据网格](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/data-grid) | [Web 组件数据Grid](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/data-grid) | [j 查询数据网格](https://www.igniteui.com/grid/overview)

## 包括什么

下载捆绑包括以下文件和目录,在 Dist 文件夹中提供一个已修改的单文件. 每个资产,包括图标/cs,都被捆绑在js本身,以避免加载多文件.

```
apexcharts/
├── dist/
│   └── apexcharts.min.js
├── src/
│   ├── assets/
│   ├── charts/
│   ├── modules/
│   ├── utils/
│   └── apexcharts.js
└── samples/
```

## 与 IE11 一起使用

如果您需要与 IE11 工作, 在包含 Apex 图之前, 您需要包含这些多填充

-   [承诺填充](https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js)
-   [类列表.js](https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill)
-   [调整观察员多填充的大小](https://cdn.jsdelivr.net/npm/@juggle/resize-observer)
-   [查找Index 数据](https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn) - 只有当您需要时间/距离图时,您才会需要这个
-   [缩写](https://unpkg.com/canvg@3.0.4/lib/umd.js) - 只有需要PNG下载图表,你才会需要这个

## 发展

#### 安装依赖关系并运行工程

```bash
npm install
npm run dev
```

这将启动 Webpack 手表和任何更改 `src` 文件夹将自动编译,输出将在 `dist` 文件夹.

#### 缩小斜弧

```bash
npm run build
```

## 我接下来要去哪儿?

去那边 [文档](https://apexcharts.com/docs/) 一节将更多阅读如何使用不同种类的图表,并探索所有选项.

## 联系人

电子邮件 : [信息库@apexcharts.com](https://npmcn.com/package/%40fabriq/apexcharts/info@apexcharts.com)

微博: [@ apexcharts (缩写)](https://twitter.com/apexcharts)

脸书: [fb.com/图表](https://facebook.com/apexcharts)

## 依赖性

顶图使用 [SVG.js (西班牙语)](https://svgdotjs.github.io/) 用于绘制外形,动画,应用svg滤波器,并多出在罩下. 库被捆绑在最终的构建文件中,所以不需要包含它.

## 许可证

Apex Charts根据麻省理工学院的许可发布. 只要版权标题完好无损, 您可以自由使用、 修改和分发此软件 .

## 常见问题

### @fabriq/apexcharts 是什么？

一个 JavaScript 图表库

### 如何安装 @fabriq/apexcharts？

在项目目录运行 npm install @fabriq/apexcharts，或使用 pnpm add / yarn add / bun add。

### @fabriq/apexcharts 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fabriq/apexcharts 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @fabriq/apexcharts 可以商用吗？

@fabriq/apexcharts 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fabriq/apexcharts 的下载量有多少？

根据 npm 官方下载统计，@fabriq/apexcharts 在 2026/10/14 – 2026/11/12 这 30 天内被下载 3,358 次，日均约 112 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fabriq/apexcharts 还在维护吗？

最新版本 3\.37\.0 发布于 2025/08/17（1\.2 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/08/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。