无法为图形添加 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;
&lt;div id="root"&gt;&lt;/div&gt;

【讨论】:

以上是关于无法为图形添加 x 轴标签名称(svg 图形)的主要内容,如果未能解决你的问题,请参考以下文章

如何在单个图形上标记多个图形的 x 和 y 轴 [重复]

在 svg 图中覆盖的 x 轴标签

R语言ggplot2可视化在可视化图形的X轴标签中添加温度摄氏度符号(add temperature degree symbol on axis label)

图形美化

如何使用 Matplotlib 调整图形的 x 轴“日期”标签?

绘制图形的辅助操作