当前位置： 移动技术网 > IT编程>网页制作>Html5 > Recharts动态设置y轴的最大值最小值

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

2020年07月17日  | 移动技术网IT编程  | 我要评论

问题描述：根据父组件传来的值来动态设置柱状图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。然后根据这二个值生成可读性高的刻度~

本文地址：https://blog.csdn.net/weixin_44824839/article/details/107367524

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网