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

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

1) 直接用 CDN（最快）

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

Grid Lite

加载 JS 和 CSS：

html 复制代码

<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" />

然后初始化：

javascript 复制代码

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

你只需要页面里有一个：

html 复制代码

<div id="container"></div>

2) 本地下载并使用

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

步骤

去下载页获取最新包：

https://www.highcharts.com/download/
把文件放到你项目里，比如：
- /assets/grid/grid-lite.js
- /assets/grid/css/grid-lite.css
页面中引用：

html 复制代码

<script src="/assets/grid/grid-lite.js"></script>
<link rel="stylesheet" href="/assets/grid/css/grid-lite.css" />

再初始化 Grid：

javascript 复制代码

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 即可：

html 复制代码

<script src="/assets/grid/grid-pro.js"></script>
<link rel="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 文件：

2. 放到你的项目里

比如放成：

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

3. 页面引入

html 复制代码

<script src="/assets/grid/grid-lite.js"></script>
<link rel="stylesheet" href="/assets/grid/css/grid-lite.css" />

4. 初始化

javascript 复制代码

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

页面里还要有：

html 复制代码

<div id="container"></div>

方式二：npm + 打包工具

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

安装

bash 复制代码

npm install @highcharts/grid-lite

使用

javascript 复制代码

import Grid from '@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，例如：

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;
}