はじめに
plotly/plotly.js で、ズームやパン(移動)と連動して Y軸の表示範囲を自動で調整(オートスケール)する方法
TL;DR
- ズームや移動時は
plotly_relayoutイベントが発火 .on('plotly_relayout', handler)でハンドラを設定- 表示する Y 軸範囲を決定し
relayoutを実行 Plotly.relayout()でplotly_relayoutイベントが発火するので無限ループにならないように注意
はじめに
NativeScript(NativeScript-Vue) で davecoffin/nativescript-modal-datetimepicker で DatePicker/TimePicker を使用する方法
TL;DR
- インストール
- NS6-:
tns plugin add nativescript-modal-datetimepicker@x.y.z - NS7+:
ns plugin add nativescript-modal-datetimepicker
- NS6-:
- README.md の情報だけだと分かりづらいので、デモ用コードも合わせて見た方が良い
import,newしてpickDateやpickTime
はじめに
NativeScript で tns run ios や tns debug ios 実行時に The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to x.x のエラーになる場合の対処法。
1 | warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.0.99. (in target 'Starscream' from project 'Pods') |
TL;DR
app/App_Resources/iOS/build.xcconfigを修正
はじめに
Vue.js で Lottie を使ったアニメーションを表示する方法。
Vue.js 向けのライブラリとして以下があるがメンテが止まってるようなので、(いまでも問題なく使えるかもしれないが)本記事では airbnb/lottie-web を使う。
- chenqingspring/vue-lottie
- Latest commit: 2018/04/02
- SuperbuffNL/lottie-vuejs
- Latest commit: 2019/08/27
※Latest commit は 2020/09/28 時点の確認結果
TL;DR
npm i lottie-webでインストールlottie-webと JSON データをimportlottie.loadAnimationを実行- Creative Commons License の要件、対象アニメーションのライセンスを要確認して対応
はじめに
Chart.js (vue-chartjs) でツールチップの表示内容を変更する方法
TL;DR
- テキストは
tooltips.callbacks.xxxxで設定tooltips.callbacks.titletooltips.callbacks.labeltooltips.callbacks.footer
- 色などを変更する場合は以下、他は Tooltip Configuration を参照
tooltips.backgroundColortooltips.titleFontColortooltips.bodyFontColortooltips.footerFontColortooltips.titleFontStyle- etc…
はじめに
Vue で Ivorzk/vue-cli-plugin-app-config を使って、動作環境ごとのコンフィグを設定する方法。
(ユースケースとしては、リリースビルドで動かしたいけど一部設定は開発向けにしたい、など？)
TL;DR
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 を使って、アプリ名やアプリのバージョン情報などを取得する方法。
TL;DR
cordova plugin add cordova-plugin-app-versionでプラグイン追加- 以下で情報取得
- アプリ名:
cordova.getAppVersion.getAppName() - パッケージ名:
cordova.getAppVersion.getPackageName() - バージョンコード:
cordova.getAppVersion.getVersionCode() - バージョン番号:
cordova.getAppVersion.getVersionNumber()
- アプリ名:
- async/await でも記述可能
- OS, OS Version の取得は apache/cordova-plugin-device
はじめに
Chart.js(vue-chartjs) で凡例の一部を非表示にする方法。
例えば円グラフ(Doughnut, Pie)で、値が 0 のものを取り除く、など。
(※この例だと、そもそも datasets から除外するのが良いけど、他に良い例がパッと思いつかないので…)
TL;DR
options.legend.labels.filterで設定item.indexやchart.datasets[n].data[item.index]を見て 表示/非表示 を決定return trueで表示、return falseで非表示
はじめに
apertureless/vue-chartjs でチャートの高さ(や幅、サイズ)を変更する方法
TL;DR
- チャート要素に
widthやheightを設定- 本家 Chart.js ではなく vue-chartjs のドキュメント に記載
options.responsiveやoptions.maintainAspectRatioも合わせて指定
- 親要素の
widthやheightをvw,vhで指定する方法もある - ウィンドウのリサイズなども考え出すと割と茨の道っぽい
- ベストプラクティスが見つかってない(自分的には)
