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 GridHighcharts 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 classspark-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()); })();数据结构字段含义country54 个国家/地区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 的数据修饰器会自动处理整列。2Sparkline 迷你条形图嵌入单元格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 ModifiersHighcharts 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 ProcolumnDefaults: { cells: { editable: true } // 开启单元格编辑 }Highcharts Grid 表格编辑支持单元格内联编辑数据验证如数值范围、必填校验编辑后自动同步数据源撤销/重做操作6.无障碍访问AccessibilityHighcharts 所有产品都内置了无障碍模块屏幕阅读器兼容键盘导航支持ARIA 标签自动添加符合 WCAG 标准4. Highcharts Grid vs 其他表格库对比特性Highcharts GridAG GridDataTablesHandsontable图表集成⭐⭐⭐ 原生深度集成需插件无有限数据修饰器⭐⭐⭐ 内置多种需自定义有限需自定义单元格渲染⭐⭐⭐ 灵活灵活一般灵活编辑功能Grid Pro 支持支持有限⭐⭐⭐ 强大数据性能虚拟滚动虚拟滚动一般虚拟滚动学习曲线简单Highcharts 延伸产品较陡平缓中等价格商业授权商业授权开源/商业商业授权选择建议如果你已经在用 Highcharts 做图表 →Grid 是最佳选择风格统一、API 一致如果只需要纯表格、不需要图表联动 → AG Grid 或 DataTables 也可以总结Highcharts Grid 的产品价值在于它不是孤立的表格而是 Highcharts 可视化生态的数据下钻和交互中枢。巨无霸指数案例很好地体现了这一点——表格不仅是数据的容器还通过迷你图/Sparkline 将数据 可视化 交互融为一体让用户一眼就能看出哪些货币被高估或低估。如果你正在构建一个需要表格 图表联动的数据产品如金融终端、BI 仪表盘、运营后台Highcharts Grid 是企业首选之一——生态产品齐全、学习简单、长期稳定。