chartistパッケージでRからレスポンシブなグラフが描けるようになりました

前回までのあらすじ

Chartist.jsのグラフをRから描くためのパッケージをつくりました。詳しくは前回の記事をご参照ください。

notchained.hatenablog.com

ただ、Chartist.jsの売り文句は「Simple responsive chart」なんですが、chartistパッケージではレスポンシブなグラフは描けませんでした。個人的には、アニメーション使ってみたいからつくったパッケージだったので後回しでいいかなーと…

gionkunz.github.io

思ってたんですが、先週Issueを立ててくださった方がいたので実装しました。後回しにしててすみませんでした。。

使い方

Pie()Bar()Line()responsiveQueryというオプションを追加しました。これを指定すると、そのクエリにマッチするときだけ設定が有効になります。

例はRPubsに上げました:RPubs - chartist_responsive_test

例の中からひとつ抜粋してみます。以下のように書くと、デフォルトだと横並びの棒グラフが出てきて、幅が600pxより狭くなると積み上げ棒グラフに変わります。もっといろいろ条件分けをしたいときは+でつなげていけば複数指定できるはずです(未確認)。

chartist(data, day) +
  # default
  Bar(stackBars = FALSE) +
  # For smaller screens
  Bar(stackBars = TRUE, responsiveQuery = "screen and (max-width: 600px)")

responsiveQueryの指定の仕方は正直よくわかりません。。少し試した感じだとscreenを指定しないとマッチしないみたいでした。ドキュメントはこの辺だと思います:CSS media queries - Web developer guide | MDN

なにかあればIssues、このブログのコメント欄、Twitter(@yutannihilation)あたりで連絡ください。