Vue.js で Lottie を使ったアニメーションを表示する方法。
Vue.js 向けのライブラリとして以下があるがメンテが止まってるようなので、(いまでも問題なく使えるかもしれないが)本記事では airbnb/lottie-web を使う。
※Latest commit は 2020/09/28 時点の確認結果
npm i lottie-web でインストールlottie-web と JSON データを importlottie.loadAnimation を実行Chart.js (vue-chartjs) でツールチップの表示内容を変更する方法
tooltips.callbacks.xxxx で設定tooltips.callbacks.titletooltips.callbacks.labeltooltips.callbacks.footertooltips.backgroundColortooltips.titleFontColortooltips.bodyFontColortooltips.footerFontColortooltips.titleFontStyleVue で Ivorzk/vue-cli-plugin-app-config を使って、動作環境ごとのコンフィグを設定する方法。
(ユースケースとしては、リリースビルドで動かしたいけど一部設定は開発向けにしたい、など？)
npm i vue-cli-plugin-app-config でインストールapp.config.js を作成し、vue.config.js で pluginOptions に追加npm run serve --dev, npm run build --prod などで環境(コンフィグ)切り替え可能Cordova で whiteoctober/cordova-plugin-app-version を使って、アプリ名やアプリのバージョン情報などを取得する方法。
cordova plugin add cordova-plugin-app-version でプラグイン追加cordova.getAppVersion.getAppName()cordova.getAppVersion.getPackageName()cordova.getAppVersion.getVersionCode()cordova.getAppVersion.getVersionNumber()Chart.js(vue-chartjs) で凡例の一部を非表示にする方法。
例えば円グラフ(Doughnut, Pie)で、値が 0 のものを取り除く、など。
(※この例だと、そもそも datasets から除外するのが良いけど、他に良い例がパッと思いつかないので…)
options.legend.labels.filter で設定item.index や chart.datasets[n].data[item.index] を見て 表示/非表示 を決定return true で表示、return false で非表示apertureless/vue-chartjs でチャートの高さ(や幅、サイズ)を変更する方法
width や height を設定options.responsive や options.maintainAspectRatio も合わせて指定width や height を vw, vh で指定する方法もあるChart.js (vue-chartjs) でツールチップの表示位置を変更する方法
Chart.Tooltip.positioners に { x, y } で表示位置を返却する関数を追加options.tooltips.position に追加した key を指定Vue でローソク足(OHLC)チャートをプロットする方法。
npm i chart.js vue-chartjs vue-chartjsfinancial でインストールfrom 'vue-chartjs-financial' で import するのが安全そうSimonwep/pickr でカラーピッカー(Color Picker)を作成する方法
