无法为图形添加 x 轴标签名称(svg 图形)
Posted
技术标签:
【中文标题】无法为图形添加 x 轴标签名称(svg 图形)【英文标题】:unable to add x-axis label name for the graph (svg graph) 【发布时间】:2022-01-06 20:55:47 【问题描述】:我有这个代码笔https://codepen.io/a166617/pen/NWvZGLd,我正在尝试为图表添加一个 x 轴标签。如您所见,y 轴标签显示了 0,25,50,75,100。这些是静态值。但是 x 轴标签名称是动态的,我无法放置标签名称。
我尝试将这行代码<div style=xtitle>entry.name</div>
放入下面的代码中,但我看不到 x 轴标签。有人可以建议我哪里出错了。
const rows = (entry, rowIndex) =>
return entry.bars.map((bar, index) =>
console.log('bar', entry, bar)
const graphHeight = 490 - 5;
const height = (bar.value / entry.total) * graphHeight;
const y = (bar.y / entry.total) * graphHeight;
return (
<>
<g key=Math.random()>
<rect
width=50
height=height
fill=bar.color
x=100 + rowIndex * 60 // multiply with the width (50) + 10 for space
y=490 - y - height
/>
<text
x=125 + rowIndex * 60 // visible centre point of your bar
y=490 - y - height/2
dy="0.5em" // adjusts the text y position to adjust for text descenders.
textAnchor="middle" // centre the text horizontall at x
class="bar-label"
style= fill: 'white',
fontSize: '12px' // styling for this text
>`$bar.color === '#ffcc00' && bar.value === 100 ? 'X': bar.value`</text>
</g>
<div style=xtitle>entry.name</div>
</>
);
);
;
我正在尝试实现此屏幕截图的最终结果。屏幕截图的 x 轴标签名称为“Tom、Emma、Lucy、Kim、Steve”。同样,我试图在我的 codepen 上显示 x 轴标签。
【问题讨论】:
你好,检查一下,codepen.io/Free_Soul/pen/WNZNdJo @AmanSharma- 嗨,您能否确认一下您的上述代码笔。我看到的代码和我的一样。 我刚刚编辑了您的代码,您没有看到栏下方的任何标签吗? 我明白了,图表的高度是 500 像素并且隐藏了文本。现在我可以看到您的代码,并且更改会反映在图表上。您可以只发布您的代码作为答案,以便我接受吗 好吧............ 【参考方案1】:const ReleaseScopeCharts = () =>
const data = [
name: 'Transit',
passed: 100,
skipped: 0,
failed: 0,
untested: 0
,
name: 'Transit',
passed: 25,
skipped: 50,
failed: 25,
untested: 0
,
name: 'Access',
passed: 0,
skipped: 0,
failed: 0,
untested: 100
];
// Basic style
const newCardStyle =
display: 'flex'
;
const xtitle =
color: 'red',
marginTop: '20%',
transform: 'rotate(-45deg)'
;
const contentStyle =
display: 'flex',
flexFlow: 'column',
alignItems: 'center',
;
const width = 90;
const colors = ['#30D158', '#005EA7', '#FF453A', '#ffcc00'];
const entries = data.map(d => (
name: d.name,
total: ['passed', 'skipped', 'failed', 'untested'].reduce(
(acc, key) => acc + d[key],
0
),
bars: ['passed', 'skipped', 'failed', 'untested']
.map((key, i) => (
value: d[key],
color: colors[i],
y:
key === 'passed'
? 0
: key === 'skipped'
? d['passed']
: d['skipped'] + d['passed'],
))
.filter(bar => bar.value),
));
const rows = (entry, rowIndex) =>
return entry.bars.map((bar, index) =>
console.log('bar', entry, bar)
const graphHeight = 490 - 5;
const height = (bar.value / entry.total) * graphHeight;
const y = (bar.y / entry.total) * graphHeight;
return (
<>
<g key=Math.random()>
<rect
width=50
height=height
fill=bar.color
x=100 + rowIndex * 60 // multiply with the width (50) + 10 for space
y=490 - y - height
/>
<text
x=125 + rowIndex * 60 // visible centre point of your bar
y=490 - y - height/2
dy="0.5em" // adjusts the text y position to adjust for text descenders.
textAnchor="middle" // centre the text horizontall at x
class="bar-label"
style= fill: 'white',
fontSize: '12px' // styling for this text
>`$bar.color === '#ffcc00' && bar.value === 100 ? 'X': bar.value`</text>
<text
x=125 + rowIndex * 60
y=520
textAnchor="middle"
class="bottom-label"
style= fill: '#000',
fontSize: '12px'
>label</text>
</g>
</>
);
);
;
return (
<div>
<div className="new-card" style=newCardStyle>
<svg class="graph">
<g class="grid x-grid" id="xGrid">
<line x1="90" x2="90" y1="5" y2="490"></line>
</g>
<g class="grid y-grid" id="yGrid">
<line x1="90" x2="805" y1="490" y2="490"></line>
</g>
<g class="labels y-labels">
<text x="80" y="15">100</text>
<text x="80" y="131">75</text>
<text x="80" y="248">50</text>
<text x="80" y="373">25</text>
<text x="80" y="500">0</text>
<text x="60" y="200" class="label-title">Pass %</text>
</g>
<g>
entries.map((entry, indx) => (
rows(entry, indx)
))
</g>
</svg>
</div>
</div>
);
;
// Render the component to the browser
ReactDOM.render(
// Pass in props
<ReleaseScopeCharts />,
document.getElementById('root')
);
body
font-family: 'Open Sans', sans-serif;
margin-top: 1rem;
.mGraph > svg
position: relative;
left: -40rem;
top: -.65rem;
.mGraph > div
position: relative;
left: -39rem;
top: -.65rem;
.mGraph > text
position: relative;
left: -50rem;
.graph .labels.x-labels
text-anchor: middle;
.graph .labels.y-labels
text-anchor: end;
.graph
height: 500px;
width: 1200px;
.graph .grid
stroke: #ccc;
stroke-dasharray: 0;
stroke-width: 1;
.labels
font-size: 13px;
.label-title
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
fill: black;
margin-left: 50%
.data
fill: red;
stroke-width: 1;
svgoverflow: visible
.bottom-labelfont-weight: bold;
<div id="root"></div>
【讨论】:
以上是关于无法为图形添加 x 轴标签名称(svg 图形)的主要内容,如果未能解决你的问题,请参考以下文章
R语言ggplot2可视化在可视化图形的X轴标签中添加温度摄氏度符号(add temperature degree symbol on axis label)