胜利图表：将标签与条形图一起使用

Question

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

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

我尝试过的东西

嵌套 <VictoryLabel> andunder``` --> 坐标轴出现并且文档推荐使用 VictoryGroup
嵌套<VictoryLabel> andunder``` --> VictoryGroup does not support VictoryLabel
尝试制作一个独立的 <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

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

胜利图表：将标签与条形图一起使用

Victory Charts: Using labels with bar charts

svg

reactjs

victory-charts