我在下面的 codepen https://codepen.io/a166617/pen/qBXvzQd 中有一個堆積條形圖
正如您所看到的代碼筆，它沒有在 x 軸和 y 軸線上顯示圖形。條形圖向右滑動。有人可以讓我知道如何將條形圖放在圖形的 x 軸和 y 軸上嗎？
<g class="grid x-grid" id="xGrid">
<line x1="90" x2="90" y1="5" y2="371"></line>
</g>
<g class="grid y-grid" id="yGrid">
<line x1="90" x2="705" y1="370" y2="370"></line>
</g>
實作x軸和y軸的線的代碼如下。但不知何故，圖形沒有顯示在線軸上。有人可以指導我哪里出錯了嗎？
uj5u.com熱心網友回復：
我解決這個問題的方法是使用css 定位。我在你的 codepen 上添加了一些額外的代碼。如果您的圖表具有靜態值，則它是可行的。檢查它在這里。我在div包含欄和標題的上添加了這個自定義類。
.mGraph > svg {
position: relative;
left: -40rem;
top: -.65rem;
}
.mGraph > div {
position: relative;
left: -40rem;
top: -.65rem;
}
.mGraph > text {
position: relative;
left: -50rem;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/362496.html
標籤：javascript html css 反应 svg