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

Highcharts Grid 的下载和使用方式主要有两种CDN 直接使用和本地下载自托管。1) 直接用 CDN最快适合原型、测试、快速集成。Grid Lite加载 JS 和 CSSscriptsrchttps://cdn.jsdelivr.net/npm/highcharts/grid-lite/grid-lite.js/scriptlinkrelstylesheethrefhttps://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]}}});你只需要页面里有一个dividcontainer/div2) 本地下载并使用适合正式项目、离线环境、或想把资源放在自己服务器上。步骤去下载页获取最新包https://www.highcharts.com/download/把文件放到你项目里比如/assets/grid/grid-lite.js/assets/grid/css/grid-lite.css页面中引用scriptsrc/assets/grid/grid-lite.js/scriptlinkrelstylesheethref/assets/grid/css/grid-lite.css/再初始化 GridGrid.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/scriptlinkrelstylesheethref/assets/grid/css/grid-pro.css/4) 选择建议只读表格Grid Lite需要编辑/验证/交互Grid Pro5) 相关文档Grid 总览 https://www.highcharts.com/docs/grid/general安装指南 https://www.highcharts.com/docs/grid/installation这里把“下载后怎么用”说清楚给你最实用的两种方式。方式一下载后直接引入最简单适合没有打包工具或者先快速跑起来。1. 下载去官方安装页或下载页获取 Grid 文件https://www.highcharts.com/docs/grid/installationhttps://www.highcharts.com/download/2. 放到你的项目里比如放成assets/grid/grid-lite.jsassets/grid/css/grid-lite.css3. 页面引入scriptsrc/assets/grid/grid-lite.js/scriptlinkrelstylesheethref/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]}}});页面里还要有dividcontainer/div方式二npm 打包工具适合 Vite、Webpack、Next.js、Vue、React 这类项目。安装npminstallhighcharts/grid-lite使用importGridfromhighcharts/grid-lite/es-modules/masters/grid-lite.src.js;importhighcharts/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;}