reactjs - 胜利图表：使用带有条形图的标签

Question

我正在利用 VictoryCharts 向我的 React 应用程序添加图表。我正在尝试完成类似的事情：

我梳理了文档，但无法找到将标签添加到单个条形图中的方法。

我尝试过的事情

1. 嵌套<VictoryLabel> andunder``` --> 轴显示并且文档推荐使用VictoryGroup
2. 嵌套<VictoryLabel> andunder``` --> VictoryGroup不支持VictoryLabel
3. 尝试制作一个独立的<VictoryBar>&<VictoryLabel>并将其嵌入到<svg>--> 在页面上看不到图表内容

这是我现在的片段：

import Box from '@material-ui/core/Box';
import React from 'react';
import { VictoryAxis, VictoryBar, VictoryChart, VictoryContainer, VictoryLabel, VictoryTheme } from 'victory';

const SampleChart = ({ stat=25, title = 'Sample' }) => (
  <Box ml={5}>
    <svg height={60} width={200}>
      <VictoryLabel text={title.toLocaleUpperCase()} textAnchor='start' verticalAnchor='end' />
      <VictoryBar
        barWidth={10}
        data={[{ y: [stat], x: [1] }]}
        domain={{ y: [0, 100], x: [0, 1] }}
        horizontal
        labels={d => d.y}
        labelComponent={
          <VictoryLabel verticalAnchor='end' textAnchor='start' />
        }
        standalone
        style={{ parent: { height: 'inherit' } }}
        theme={VictoryTheme.material}
      />
    </svg>
  </Box>
);
ReactDOM.render(<SampleChart />, document.querySelector("#app"))

<div id='app'></div>

Answer 1

您可以像这样使用轴来实现这种效果：

const CHART_WIDTH = 800;
const val = 28
function BarChart() {
  return (
    <div style={{ width: CHART_WIDTH }}>
      <VictoryChart height={200} width={CHART_WIDTH}>
        <VictoryAxis 
          dependentAxis
          tickValues={[0,100]}
          offsetY={190}
          tickFormat={t => t===0 ? 'average age' : val}
          style={{axis: { stroke: 'none'}}}
        />
        <VictoryBar
          barWidth={10}
          data={[{ y: [45], x: [1] }]}
          domain={{ y: [0, 100], x: [0, 1] }}
          horizontal
        />
      </VictoryChart>
    </div>
  );
}

https://codepen.io/anon/pen/RmaxOd?editors=0110#0

不完全是您想要的，但它可以完成工作，您可以格式化刻度标签或提供自定义组件以使其看起来像您想要的结果。