使用BizCharts遇到的一些问题

本文描述的是在我使用bizcharts过程中遇到的一些问题及解决方法，希望对遇到这些问题的小伙伴有点帮助，这些解决方法仅仅是我个人想到的解决方法，仅供参考。

Q1: scale中设置了type:time或者type:timeCat，在IE浏览器运行出错。

我当时采用的横坐标时间是'YYYY-MM'的格式，谷歌下正常运行，IE及EDGE抛错，报错信息‘Invalid Date in fecha.format’，建议更改数据的时间格式，官方建议如下：

时间戳，如 1436237115500；
时间字符串： '2015-03-01'，'2015-03-01 12:01:40'，'2015/01/05'，'2015-03-01T16:00:00.000Z'。

Q2: 如何实现双Y轴，以及双Y轴坐标统一？

想要实现双Y轴，只需要加一个Axis即可（不想显示把visible置为flase）

 <Axis  name="y2"  visible={false}  />

这样会引申出一个问题就是两个y轴的坐标可能会不统一，如何统一呢？在scale中设置y1,y2的max,min相同即可；

 const scale = {
    y1:{
        min:  0,
        max:  {MAX  ||  '常量'}
    },
    y2:{
        min:  0,
        max:  {MAX  ||  '常量'}
    },
};

Q3: 如何在堆叠柱状图上方显示一个总量？

这个问题我当时查了文档没找到，于是我想出曲线救国的方案, 设置一个size为0的point图，然后加一个label显示总量。

注意：这里的size属性设置为0，否则也没啥就是不好看。

<Geom  position="x*total_y"  type="point"  size={0}>
    <Label  content="想要显示的总量字段{total_y}"  offset={8}  />
</Geom>

Q4: 如果不想Y轴出现小数怎么办？

在scale中设置minTickInterval属性，这个当时文档里没有。。。。

y:{
    minTickInterval:  1;
}

Q5: Y轴数据错乱，不按照大小排序怎么办？

这个一般是数据格式不是数字造成的，转成数字格式就好了，当时‘彪呼呼’的debug了好久，给大家提个醒。

Q6: 堆叠柱状图，想实现大小排序的同时还需要保证颜色-数据映射关系？

这个是我们‘漂亮’的PD姐姐提的需求，图表的取色逻辑是按照数据去颜色列表里查的，然后一一映射的，如果数据排序的话就会失去映射关系，这个最后是在color属性设置了两个属性解决的。

 //实现单个柱子大->小排序，并且满足属性 - 颜色映射关系
color={['x*sort',  GEOM_COLOR]}

其中x为数据的某个属性。sort是为数据添加的排序规则，这个sort属性在数据处理的时候加上就ok了，一般是以index作为value值。这样就会在满足映射关系的同时实现单个柱子大小排序。GEOM_COLOR为自定义的图表取色列表。

Q7: 想自定义tooltips中的title怎么办？

一般情况下自定义tooltips里的内容很简单；但是title如何自定义呢，展示的title取得是第一个数据的title，所以自定义第一个数据的title即可。

 onTooltipChange={e  =>  {
    const  items  =  e.items;
    items[0].title  =  `
        <div>'自定义的标题内容'</div>
    `;
}}

Q8: 想自定义tooltip的背景色怎么办？

在Tooltip标签中设置背景色

g2-tooltip={{
  backgroundColor: 'black',
  color: '#fff',
  opacity: '0.8',
}}

Q9: 柱状图想使用渐变色怎么办？

在 Geom 中添加 style 属性 fill 实现渐变效果，更多渐变色效果点击查看

<Geom style={{fill: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'}}/>
//l表示线性渐变
//0表示渐变角度
//0 ，0.5，1 分别为起始中间结束的颜色值

Q10: 自定义图表tooltips的内容展示？

有的时候会接到这样的需求，tooltip需要展示一大堆的数据内容，有时候还可能会是表格的形式。比如说需要实现下面的效果

首先降水量加总是原始数据没有的，我们需要在鼠标移上去的时候计算出来。在Chart标签中添加以下方法；

onTooltipChange={e => {
    const items = e.items;
    const total = items.reduce(
      (previousValue, currentValue) => Number(previousValue) + (Number(currentValue.value * 100) || 0),
    0
    );
     //这里先乘100在除以100 解决浮点数相加问题
    items.forEach(item => {
        item.total = total/100;
    });
}}

total取到了然后接下来是数据展示。实际上官方文档对这种自定义的tooltip已经说明的比较详细了，但是我这里还是记录下自己的实现过程。在Tooltip标签中添加自定义的模板，使用color可以找到对应图例的颜色映射关系，让你的图表看起来花里胡哨一点。这些类名都是必填的，官方的文档也有比较详细的说明，点击查看。

crosshairs={{
    type: 'line',
}}
containerTpl={`
    <div class="g2-tooltip custom-tooltip">
    <div class="g2-tooltip-title"></div>
    <table>
    <thead>
      <tr>
        <td>城市</td>
        <td>降水量</td>
        <td>月份</td>
        <td>降水量之和</td>
      </tr>
    </thead>
    <tbody class="g2-tooltip-list">
    </tbody>
    </table>
    </div>
`}
itemTpl={`<tr data-index={index} style="color:{color}">
    <td>{name}</td>
    <td>{value}</td>
    <td>{title}</td>
    <td style="text-align:right">{total}</td>
</tr>`}

这样就实现了自定义tooltip的内容；

Q11: 点图shape自定义后图例显示错乱怎么办？

我现在实现了这样一个效果，折线图的点位shape进行了自定义

但是发现图例错乱了，月份也作为图例显示了出来，这时候我们需要通过以下代码把月份的图例隐藏掉就大功告成了；

 <Legend name='month' visible={false}/>

总结

bizcharts我认为是一个十分优秀的一个图表库，虽然在使用过程中会有不少问题，但是熟读API一般都能够解决。

现在项目中还在使用bizcharts，遇到的问题我会一一记录下来，不定时更新这个文档，希望对遇到相同问题的同学有点帮助。

如果有不对的地方或者有更好的解决方案，欢迎指正。

bizcharts官方：bizcharts.net/products/bi…