国际化

Graphic Walker 内置了多语言翻译，并支持自定义语言资源。

内置语言

语言代码	语言
`en-US`	英语（默认）
`zh-CN`	简体中文
`ja-JP`	日语

设置语言

使用 i18nLang 属性：

<GraphicWalker
  data={data}
  fields={fields}
  i18nLang="ja-JP"
/>

自定义翻译

使用 i18nResources 属性提供自定义翻译。资源对象以语言代码为键，包含嵌套的翻译键值对：

const customTranslations = {
  'fr-FR': {
    'main.tabpanel.DataSource': 'Source de données',
    'main.tabpanel.DataSource.btn': 'Ouvrir la source de données',
    'main.tabpanel.settings': 'Paramètres',
    // ... more keys
  },
};
 
<GraphicWalker
  data={data}
  fields={fields}
  i18nLang="fr-FR"
  i18nResources={customTranslations}
/>

覆盖内置翻译

你可以覆盖现有语言中的特定键，而无需替换整个翻译：

const overrides = {
  'en-US': {
    'main.tabpanel.DataSource': 'Data Input',
  },
};
 
<GraphicWalker
  data={data}
  fields={fields}
  i18nLang="en-US"
  i18nResources={overrides}
/>

查找翻译键

翻译键遵循点分层级结构。完整的键列表可在 Graphic Walker 源代码 (opens in a new tab) 中找到。查看 en-US.json 文件获取所有可翻译字符串的完整列表。

示例：多语言应用

import { useState } from 'react';
import { GraphicWalker } from '@kanaries/graphic-walker';
 
const LANGUAGES = [
  { code: 'en-US', label: 'English' },
  { code: 'zh-CN', label: '中文' },
  { code: 'ja-JP', label: '日本語' },
];
 
function App() {
  const [lang, setLang] = useState('en-US');
 
  return (
    <div>
      <select value={lang} onChange={e => setLang(e.target.value)}>
        {LANGUAGES.map(l => (
          <option key={l.code} value={l.code}>{l.label}</option>
        ))}
      </select>
 
      <GraphicWalker
        data={data}
        fields={fields}
        i18nLang={lang}
      />
    </div>
  );
}

图表导出创建数据可视化