국제화

Graphic Walker는 내장 번역을 포함하며 커스텀 언어 리소스를 지원합니다.

내장 언어

언어 코드	언어
`en-US`	영어 (기본값)
`zh-CN`	중국어 (간체)
`ja-JP`	일본어

언어 설정

i18nLang prop을 사용하세요:

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

커스텀 번역

i18nResources prop을 사용하여 자체 번역을 제공하세요. 리소스 객체는 언어 코드를 키로 하며, 중첩된 번역 키를 가집니다:

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>
  );
}

차트 내보내기 데이터 시각화 만들기