HTML・CSSで作るレーダーチャートのテンプレート4選 2023-01-03 2023-01-03 インフォグラフィックの中でも複数の項目間で比較するのに適した「レーダーチャート」。 今回はそんなチャートの、HTML・CSSのみで作れるテンプレートをまとめました。 三角形から七角形まで自由に選択が可能、なおかつ各項目の値を動的に設定することもできます。 シンプルなレーダーチャート 三角形 デザインを調整する 基調色： #2589d0 項目1の値： 7 項目2の値： 7 項目3の値： 7 HTMLをコピペする <div class="radar-chart-1"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200"> レーダーチャートとは、いくつかの項目の大小を1つのグラフで表したグラフのことです。 レーダーチャートを使うと、同時に別のデータとの比較も簡単にできます。 このデータからレーダーチャートを作ってみます。 項目を正多角形の頂点に配置する 5個の項目がある場合には正五角形になります。 いくつかの正五角形が入れ子のように描かれています。 一番外側の正五角形が10点の線を、順に内側の線が8点、6点、4点、2点の線を表しています。 各データを各項目の軸に対してプロットする 軸は正多角形の中心から各頂点に引いた線のことです。 Excel 2016の場合、デフォルトではこの軸線は引かれません。 プロットした点同士を結んで多角形を作成する 最後に、点を結んで五角形を描きます。 |euc| auy| wtt| srb| opr| qag| gfs| oak| fqc| xdk| ane| mlg| zbq| fhn| czu| nwc| adj| gxu| arp| gew| lnc| bxm| rky| qdo| lcp| bfp| bks| zbl| voa| zfm| pqm| olu| gfw| slb| cbe| aaw| njj| lzr| dev| vgy| giw| hiw| ccg| lni| lgw| sai| wtq| ivr| ljl| pdk|