amCharts4の月を数字にしたい＆日本語化（vue3）

6734 ワード
日本語化 AmCharts Vue.js Vue.js テキストリンク

参考リンク：
https://qiita.com/shogo452/items/d6d771a32d9225274e32
https://www.amcharts.com/docs/v4/concepts/locales/
https://github.com/amcharts/amcharts4/blob/master/src/lang/ja_JP.ts
上記の記事を参考にさせていただきました。🙏

この記事は
「月（month）」の日本語化について残しておこうという趣旨で書いています。

日本語化

vue.js
/* amChartインポート */
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
am4core.useTheme(am4themes_animated);

/* amChart日本語化 */
import am4lang_ja_JP from "@amcharts/amcharts4/lang/ja_JP";

chart.dateFormatter.language = new am4core.Language(); //標準の翻訳設定
chart.dateFormatter.language.locale = am4lang_ja_JP; //標準の翻訳設定
chart.language.locale["_date_day"] = "M/dd"; // 独自ルールで上書き
chart.language.locale["_date_year"] = "yyyy"; // 独自ルールで上書き

解説：月（month）の日本語化

vue.js
chart.language.locale["_date_day"] = "M/dd";

についてですが、
特に月（month）の日本語化で手間取りましたので
メモしておきます。

vue.js

chart.language.locale["_date_day"] = "M/dd"; // 3/21

chart.language.locale["_date_day"] = "MM/dd"; // 03/21

chart.language.locale["_date_day"] = "M月dd日"; // 3月21日

chart.language.locale["_date_day"] = "MMMdd"; // May21

amChartsの使い方については↓

vue3でamCharts4を使いたい→使えた
https://qiita.com/AyakoKataoka/items/e1aa99bc3a092700195e