mc-skills/catalog

Fork 0

mc-skills 52efc07510 catalog: 更新 2026-04-07 11:44

2026-04-07 11:44:56 +08:00

13 KiB

Raw Blame History

JavaScript图表库

图表 数据可视化 JavaScript Canvas React Angular Vue

JavaScript 图表库

🌐 官网 • 📖 文档 • 📊 图表画廊

AG Charts 是一款功能完备、高度可定制的基于 Canvas 的 JavaScript 图表库。它具备卓越的性能，无任何第三方依赖，并支持 React、Angular 和 Vue。

AG Charts 提供两个版本：社区版和企业版。

ag-charts-community 免费使用，基于 MIT 许可证，包含核心图表类型，如饼图、面积图、柱状图、散点图和气泡图，以及 JavaScript 图表库应有的全部核心功能，包括无障碍访问、工具提示、主题、标记点、图例、坐标轴类型和次坐标轴。
ag-charts-enterprise 采用商业许可证，提供额外图表类型，如地图、桑基图、雷达图和瀑布图，以及高级交互功能，如动画、右键菜单、缩放、导航器、同步联动等，还包括金融图表。

功能与图表类型

图表类型

AG Charts 提供 20 余种 JavaScript 图表类型，每种均可完全自定义：

图表类型	AG Charts 社区版	AG Charts 企业版
柱状图	✅	✅
折线图	✅	✅
面积图	✅	✅
散点图	✅	✅
气泡图	✅	✅
饼图	✅	✅
环形图	✅	✅
组合图	✅	✅
箱线图	❌	✅
K线图（蜡烛图）	❌	✅
OHLC 图	❌	✅
热力图	❌	✅
直方图	❌	✅
南丁格尔玫瑰图	❌	✅
雷达折线图	❌	✅
雷达面积图	❌	✅
径向柱图	❌	✅
径向条形图	❌	✅
范围面积图	❌	✅
范围条形图	❌	✅
旭日图	❌	✅
树状图	❌	✅
瀑布图	❌	✅
桑基图	❌	✅
弦图	❌	✅

功能特性

AG Charts JavaScript 图表库涵盖您期望的所有功能：

功能	AG Charts 社区版	AG Charts 企业版
无障碍访问	✅	✅
本地化	✅	✅
系列高亮	✅	✅
工具提示	✅	✅
触摸支持	✅	✅
交叉线	✅	✅
图例	✅	✅
样式器	✅	✅
系列标记点	✅	✅
动画	❌	✅
右键菜单	❌	✅
十字准线	❌	✅
导航器	❌	✅
同步联动	❌	✅
缩放	❌	✅
注释	❌	✅
误差棒	❌	✅

ℹ️ 注意： 请访问定价页面查看完整功能对比。

金融图表

只需提供数据，即可以最少的配置构建支持高级注释的交互式金融图表：

const options = {
    data: getData(),
};

AgCharts.createFinancialChart(options);

创建完成后，用户即可与金融图表进行交互并添加注释。

默认图表类型为K线图（蜡烛图），另支持 OHLC 图和折线图，满足多样化数据可视化需求。

地图图表

地图系列可让您以多种方式呈现地理数据。

地图可使用形状、线条和标记点系列展示数据：

const options = {
    topology: topology,
    series: [
        {
            type: 'map-shape',
            data: pacific,
            idKey: 'name',
            title: '太平洋',
        },
        // ...
    ],
    legend: {
        enabled: true,
    },
    // ...
};

⚡️ 快速开始

AG Charts 配置简单——只需提供数据和系列类型以及其他图表选项即可。以下为原生 JavaScript 安装说明，框架专属指南请参阅 React、Angular 和 Vue 对应文档。

安装

$ npm install ag-charts-community

配置

提供容器元素

<!doctype html>
<html lang="zh">
    <head>
        <title>AG Charts 快速开始</title>
        <!-- JavaScript 图表核心库 -->
        <script src="https://cdn.jsdelivr.net/npm/ag-charts-community/dist/umd/ag-charts-community.js"></script>
    </head>
    <body>
        <!-- 图表容器 -->
        <div id="myChart"></div>
        <!-- 图表配置文件 -->
        <script src="index.js"></script>
    </body>
</html>

实例化 JavaScript 图表

// 图表选项
const options = {};

// 创建图表
const chart = agCharts.AgCharts.create(options);

定义图表数据和系列

// 图表选项
const options = {
    // 容器：用于承载图表的 HTML 元素
    container: document.getElementById('myChart'),
    // 数据：要在图表中显示的数据
    data: [
        { month: '1月', avgTemp: 2.3, iceCreamSales: 162000 },
        { month: '3月', avgTemp: 6.3, iceCreamSales: 302000 },
        { month: '5月', avgTemp: 16.2, iceCreamSales: 800000 },
        { month: '7月', avgTemp: 22.8, iceCreamSales: 1254000 },
        { month: '9月', avgTemp: 14.5, iceCreamSales: 950000 },
        { month: '11月', avgTemp: 8.9, iceCreamSales: 200000 },
    ],
    // 系列：定义使用的图表类型和数据
    series: [{ type: 'bar', xKey: 'month', yKey: 'iceCreamSales' }],
};

ℹ️ 注意： 有关使用 AG Charts 构建 JavaScript 图表的更多信息，请参阅我们的文档。

🤝 支持

企业支持

AG Charts 企业版客户可通过 ZenDesk 获得专属支持服务，由我们的支持团队和工程团队全程跟进。

Bug 报告

如果您发现了 Bug，请在本仓库的 issues 区提交报告。

问题咨询

请在 StackOverflow 使用 ag-charts 标签搜索类似问题。如未找到相关内容，可在那里发布新问题。请勿通过 GitHub issues 提问。

贡献

AG Charts 由一支位于伦敦的开发团队协同开发。如果您希望加入团队，请将申请发送至 info@ag-grid.com。

⚠️ 许可证

ag-charts-community 采用 MIT 许可证。

ag-charts-enterprise 采用商业许可证。

详情请参阅 LICENSE 文件。

AG Grid

AG Grid 是我们的旗舰产品，一款功能完备、高度可定制的 JavaScript 数据表格。它具备卓越的性能，无任何第三方依赖，并支持 React、Angular 和 Vue。

AG Charts 在 AG Grid 中作为集成图表功能的底层引擎。

了解更多请访问 ag-grid.com

关注我们，第一时间获取 AG Grid 最新动态：

13 KiB Raw Blame History Unescape Escape