学习创建支持演示公式的复杂表格｜《经济学人》杂志巨无霸指数的可视化图表代码
The Big Mac index巨无霸指数是《经济学人》杂志发明的一个通俗指标，用来衡量各国货币相对美元是高估还是低估。
这是一个2025年巨无霸指数（Big Mac Index）的数据表格，使用 Highcharts Grid 来实现。
可以在经济学人数据服务找到更多有关数据的信息：
GitHub - TheEconomist / big-mac-dataData and methodology for the Big Mac index. Contribute to TheEconomist/big-mac-data development by creating an account on GitHub.https://github.com/TheEconomist/big-mac-data/
1. 使用的图表库Highcharts Grid
Highcharts Grid 是 Highcharts 产品中专门用于数据表格展示和交互的组件。
它有两个版本：
| 版本 | 功能 | 适用场景 |
|---|---|---|
| Grid Lite | 数据查看、排序、筛选、基础交互 | 只读展示型表格 |
| Grid Pro | 包含 Lite 全部功能 + 单元格编辑、数据验证、远程数据 | 需要用户编辑数据的场景 |
2. 示列代码
const dataSource = { country: [ 'United Arab Emirates', 'Argentina', 'Australia', 'Azerbaijan', 'Bahrain', 'Brazil', 'Canada', 'Switzerland', 'Chile', 'China', 'Colombia', 'Costa Rica', 'Czech Republic', 'Denmark', 'Egypt', 'Euro area', 'Britain', 'Guatemala', 'Hong Kong', 'Honduras', 'Hungary', 'Indonesia', 'India', 'Israel', 'Jordan', 'Japan', 'South Korea', 'Kuwait', 'Lebanon', 'Moldova', 'Mexico', 'Malaysia', 'Nicaragua', 'Norway', 'New Zealand', 'Oman', 'Pakistan', 'Peru', 'Philippines', 'Poland', 'Qatar', 'Romania', 'Saudi Arabia', 'Singapore', 'Sweden', 'Thailand', 'Turkey', 'Taiwan', 'Ukraine', 'Uruguay', 'United States', 'Venezuela', 'Vietnam', 'South Africa' ], currency: [ 'AED', 'ARS', 'AUD', 'AZN', 'BHD', 'BRL', 'CAD', 'CHF', 'CLP', 'CNY', 'COP', 'CRC', 'CZK', 'DKK', 'EGP', 'EUR', 'GBP', 'GTQ', 'HKD', 'HNL', 'HUF', 'IDR', 'INR', 'ILS', 'JOD', 'JPY', 'KRW', 'KWD', 'LBP', 'MDL', 'MXN', 'MYR', 'NIO', 'NOK', 'NZD', 'OMR', 'PKR', 'PEN', 'PHP', 'PLN', 'QAR', 'RON', 'SAR', 'SGD', 'SEK', 'THB', 'TRY', 'TWD', 'UAH', 'UYU', 'USD', 'VES', 'VND', 'ZAR' ], dollarEx: [ 3.6729, 1050, 1.591, 1.7, 0.377, 5.9367, 1.43845, 0.9008, 987.25, 7.24785, 4232.22, 506.625, 23.8918, 7.1077, 50.25, 0.9524, 0.801, 7.7215, 7.7877, 25.465, 389.43235, 16172.5, 86.3412, 3.6057, 0.709, 154.355, 1431.2, 0.3081, 89550, 18.45, 20.647, 4.3785, 36.6243, 11.2368, 1.759, 0.385, 278.85, 3.7313, 58.435, 4.0111, 3.641, 4.73835, 3.7508, 1.3444, 10.9367, 33.6925, 35.7405, 32.728, 42, 43.27, 1, 56.5814, 25078, 18.6913 ], dollarPPP: [ 3.109, 1261, 1.339, 1.078, 0.2936, 4.128, 1.349, 1.244, 775.5, 4.404, 3782, 516.4, 18.83, 6.736, 23.32, 0.9793, 0.7927, 5.354, 4.145, 18.13, 245.3, 7081, 39.03, 2.936, 0.4318, 82.90, 949.9, 0.2418, 82900, 11.23, 16.41, 2.271, 28.32, 12.95, 1.451, 0.2642, 181.3, 2.919, 29.19, 3.610, 2.591, 2.807, 3.282, 1.200, 10.71, 23.32, 32.82, 13.47, 20.73, 51.64, 1, 43.52, 13130, 8.964 ], dollarRate: [ 3.67, 1050.0, 1.59, 1.7, 0.38, 5.94, 1.44, 0.9, 987.25, 7.25, 4232.22, 506.63, 23.89, 7.11, 50.25, 0.95, 0.8, 7.72, 7.79, 25.47, 389.43, 16172.5, 86.34, 3.61, 0.71, 154.36, 1431.2, 0.31, 89550.0, 18.45, 20.65, 4.38, 36.62, 11.24, 1.76, 0.39, 278.85, 3.73, 58.44, 4.01, 3.64, 4.74, 3.75, 1.34, 10.94, 33.69, 35.74, 32.73, 42.0, 43.27, 1.0, 56.58, 25078.0, 18.69 ], dollarPrice: [ 4.9, 6.95, 4.87, 3.67, 4.51, 4.03, 5.43, 7.99, 4.55, 3.52, 5.17, 5.9, 4.56, 5.49, 2.69, 5.95, 5.73, 4.01, 3.08, 4.12, 3.65, 2.54, 2.62, 4.71, 3.53, 3.11, 3.84, 4.54, 5.36, 3.52, 4.6, 3.0, 4.48, 6.67, 4.77, 3.97, 3.77, 4.53, 2.89, 5.21, 4.12, 3.43, 5.07, 5.17, 5.67, 4.01, 5.32, 2.38, 2.86, 6.91, 5.79, 4.45, 3.03, 2.78 ] }; const initGrid = data => { Grid.grid('container', { data: { dataTable: data }, caption: { text: '🍔 Big Mac Index 2025' }, header: [ 'country', 'currency', 'dollarRate', 'dollarPrice', 'dollarValuation' ], columns: [{ id: 'country', header: { format: 'Country' } }, { id: 'currency', width: 100, header: { format: 'Currency' } }, { id: 'dollarRate', header: { format: 'USD exchange ratio' } }, { id: 'dollarPrice', header: { format: 'Price of Big Mac (USD)' }, cells: { format: '${value}' } }, { id: 'dollarValuation', header: { format: 'Undervalued / overvalued' }, width: 350, cells: { renderer: { type: 'sparkline', chartOptions: { chart: { type: 'bar', spacing: [0, 0, 0, 0], margin: [0, 0, 0, 0], height: 40 }, yAxis: { min: -70, max: 70, crossing: 0 }, plotOptions: { series: { dataLabels: { crop: false, overflow: 'allow', useHTML: true, enabled: true, // eslint-disable-next-line max-len format: '<span class="spark-label">{y:.2f}%</span>' }, negativeColor: '#f00' } } } } } }], pagination: { enabled: true, controls: { pageButtons: { count: 5 } } } }); }; // Init (async () => { // Setup data const dataTable = new Dashboards.DataTable({ columns: dataSource }); // Define modifier / formula calculation for sparkline const mathModifier = new Dashboards.DataModifier.types.Math({ columnFormulas: [{ column: 'dollarValuation', formula: '(D1-C1)/C1*100' // C1 = dollarEx, D1 = dollarPPP }] }); // Add modified data to initial data source await dataTable.setModifier(mathModifier); // Init the grid with the combined data initGrid(dataTable.getModified()); })();数据结构
| 字段 | 含义 |
|---|---|
country | 54 个国家/地区 |
currency | 货币代码（如 CNY、JPY 等） |
dollarEx | 官方美元汇率 |
dollarPPP | 巨无霸购买力平价汇率（根据巨无霸价格推算的"合理"汇率） |
dollarRate | 四舍五入后的汇率 |
dollarPrice | 当地巨无霸的美元价格 |
使用计算公式与代码解读
formula: '(D1-C1)/C1*100' // (dollarPPP - dollarEx) / dollarEx * 100这个公式算出每种货币相对美元的低估/高估百分比：
负数（红色）→ 货币被低估（买巨无霸比美国便宜）
正数→ 货币被高估（买巨无霸比美国贵）
（1）数据修饰器（Data Modifier）自动计算：
const mathModifier = new Dashboards.DataModifier.types.Math({ columnFormulas: [{ column: 'dollarValuation', formula: '(D1-C1)/C1*100' // 自动计算货币估值百分比 }] });这行代码的巧妙之处在于：不需要手动遍历 54 个国家的数据做计算，Highcharts Grid 的数据修饰器会自动处理整列。
（2）Sparkline 迷你条形图嵌入单元格：
cells: { renderer: { type: 'sparkline', // 在单元格内嵌入迷你图表 chartOptions: { chart: { type: 'bar', height: 40 }, yAxis: { min: -70, max: 70, crossing: 0 }, // 以 0 为分界线 plotOptions: { series: { negativeColor: '#f00' // 负数自动变红 } } } } }这实现了表格 + 图表一体化——每个单元格内都有一个微型条形图，直观展示货币是被高估还是低估。从数据中可以直观的看出：
| 类型 | 代表国家 | 估值 |
|---|---|---|
| 严重低估 | 台湾、印尼、乌克兰 | -50% 以上 |
| 接近合理 | 日本、韩国、加拿大 | ±10% 以内 |
| 明显高估 | 瑞士 | +38% |
| 基准 | 美国 | 0% |
3. Highcharts Grid表格的开发功能
每行显示一个国家的数据
最后一列是迷你条形图（sparkline），直观展示估值
红色条形 = 低估，绿色/正数 = 高估
支持分页浏览（每页显示部分国家）
（1）表格工具与 Highcharts 图表生态无缝集成
Highcharts Grid 不是孤立的表格组件，它能和 Highcharts 的所有图表类型联动。在案例中：
表格数据 → 迷你条形图（Sparkline）
也可以扩展到 → 折线图、热力图、地图等
典型应用场景：财务仪表盘、销售数据看板、股票行情表。
（2）声明式数据修饰器（Data Modifiers）
Highcharts Grid 内置了多种数据处理器，无需手写循环，可以大幅减少了数据处理代码量。
| 修饰器类型 | 功能 |
|---|---|
Math | 数学公式计算新列（如你的估值公式） |
Sort | 按列排序 |
Range | 按数值范围筛选行 |
Invert | 行顺序反转 |
Chain | 多个修饰器串联执行 |
（3）单元格级自定义渲染
Highcharts Grid 允许对单元格进行深度定制，可以渲染：进度条、状态标签、迷你图、按钮等任何 HTML 内容。
columns: [{ id: 'dollarPrice', cells: { format: '${value}' // 自动加美元符号 } }, { id: 'dollarValuation', cells: { renderer: { type: 'sparkline' } // 嵌入图表 } }]（4）响应式与虚拟滚动
Highcharts Grid 支持大数据量的流畅渲染：
虚拟滚动：只渲染可视区域的行，万行数据不卡顿
响应式布局：自动适配不同屏幕尺寸
列宽调整：支持拖拽调整，多种模式（均分、相邻调整等）
（5） 单元格/表格编辑能力（Grid Pro）
columnDefaults: { cells: { editable: true } // 开启单元格编辑 }Highcharts Grid 表格编辑支持：
单元格内联编辑
数据验证（如数值范围、必填校验）
编辑后自动同步数据源
撤销/重做操作
6.无障碍访问（Accessibility）
Highcharts 所有产品都内置了无障碍模块：
屏幕阅读器兼容
键盘导航支持
ARIA 标签自动添加
符合 WCAG 标准
4. Highcharts Grid vs 其他表格库对比
| 特性 | Highcharts Grid | AG Grid | DataTables | Handsontable |
|---|---|---|---|---|
| 图表集成 | ⭐⭐⭐ 原生深度集成 | 需插件 | 无 | 有限 |
| 数据修饰器 | ⭐⭐⭐ 内置多种 | 需自定义 | 有限 | 需自定义 |
| 单元格渲染 | ⭐⭐⭐ 灵活 | 灵活 | 一般 | 灵活 |
| 编辑功能 | Grid Pro 支持 | 支持 | 有限 | ⭐⭐⭐ 强 |
| 大数据性能 | 虚拟滚动 | 虚拟滚动 | 一般 | 虚拟滚动 |
| 学习曲线 | 简单（Highcharts 延伸产品） | 较陡 | 平缓 | 中等 |
| 价格 | 商业授权 | 商业授权 | 开源/商业 | 商业授权 |
选择建议：
如果你已经在用 Highcharts 做图表 →Grid 是最佳选择，风格统一、API 一致
如果只需要纯表格、不需要图表联动 → AG Grid 或 DataTables 也可以
总结
Highcharts Grid 的产品价值在于：
它不是孤立的表格，而是 Highcharts 可视化生态的数据下钻和交互中枢。
巨无霸指数案例很好地体现了这一点——表格不仅是数据的容器，还通过迷你图/Sparkline 将数据 + 可视化 + 交互融为一体，让用户一眼就能看出哪些货币被高估或低估。
如果你正在构建一个需要表格 + 图表联动的数据产品（如金融终端、BI 仪表盘、运营后台），Highcharts Grid 是企业首选之一——生态产品齐全、学习简单、长期稳定。