パーツ番号 05-12-10 ・ CSSのみ

複数系列比較の折れ線+凡例

2系列を色分けして重ねた折れ線グラフと凡例のセットです。前年同月比などの比較イメージを見せるレポートページの見本として使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-12-10-wrap">
          <svg class="d05-12-10-svg" viewBox="0 0 300 130" preserveAspectRatio="none">
            <line x1="0" y1="32" x2="300" y2="32" stroke="#eef1f5" stroke-width="1"></line>
            <line x1="0" y1="65" x2="300" y2="65" stroke="#eef1f5" stroke-width="1"></line>
            <line x1="0" y1="98" x2="300" y2="98" stroke="#eef1f5" stroke-width="1"></line>
            <line x1="0" y1="129" x2="300" y2="129" stroke="#cbd5e1" stroke-width="1.5"></line>
            <polyline points="10,100 68,85 126,90 184,55 242,60 290,30" fill="none" stroke="#f43f5e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></polyline>
            <polyline points="10,70 68,60 126,40 184,48 242,25 290,15" fill="none" stroke="#3b82f6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></polyline>
          </svg>
          <div class="d05-12-10-legend">
            <span><span class="d05-12-10-dot d05-12-10-d1"></span>今年度</span>
            <span><span class="d05-12-10-dot d05-12-10-d2"></span>前年度</span>
          </div>
        </div>

CSS

.d05-12-10{padding:18px;align-items:stretch}
        .d05-12-10-wrap{width:100%;display:flex;flex-direction:column;gap:8px}
        .d05-12-10-svg{width:100%;height:150px;display:block}
        .d05-12-10-legend{display:flex;gap:16px;justify-content:center;font-size:11px;color:#475569;font-weight:600}
        .d05-12-10-legend span{display:flex;align-items:center;gap:5px}
        .d05-12-10-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
        .d05-12-10-d1{background:#f43f5e}
        .d05-12-10-d2{background:#3b82f6}

クラス名 .d05-12-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。