用 Highcharts Grid 打造《经济学人》风格数据表：企业级数据可视化的高级设计指南

原创于 2026-07-23 06:29:08 发布 · 202 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

《经济学人》风格图表/数据可视化的解读与创建

在企业 BI、大屏驾驶舱和数据新闻领域，很多团队把大量精力放在图表设计上，却忽略了另一个同样重要的组成部分——数据表格（Table/Grid）。

事实上，《经济学人（The Economist）》几乎所有的数据报道，都遵循着一个共同原则：

图表负责讲故事，表格负责提供事实。

优秀的数据表并不是 Excel 的网页版，而是图表叙事的一部分。随着 Highcharts Grid（Grid Pro）的推出，开发者已经可以在 JavaScript 中构建媲美专业财经媒体的数据表体验。

本文将介绍如何利用 Highcharts Grid 打造一套《经济学人》风格（Economist Style）的企业级数据表设计体系。

Highcharts.Grid 是 Highcharts 官方推出的数据网格组件，可独立渲染数据表，常与图表搭配组成「图表 + 表格」一体化看板；支持自定义列样式、单元格类名、对齐、格式化。

依赖脚本：highcharts-grid.js，必须额外引入，不属于基础 Highcharts。

当前案例业务

多国宏观经济指标表格：国家 | GDP 增速 (%) | 通胀率 (%) | 失业率 (%)

Grid.grid('container', {
  dataTable: {
    columns: [
      { id: 'country', header: { format: 'Country' } },
      { id: 'gdp', header: { format: 'GDP growth %' } },
      { id: 'inflation', header: { format: 'Inflation %' } },
      { id: 'unemployment', header: { format: 'Unemployment %' } }
    ],
    rows: [
      ['United States', 2.5, 3.1, 4.0],
      ['United Kingdom', 0.7, 4.2, 4.3],
      ['Germany', 0.3, 2.8, 3.4],
      ['France', 1.1, 2.4, 7.2],
      ['Japan', -0.2, 2.6, 2.7]
    ]
  },
  columns: [
    {
      id: 'country',
      cells: {
        className: 'econ-left'
      }
    },
    {
      id: 'gdp',
      cells: {
        className: 'econ-number'
      }
    },
    {
      id: 'inflation',
      cells: {
        className: 'econ-number'
      }
    },
    {
      id: 'unemployment',
      cells: {
        className: 'econ-number'
      }
    }
  ]
});

你还需要配套一点 CSS 来做出《经济学人》那种风格：

#container {
  font-family: Georgia, "Times New Roman", serif;
  color: #222;
}

#container table {
  border-collapse: collapse;
  width: 100%;
}

#container th {
  background: #f3f3f3;
  color: #111;
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid #bbb;
  padding: 8px 10px;
}

#container td {
  border-bottom: 1px solid #e2e2e2;
  padding: 8px 10px;
  font-size: 14px;
}

#container td.econ-number {
  text-align: right;
}

#container tr:hover td {
  background: #fafafa;
}

使用 CSS 变量主题 来做统一控制，整体更克制、更报刊化。