我正在處理堆積條形圖。這是代碼筆
uj5u.com熱心網友回復：
減少的x軸指數rect和text
return (
<>
<g key={Math.random()}>
<rect
width={20}
height={height}
fill={bar.color}
x={100 rowIndex * 30}
y={490 - y - height}
/>
<text
x={110 rowIndex * 30}
y={490 - y - height/2}
dy="0.5em"
textAnchor="middle"
style={{ fill: 'white', fontSize: '12px' }}
>{`${bar.color === '#ffcc00' && bar.value === 100 ? 'X': bar.value}`}</text>
<text
x={105 rowIndex * 30}
y={480}
textAnchor="end"
style={{ fill: 'red',
fontSize: '13px',
transformOrigin: (125 rowIndex * 30) 'px 480px',
transform: 'rotateZ(-45deg)'
}}
>{entry.name}</text>
</g>
</>
);
uj5u.com熱心網友回復：
只需改變x位置。您需要了解自己的變數。
const gutter = 30; // Instead of 60 currently
// ...
<rect
width={20}
height={height}
fill={bar.color}
x={100 rowIndex * gutter}
y={490 - y - height}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/385002.html
標籤：javascript html css 反应 svg
上一篇：如何獲取影像作為SVG填充的背景