胜利图给出10的y轴范围。

Question

我创建条形图。我想给y轴的范围，例如目前的y轴显示5，10,15,20，但我想要10,20,30范围10。我怎么能做到这一点？

​

​

   <VictoryAxis
        domain={{y: [0, 30]}}
        dependentAxis
        orientation="left"
        style={{
          tickLabels: {fontSize: 12},
          axis: {stroke: 'transparent'},
        }}
      />

Answer 1

为了更改图表的默认轴，您需要作为子组件提供一个或多个<VictoryAxis />组件。

要改变滴答的间隔，只需在每个轴上设置tickCount支柱，其中tickCount等于将整个域范围除以所需的区间范围。

Y轴的30 / 10 = 3

和

20 / 10 = 2表示x轴，因为这里的域范围是实际的20，而不是40。

<VictoryChart
  domain={{ x: [ 20, 40 ], y: [ 0, 30 ]}}
>
  <VictoryAxis
    tickCount={ 3 }
    dependentAxis={ true } /* To target the y-axis */
  />
  <VictoryAxis
    tickCount={ 2 }
  />
  <VictoryScatter
    data={ [
      { x: 25, y: 10, label: 'Foo' },
      { x: 32, y: 28, label: 'Bar' }
    ] }
    size={ 3 }
  />
</VictoryChart>

​

​