Recharts动态设置y轴的最大值最小值

问题描述:根据父组件传来的值来动态设置柱状图Y轴的刻度线

使用配置属性:domain
当 y 轴是数值轴时,通过这个配置可以指定 y 轴刻度函数的定义域。这个配置是一个二元数组,数组中的元素可以是一个数值,“auto”, “dataMin”, “dataMax” 或者类似于"dataMin - 100", “dataMax + 200"这样的字符串。如果任意元素的取值为"auto”,我们会生成可读性高的刻度,并且保证设置的刻度数。
默认值:[0, ‘auto’]
示例代码

export default class DetailBar extends React.Component{

  render() {
    const {width,height,data,names} = this.props
    if(data===null){
      return <Loading/>
    }
    if (data.length === 0){
      return <p>无数据</p>
    }
    //拿到data中的最大值,最小值
    const max = Math.max.apply(Math, data.map(function(f:any) {return f.value}))
    const min = Math.min.apply(Math, data.map(function(f:any) {return f.value}))
    const stringArr = Object.keys(data[0])//['time','value','valueY']
    return(
        <BarChart
          width={width}
          height={height}
          data={data}
        >
          <CartesianGrid strokeDasharray={'5 5'} stroke={'#fff2'} />
          <XAxis  />
          <YAxis
            type={'number'}
            domain={[min, max]}//设置domain
          />
          <Bar dataKey='value’  fill='red' />
        </BarChart>
    )
  }
}

这样该柱状图的y轴最小值就是min,最大值max。然后根据这二个值生成可读性高的刻度~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值