阅读 3751

使用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…

文章分类
前端
文章标签