reactjs - 如何让 VictoryAxis tickValues 在victory-native 的轴上均匀分布？

Question

我正在尝试制作一个看起来像水银温度计的温度计。为此，我使用了强大实验室的胜利本机库。

我遇到麻烦的地方是让组件沿 y 轴均匀VictoryAxis分布其组件。VictoryLabel

我的循环componentDidMount正在生成一个数字数组，增量为 0.2，介于this.state.cLower和之间this.state.cUpper，应该设置为 y 轴上的刻度标签。

export default class Thermometer extends React.Component {
    constructor (props) {
      super(props)
      this.state = {
        temp: [0],
        cUpper: 29,
        cLower: 24,
        tickValues: []
      }
      DB.ref('tempLog').limitToLast(1).on('value', snap => {
        this.setState({ temp: [{ x: 0, y: [snap.val()[Object.keys(snap.val())[0]].temp] }], y0: this.state.cLower })
      })
    }
    componentDidMount () {
      let temps = new Set()
      for (let i = parseFloat(this.state.cLower); i <= parseFloat(this.state.cUpper); i += 0.2) {
        temps.add(Math.round(i * 10) / 10)
      }
      this.setState({ tickValues: Array.from(temps) })
    }

    render () {
      return (
        <VictoryChart
          height={300}
          width={65}>
          <VictoryAxis
            style={{ ticks: { size: 12 } }}
            orientation={'left'}
            tickValues={this.state.tickValues}
            dependentAxis />
          <VictoryBar
            style={{ data: { fill: 'rgb(255, 0, 0)' } }}
            data={this.state.temp} />
        </VictoryChart>
      )
    }
  }

我已经验证了呈现的值是正确的，但是正如您在此处看到的，所有标签几乎都呈现在彼此之上。

标签： reactjsreact-nativesvgvictory-charts

Answer 1

因为this.state.cLower并this.state.cUpper分别设置了下限和上限数据的界限，所以我不得不将VictoryBar's y0prop 设置为this.state.cLower

<VictoryBar
 y0={() => this.state.cLower}
 style={{ data: { fill: 'rgb(255, 0, 0)' } }}
 data={this.state.temp} />

VictoryAxis然后开始处理这个问题，大概是通过VictoryChart，然后VictoryAxis' VictoryLabels 得到分发，并且渲染的VictoryBar数据按预期对齐