如何下载使用Highcharts Grid 开发web可编辑表格

Highcharts Grid 的下载和使用方式主要有两种：CDN 直接使用和本地下载自托管。

1) 直接用 CDN（最快）

适合原型、测试、快速集成。

Grid Lite

加载 JS 和 CSS：

<scriptsrc="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid-lite.css"/>

然后初始化：

Grid.grid('container',{data:{columns:{product:['Apple','Pear','Plum','Banana'],price:[1.5,2.53,5,4.5]}}});

你只需要页面里有一个：

<divid="container"></div>

2) 本地下载并使用

适合正式项目、离线环境、或想把资源放在自己服务器上。

步骤

1. 去下载页获取最新包：
   https://www.highcharts.com/download/

2. 把文件放到你项目里，比如：

   • /assets/grid/grid-lite.js
   • /assets/grid/css/grid-lite.css

3. 页面中引用：

<scriptsrc="/assets/grid/grid-lite.js"></script><linkrel="stylesheet"href="/assets/grid/css/grid-lite.css"/>

4. 再初始化 Grid：

Grid.grid('container',{data:{columns:{product:['Apple','Pear','Plum','Banana'],price:[1.5,2.53,5,4.5]}}});

3) 如果你用的是 Grid Pro

把文件名换成grid-pro.js和grid-pro.css即可：

<scriptsrc="/assets/grid/grid-pro.js"></script><linkrel="stylesheet"href="/assets/grid/css/grid-pro.css"/>

4) 选择建议

• 只读表格：Grid Lite
• 需要编辑/验证/交互：Grid Pro

5) 相关文档

• Grid 总览： https://www.highcharts.com/docs/grid/general
• 安装指南： https://www.highcharts.com/docs/grid/installation

这里把“下载后怎么用”说清楚，给你最实用的两种方式。

方式一：下载后直接引入（最简单）

适合没有打包工具，或者先快速跑起来。

1. 下载

去官方安装页或下载页获取 Grid 文件：

• https://www.highcharts.com/docs/grid/installation
• https://www.highcharts.com/download/

2. 放到你的项目里

比如放成：

• assets/grid/grid-lite.js
• assets/grid/css/grid-lite.css

3. 页面引入

<scriptsrc="/assets/grid/grid-lite.js"></script><linkrel="stylesheet"href="/assets/grid/css/grid-lite.css"/>

4. 初始化

Grid.grid('container',{data:{columns:{country:['United States','United Kingdom','Germany','France','Japan'],growth:[2.5,0.7,0.3,1.1,-0.2]}}});

页面里还要有：

<divid="container"></div>

方式二：npm + 打包工具

适合 Vite、Webpack、Next.js、Vue、React 这类项目。

安装

npminstall@highcharts/grid-lite

使用

importGridfrom'@highcharts/grid-lite/es-modules/masters/grid-lite.src.js';import'@highcharts/grid-lite/css/grid-lite.css';Grid.grid('container',{data:{columns:{country:['United States','United Kingdom','Germany','France','Japan'],growth:[2.5,0.7,0.3,1.1,-0.2]}}});

如果你想用《经济学人》风格

你可以在 Grid 外面再加一层 CSS，例如：

#container{font-family:Georgia,"Times New Roman",serif;color:#111;}#container th{background:#f4f4f4;border-bottom:1px solid #ccc;}#container td{border-bottom:1px solid #e5e5e5;padding:8px 10px;}