如何以victory-native方式将VictoryAxis tickValues均匀地分布在轴上？

Question

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

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

我在componentDidMount中的循环正在this.state.cLower和this.state.cUpper的范围之间生成一个数字数组，以0.2为增量，这些数字应该被设置为刻度上的刻度标签。 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>
      )
    }
  }

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

Answer 1

由于this.state.cLower和this.state.cUpper分别设置了较低和较高数据的边界，因此必须将VictoryBar的{​​{1}}属性设置为该值的y0

this.state.cLower

<VictoryBar y0={() => this.state.cLower} style={{ data: { fill: 'rgb(255, 0, 0)' } }} data={this.state.temp} /> 然后大概通过VictoryAxis进行处理，并分发VictoryChart个VictoryAxis，并将渲染的VictoryLabel数据对齐为预期