VSCode + CordovaのエミュレータでChart.js使ってレーダーチャート表示しようとしたらエミュレータ上は表示されなくてハマった

求人
VSCode + CordovaのエミュレータでChart.js使ってレーダーチャート表示しようとしたらエミュレータ上は表示されなくてハマった

Chart.js使って格好良いレーダーチャートを描画しようとしたら、エミュレータでは表示されませんでした。

問題を切り分けないといけないので一旦Chromeブラウザで見てみると描画されています。

VSCode + CordovaのエミュレータでChart.js使ってレーダーチャート表示しようとしたらエミュレータ上は表示されない

エミュレータだから表示されない、、と信じたいので実機で試してみました。

apkファイルを作成します。

Andoroid7.1.1で試したのですがリリース版だとエラーとなったためdebugでapkを作成したら正常にインストールすることができました。

レーダーチャートも無事表示できました。ひょっとするとレーダーチャートがエミュレータ画面の範囲外に表示されていたのかな、という感じです。

やっぱり実機で試さないといけないと痛感しました。

Chart.jsのbar(棒グラフ)で縦線を引く

bar(棒グラフ)で縦線(基準線)を引くにはプラグインを作成して実現しました。

プラグインの作成方法・登録方法は以下のようにします。

radarチャートの目盛りの最大値と最小値と目盛り間隔を設定する

radarチャートはデフォルトで一番大きい値が目盛りの最大値となるようですが、メモリの最大値や最小値を指定することができます。

目盛り感覚はデフォルト20ですがこれも変更可能です。optionsに以下のように指定します。

レーダーチャートの場合はmaxを指定してもそれを超えるデータの場合はmaxを超えて表示されるようです。(公式サイトには、maxを超えるデータは上書きされるとありますが、、)

デモ

barチャートの目盛りの最大値と最小値と目盛間隔を設定する

barチャートでも目盛りの設定をすることが可能ですが、type(radarとかbar)によって設定方法が違います。

barチャートでの設定方法は以下のようにします。これはY軸の目盛りを設定した例です。

barチャートの場合はmaxを超えるデータの場合はきちんとmaxで上書きされるようです。

デモ

ラベルが表示されない場合がある

ラベルの表示/非表示はデフォルトではアルゴリズムによる自動計算のようなので、必ず表示されるわけではないようです。以下を見てください。

VSCode + CordovaのエミュレータでChart.js使ってレーダーチャート表示しようとしたらエミュレータ上は表示されなくてハマった

autoSkip:falseを指定すると必ず表示されると書いてありますので(デフォルトはtrue)、X軸の設定を変更します。

これで500%zoomしても必ず表示されるようになりました。気になるところはラベルが自動で斜めになってしまうところでしょうか。

デモ

ラベルの表示角度を指定する

ブラウザをズームしたりするとラベルが斜めになったりしてしまうので、これも指定しておきます。ここではX軸を90℃回転させています。

maxRotationの指定はデフォルト90で、回転が必要になるまでは意味のない設定です。

デモ

barチャートで基準線を引く

こんなこと出来たらよいなと思って公式サイトを見てみましたが発見できず。Y軸に基準線みたいなラインを引いてみたいと思ってプラグインを作成してみました。詳細は開発者向けのページを参照ください。

プラグイン登録方法はさきほど記載した方法で記述します。

デモ

レーダーチャートで基準線みたいなラインを引いてみる

今度はレーダーチャートで基準線を引いてみようかと思ったのですが、これはこれでbackgroundを透明にした固定データを引いてあげれば基準線みたいなのができあがります。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA