Highchartsのseriesの表示非表示をJSで切り替える
最近Highchartsをちょこちょこいじっているので、仕入れたのを小出しにしていきます。 Highchartsでは凡例を出しておくと凡例のクリックでデータ毎に表示の切り替えができます。 ですが、凡例は見た目上の工夫がほぼできないため、凝ったUIで表示状態を切り替えるためにはJavascriptを書いて制御してあげる必要があります。
JS
遅まきながらRails5の頃に作ったプロジェクトをyarn化する（webpacker無し）
Rails5の頃に作ったプロジェクトで、JS系のアセットの管理にはRails Assetsを使っている、Rails 5.1のプロジェクトが手元にありました。 先日（8/3）にそのRails Assetsが証明書の期限切れでbundle installできなくなるという問題が発生。 これを期に管理方法を変えないとねということで、Rails 5.1から使えるYarnを使うことにしました。
Highchartsのチャートに新しいデータ列（Series）をJSで追加する
今日もHighcharts。今度は新しいデータ列を追加する方法です。 https://jsfiddle.net/rveczxL1/7 昨日のJSFiddleをちょっと改変して、ボタンを押したら新しいデータ列を追加します。データの変更のときと同様アニメーションつきで描画されるのでとてもリッチな感じで良いです。
Highchartsで描画したチャートをJSから更新する
Highchartsで描画したチャートの値はあとからjavascriptで更新できます。 デモをちょっと改変してサンプルを作ってみました↓ https://jsfiddle.net/sz84x5q6/8/ options = {} // 略 var chart = Highcharts.chart('container', options); function onClick() …
Webで複数選択するためのBootstrap Dual Listboxが便利
複数選択、通常のselectタグをmultipleにすれば選択可能ですが、あまりかっこよくないです。 <select name="list" size="10" multiple> <option value="1">選択肢1</option> <option value="2">選択肢 …
Chart.jsなどのWeb用のJSライブラリをReact Nativeで使う
React Nativeでチャート（グラフ）を描画するためのライブラリがいくつかあります。例えばこのへんとか↓ JesperLekland/react-native-svg-charts: 📈 One library to rule all charts for React Native 📊 とはいうものの、できることが少なかったりなかなか思うようにいかないことがあったりします。
React Nativeでいつjsがbundleされるのか調べた
React NativeのアプリにはJS層とNative層があり、ビルドは別々に行われます。基本的にネイティブでビルドするときには最新のJS bundleに変更したいはずなので、同時にjs bundleも行われます。
json-serverでjsonに書いたデータを返すモックサーバーを立てる
サーバーサイドの実装がまだないときとか環境設定が面倒なとき、クライアントサイドでWebリクエストを投げるコードをそれっぽく書いて試したいみたいなケースで、json-serverというJSのツールが便利でした。
rails-ujsのdata-confirmを自前のダイアログに置き換える
Railsではリンクやフォームに簡単に確認ダイアログを出すための記法があります。aタグやinputタグなどにdata-confirm="よろしいですか？"みたいにするやつですね。 <%= link_to 'delete', item_path(item), data: { confirm: 'are you sure?' } %> こ …
ElectronなしでJSでデスクトップアプリを書けるProton NativeをQuick startした
出落ちで済みませんが、Proton Nativeとか言うのを見つけて試した、というお話です。 React Nativeでモバイルアプリを書くようなノリでデスクトップアプリを書けるよ、っていうProton Nativeというフレームワークがありました。