Grid 表格安装
Highcharts Grid 提供两个版本，API相同但功能范围和许可不同。
-
Highcharts Grid Lite --免费版，专注于查看和交互数据。
-
Highcharts Grid Pro -- 商业版，增加编辑、验证、迷你图、事件和高级工作流程。
如果只需要只读、交互式表格，可以从 Lite 版开始。需要编辑、数据验证、事件或迷你图时切换到 Pro 版。
试用后再安装
无需安装即可观看网格演示：
安装
使用打包工具（选项一）、内容分发网络（选项二）或自托管（选项三）即可开始使用 Highcharts Grid。
选项一：NPM 和打包工具
最适合使用 Vite、Webpack、Next.js 或其他现代构建工具的项目。
第一步：安装
bash
npm install @highcharts/grid-lite第二步：在你的 HTML 中添加容器
html
<div id="container"></div>第三步：创建表格
js
import Grid from '@highcharts/grid-lite/es-modules/masters/grid-lite.src.js';
import '@highcharts/grid-lite/css/grid-lite.css';
Grid.grid('container', {
dataTable: {
columns: {
product: ['Apple', 'Pear', 'Plum', 'Banana'],
price: [1.5, 2.53, 5, 4.5]
}
}
});提示： 使用 TypeScript？类型定义会自动包含------无需额外安装包。
选项二：CDN 和静态资源
适合快速原型开发，使用 CodePen、JSFiddle 或无需构建工具的项目。
完整 HTML：
html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid-lite.css" />
</head>
<body>
<div id="container"></div>
<script>
Grid.grid('container', {
dataTable: {
columns: {
product: ['Apple', 'Pear', 'Plum', 'Banana'],
price: [1.5, 2.53, 5, 4.5]
}
}
});
</script>
</body>
</html>提示： 想锁定到特定版本？
请使用：https://cdn.jsdelivr.net/npm/@highcharts/grid-lite@2.0.0/grid-lite.js
选项三：下载并自行托管
当你需要离线设置或必须从你自己域名提供资源时，这个选项最合适。
- 从highcharts.com/download下载最新的 Grid 软件包。
- 将 JS/CSS 文件放在你的服务器上。
- 直接引用它们：
js
<script src="/assets/grid/grid-lite.js"></script>
<link rel="stylesheet" href="/assets/grid/css/grid-lite.css" />使用 Grid Pro
切换到 Grid Pro 以进行编辑、验证、迷你图和高级功能。
安装 Grid Pro
bash
# Basic installation
npm install @highcharts/grid-pro导入并配置
js
import Grid from '@highcharts/grid-pro/es-modules/masters/grid-pro.src.js';
import '@highcharts/grid-pro/css/grid-pro.css';
// Create grid with Pro features
Grid.grid('container', {
dataTable: {
columns: {
product: ['Apple', 'Pear', 'Plum', 'Banana'],
price: [1.5, 2.53, 5, 4.5],
inStock: [true, true, false, true]
}
},
columns: [{
id: 'product',
cells: {
editable: true
}
}, {
id: 'price',
cells: {
editable: true,
format: '${value}'
}
}, {
id: 'inStock',
cells: {
editable: true
}
}]
});框架集成
Grid 可以无缝集成大多数主流的 JavaScript 框架。
安装:
bash
npm install @highcharts/grid-liteGridComponent.tsx:
js
import { useEffect, useRef } from 'react';
import Grid from '@highcharts/grid-lite/es-modules/masters/grid-lite.src.js';
import '@highcharts/grid-lite/css/grid-lite.css';
export function GridComponent({ config }: { config: Grid.Options }) {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!containerRef.current) return;
const grid = Grid.grid(containerRef.current, config);
return () => grid?.destroy();
}, [config]);
return <div ref={containerRef} />;
}其他框架
下一步
既然 Grid 已经安装好，来探索你可以构建的内容：
从旧版本升级？ 查看 迁移指南 以获取从 Grid 1.x 或 Dashboards 3.x 升级的详细说明