bizchart之使用总结

     最近做前端开发，几乎全部都是统计图表，从基本的折线图、柱状图、饼图再到分别加滚动条，再到不怎么常用的桑基图、热力图以至于后面的双轴图，反正呢，你能想到的你想不到的我们公司的产品都可以帮你想出来，虽说是一把辛酸泪，但也是学到了好多（关于biachart），或者说是踩了好多坑，这篇先简洁的记录下坑吧，之后有时间再分享封装的各类图表。

   1、限制纵坐标的范围（最大值）  ？  

           maxLimit      

const cols[yAxis] = {
   ……
    maxLimit: 100,
  };



 <Chart ... scale={cols} forceFit padding="auto">
    
 </Chart>

   这块坑就坑在：API文档中提供了max，如下截图：

所以，当产品提出必须限定不能超过100% 时，首先想到的就是使用max,但是设置max后，效果还是很任性，该超还是超，尤其是“grid”——只要数据超出100% 一点点，哪怕是0.01就会多条线，名称为120%，看着超级明显，反复试了几次，又到官网试了几次，还是不行，最后无奈得出结论：显示的范围来自于数据+man/min属性，如果数据中的值超过了max就以数据中最大值为坐标轴最大值，如果没超过时，以max为坐标最大值。所以，最大值只是在数据全都没有超过你设置的max时生效吗？按照这种理论，如果接口数据超过了100%，那么前端只能束手无策了……繁忙使我不想再去研究了，直接说前端没法处理，既然不能超过100%，那就说明数据有问题（其实也不是，后端数据四舍五入，所以超过100%一点点也是很合理的，可是现在又忙，又找不到解决的方法，so……），场面一度陷入了尴尬，后端也处理不了……后来同事告诉我有一个maxLimit设置后就可以了。至此，问题解决，但是也花了好长时间，深深地体会到踏破铁鞋无觅处得来全不费工夫，唉！其实这个属性知道也不觉得有啥，但是要是不知道，真的是能急死个人，没有别的解决方法了。

举一反三：

             限定最小值：minLimit

2、图表（坐标轴、折线/柱状图、坐标轴标题……）元素 显示不全 ？

   padding="auto"

一般情况下，Chart都会给设置forceFit，再设置padding为“auto”能解决99%图表元素显示不全的问题

3、双轴统计图中gird混乱问题？

问题描述：

     双轴坐标轴中，由于两个坐标轴代表不同的含义，左右两边拥有自己的gird，有的时候会出现“混乱”

方案一：

    只给一个纵轴设置grid

效果：

   grid不再混乱，但是坐标轴上的值两边对不齐

方案二：

      只给一个纵轴设置grid+两个纵轴同时设置max（数据中的最大值） 、min 、tickCount

效果：

     视觉效果可以了，但是纵坐标的显示不符合逻辑，比如左边坐标轴显示的是人数，当人数很少时，硬分成tickCount份，会导致纵坐标显示数据区间有小数（人+小数===不合理）

方案三：

    只给一个纵轴设置grid+两个纵轴同时设置max 、min 、tickCount-1（数据中的最大值+某个值）

效果：

    视觉、逻辑都合理

分析：

      改变max使得max成为tickCount-1(最小值从0开始)的整数倍

参考算法：

      max % （tickCount-1）=== 0 && max !== 0 ? max : max + (tickCount-1） - (max % tickCount-1）))     

     max:数据源中的最大值

4、坐标轴名称无法显示？

     <Axis title/>

    默认情况下，不显示坐标轴标题，需要手动设置title