CSS Stockを表示するスマートフォンのモック
デザインの例1デザインの例2デザインの例3

HTML・CSSで作るレーダーチャートのテンプレート4選

インフォグラフィックの中でも複数の項目間で比較するのに適した「レーダーチャート」。今回はそんなチャートの、HTML・CSSのみで作れるテンプレートをまとめました。三角形から七角形まで自由に選択が可能、なおかつ各項目の値を動的に設定することもできます。

シンプルなレーダーチャート

三角形

三角形

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

五角形

五角形

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

六角形

六角形

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

七角形

七角形

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する