Highcharts数据表格中Category标签如何翻译成本地语言

Highcharts作为一款流行的图表库，其数据表格功能可以与图表联动展示原始数据。不过默认情况下，表格中的分组标签会以英文Category、Value等形式呈现，对中文用户来说观感欠佳。本文将围绕Category标签的本地化翻译展开，介绍几种从配置层面彻底解决问题的方法，并分析各自适合的场景。

一、问题根源：Category标签从哪里来

Highcharts的Highcharts Datagrid（以及经典的导出数据表）在渲染时，会根据列的用途自动生成表头文案。当某一列对应的是x轴的分类轴时，默认文案就是Category；对应数值轴时则是Value。这些字符串并非写死在业务代码里，而是取自Highcharts内部的语言对象。

理解这一点很重要：既然文案来自语言对象，本地化就不需要去改源码，也不需要在渲染完成后用DOM操作逐个替换文本。直接在初始化前修改语言配置，是官方推荐、也是最稳妥的方式。相比之下，用JavaScript在页面加载后查找并替换表头文字的做法虽然看起来直观，但每次表格重绘、排序或刷新都会失效，需要反复监听事件，维护成本很高。

二、使用lang配置项实现全局本地化

Highcharts提供了Highcharts.setOptions方法，可以在所有图表和表格创建之前统一注入语言设置。与分类标签直接相关的是lang对象中的若干字段。下面的例子把表格相关的默认英文文案全部替换为中文：

Highcharts.setOptions({
  lang: {
    // 数据表格与导出模块使用的文案
    viewData: '查看数据表格',
    hideData: '隐藏数据表格',
    downloadCSV: '下载 CSV 文件',
    downloadXLS: '下载 XLS 文件',
    // 分类相关的默认表头
    categoryHeader: '分类',
    categories: '分类列表'
  }
});

// 之后再创建图表和表格，文案即生效
Highcharts.chart('container', {
  xAxis: {
    categories: ['一月', '二月', '三月']
  },
  series: [{
    name: '销售额',
    data: [102, 130, 125]
  }],
  // 开启数据表格导出入口
  exporting: {
    showTable: true
  }
});

需要注意调用时机：setOptions必须在Highcharts.chart之前执行，通常放在页面脚本最顶部。如果项目使用了模块化加载，可以把它写在一个独立的语言配置文件中，在入口处最先引入，保证所有图表实例共享同一套文案。

这种全局方式的优点是一处配置、处处生效，适合项目中有多个图表或多个页面的场景。缺点是全局设置会影响所有实例，如果同一个页面需要部分表格保留英文（例如面向海外用户的报表），就要改用单实例配置。

三、在单个表格实例中覆盖文案

有些情况下只需要局部本地化。Highcharts的配置可以逐实例传递，把lang相关字段直接写进单个表格的options即可，不会污染全局设置。以Highcharts Datagrid组件为例：

const grid = Highcharts.Grid.grid('table-container', {
  dataTable: {
    columns: {
      产品名称: ['台式机', '笔记本', '平板'],
      销量: [120, 340, 210]
    }
  },
  lang: {
    // 针对当前表格覆盖默认文案
    categoryHeader: '分类'
  },
  columnDefaults: {
    // 自定义表头渲染，进一步控制显示文本
    header: {
      format: '{name}'
    }
  }
});

逐实例配置的粒度更细，适合多语言站点中不同区域展示不同语言的场合。配合后端返回的用户语言偏好，可以动态决定传入哪套文案对象。实践建议是把几套语言文案定义为常量字典，按需注入，避免在业务代码里散落硬编码字符串。

另外，如果表头文案本身来自数据源（例如CSV或后端接口返回的字段名），也可以在数据进入表格前做一次映射转换，把Category之类的英文字段名替换为中文，这样连配置层都不需要额外处理。

四、导出场景与日期分类的特殊处理

当用户通过导出功能生成CSV或XLS文件时，表头同样会使用语言对象中的文案，所以第二部分的全局设置已经覆盖了这一场景。但如果导出依赖官方导出服务器，建议改用自建导出服务，并在服务端同样注入语言配置，否则线上导出的文件可能仍是英文表头。

还有一种容易被忽略的情况：x轴使用datetime类型时，表格里的分类列标题可能显示为时间相关的默认文案，而单元格内容则根据时间格式化规则生成。此时除了翻译表头，还应设置lang中的日期月份、星期名称等字段，保证整列内容风格统一。例如：

Highcharts.setOptions({
  lang: {
    months: ['一月', '二月', '三月', '四月', '五月', '六月',
             '七月', '八月', '九月', '十月', '十一月', '十二月'],
    shortMonths: ['1月', '2月', '3月', '4月', '5月', '6月',
                  '7月', '8月', '9月', '10月', '11月', '12月'],
    weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  }
});

总结来看，Category标签的本地化核心思路是修改Highcharts的语言对象：全局项目用setOptions一次性配置，局部场景在实例options中覆盖，导出和日期场景再补充对应字段。避开DOM事后替换的坑，选择正确的配置层级，就能让数据表格与图表整体保持一致的中文体验。

Highcharts本地化Highcharts翻译数据表格语言设置修改时间：2026-09-13 12:38:40