at backyard

Color my life with the chaos of trouble.

AMP対応のページで月ごとのグラフを表示させる

少し前に書いていたもの。ついつい下書きフォルダに忘れがち。。


AMP対応させたページでグラフを動的に表示させるとなると、基本的にJavaScriptは使用できないので、CSSで頑張ることになりそう。

というわけで、Next.js環境で頑張ってみた結果がこれ。

github.com

月ごとの何らかのデータを読み込み、データに応じてスタイルを構築していくスタイル。
JSONデータを読み込んで下記のようなデータが描画される。

AMP対応させたグラフの画像

果たしてこれが最善のやり方なのかはよく分からないし、もっと良い方法がありそうにも思える。。
良い方法をご存じの方がいましたら、教えていただけると幸いです。