Vue を使用して多言語統計グラフ インターフェイスを実装する方法

Vue を使用して多言語統計グラフ インターフェイスを実装する方法

今日のグローバル時代において、多言語サポートは非​​常に重要な機能になっています。国内市場を対象とするか国際市場を対象とするかにかかわらず、アプリケーションが多言語サポートを提供できれば、アプリケーションの競争力が高まります。この記事では、Vue フレームワークを使用して多言語統計グラフ インターフェイスを実装する方法を説明します。

1. プロジェクトの準備

始める前に、Vue プロジェクトを準備する必要があります。 Vue プロジェクトを作成していない場合は、次のコマンドを使用して新しい Vue プロジェクトを作成できます:

vue create stats-chart

作成が完了したら、プロジェクト フォルダーに入り、次のコマンドを実行して、対応する依存関係をインストールします。

cd stats-chart
npm install vue-i18n
npm install echarts vue-echarts

2. 多言語設定

1. 設定言語ファイル

プロジェクトのルート ディレクトリに新しいフォルダーを作成しますlang、次に、lang フォルダーに新しいファイル zh-CN.js を作成します。このファイルでは、複数言語のキーと値のペアを定義します。例:

export default {
  title: '统计图表',
  xAxis: '横轴',
  yAxis: '纵轴',
  data: '数据',
};

同様に、lang フォルダー ## に新しいファイル en-US.js を作成します。 #、対応する英語の翻訳を定義します:

export default {
  title: 'Stats Chart',
  xAxis: 'X-Axis',
  yAxis: 'Y-Axis',
  data: 'Data',
};

Configure vue-i18n

プロジェクトのルート ディレクトリに新しいファイルを作成します

i18n.js を作成し、その中で vue-i18n を構成します。

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import zhCN from './lang/zh-CN';
import enUS from './lang/en-US';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'zh-CN',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS,
  },
});

export default i18n;

この構成ファイルでは、

zh-CN.js と en -US を指定します。 js をインポートし、locale のデフォルト値を zh-CN に設定します。必要に応じてデフォルトの言語を設定できます。

複数の言語を使用する

src フォルダーの main.js で、 i18n# をインポートして使用します。 ## Configuration: <pre class='brush:javascript;toolbar:false;'>import Vue from 'vue'; import App from './App.vue'; import i18n from './i18n'; new Vue({ i18n, render: (h) =&gt; h(App), }).$mount('#app');</pre>これで多言語設定が完了しました。

3. 統計グラフ コンポーネントの作成

チャート コンポーネント

components# を

src フォルダーに作成します。 ## フォルダー内に新しいコンポーネント ファイル Chart.vue を作成し、その中に次のコードを記述します。

<template>
  <div>
    <h1>{{ $t('title') }}</h1>
    <div id="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  mounted() {
    const chart = echarts.init(document.getElementById('chart'));
    chart.setOption({
      title: {
        text: this.$t('title'),
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
      }],
    });
  },
};
</script>

コンポーネントは複数の言語を使用します

2. #App.vue
ファイルで、

Chart.vue

コンポーネントをインポートし、多言語を使用します: <pre class='brush:vue;toolbar:false;'>&lt;template&gt; &lt;div id=&quot;app&quot;&gt; &lt;Chart /&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import Chart from './components/Chart.vue'; export default { components: { Chart, }, }; &lt;/script&gt;</pre>これで、多言語統計の実装が完了しました。チャートインターフェイス。さまざまな言語設定に従って、対応する言語テキストを簡単に表示し、対応するグラフを生成できます。 概要

Vue フレームワークと Vue-i18n プラグインを使用すると、多言語統計グラフ インターフェイスを簡単に実装できます。まず、言語ファイルを構成し、次に Vue-i18n プラグインを使用して多言語サポートを実装しました。最後に、統計グラフ コンポーネントを作成し、その中で多言語テキストを使用しました。この実践的なアプローチは、シンプルで理解しやすいだけでなく、さまざまな多言語ニーズに対応できる柔軟性も備えています。

コード例は次のリンクにあります: https://github.com/example/stats-chart

この記事が Vue の使用方法を学ぶのに役立つことを願っています。多言語統計グラフ インターフェイスを実装します。役に立ちました!

以上がVue を使用して多言語統計グラフ インターフェイスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。