###前提・実現したいこと
JavaScriptのライブラリで折れ線グラフを描画しているのですが、グラフの凡例がクライアントの要求を満たせず
自作(自分で描画)してグラフの下部に表示する事になりました。
ネットで調べながら記述してみたのですが、私はHTML・CSSの知識が初心者レベルであり、既にデザイナの手を離れてしまっているシステムの改修であるため自分でデザイン部分を記述する必要があり、自信がありません。
書き方に正解がないのは分かっているのですが、これでいいのか識者に判断して頂きたいです。
実際には全てJavaScriptで動的に生成します。
完成イメージ的には以下のような感じです。
線の数は可変で、色に意味があるので色も動的に変えたいです。
###やってみたこと
以下にソースを貼りますが、「●」と「‐」を重なるように配置して凡例っぽく見せようとやってみました。
線の数が可変で色も種類によって変わるので文字で再現しようと思いました。
###該当のソースコード
- HTML
<div class="legend-items"> <ul> <li> <div class="legend-item"> <p class="point-item1">●</p> <p class="line-item1">―――</p> <span class="item-desc1">1個</span> </div> </li> <li> <div class="legend-item"> <p class="point-item2">●</p> <p class="line-item2">―――</p> <span class="item-desc2">2個</span> </div> </li> <li> <div class="legend-item"> <p class="point-item3">●</p> <p class="line-item3">―――</p> <span class="item-desc3">3個</span> </div> </li> <li> <div class="legend-item"> <p class="point-item4">●</p> <p class="line-item4">―――</p> <span class="item-desc4">4個</span> </div> </li> </ul> </div>
- CSS
.legend-items { width: 420px; border: black solid 1px; } .legend-items ul { font-size: 0; padding: 0; } .legend-items li { display: table-cell; font-size: 12px; } .legend-item { position: relative; display: flex; width: 100px; } .point-item1 { padding-left: 32px; color: #f49623; } .line-item1 { position: absolute; top: 0px; left: 20px; color: #f49623; } .item-desc1 { position: absolute; top: 12.5px; left: 70px; color: #f49623; } .point-item2 { padding-left: 32px; color: #b4b329; } .line-item2 { position: absolute; top: 0px; left: 20px; color: #b4b329; } .item-desc2 { position: absolute; top: 12.5px; left: 70px; color: #b4b329; } .point-item3 { padding-left: 32px; color: #79cb44; } .line-item3 { position: absolute; top: 0px; left: 20px; color: #79cb44; } .item-desc3 { position: absolute; top: 12.5px; left: 70px; color: #79cb44; } .point-item4 { padding-left: 32px; color: #ae0000; } .line-item4 { position: absolute; top: 0px; left: 20px; color: #ae0000; } .item-desc4 { position: absolute; top: 12.5px; left: 70px; color: #ae0000; }
###試したこと
他にはtableタグを使った方法をこのサイトを参考にして
やってみましたが、ソースが煩雑な気がして上記に落ち着きました。
###補足情報(言語/FW/ツール等のバージョンなど)
対応ブラウザはIE11、Chrome(最新)だけでOKです。
回答1件
あなたの回答
tips
プレビュー