美文网首页
钉钉小程序图表库AntV - F2 使用总结

钉钉小程序图表库AntV - F2 使用总结

作者: Darren151666 | 来源:发表于2019-07-28 20:46 被阅读0次

    项目涉及图表部分的技术选型

    对于图表这块的开发,使用一些流行的图表库可以大大提高我们的开发效率,目前较为流行的图表库大概有Echarts,Hcharts,AntV,他们都是大同小异,我印象比较深刻的是Hcharts是支持多坐标轴的,Echarts好像是不支持的,但是对于小程序的选择我们选择的是阿里的AntV-f2,因为他明确指出了适合小程序开发,而且AntV-f2除了不支持一些document,其他的大部分功能都是支持的,我们就没有再考虑其他的库,但是官方并没有太多关于小程序的具体使用文档,我们只能根据js的相关事例翻译成小程序的语法。

    前期准备

    钉钉小程序开发工具:https://open-doc.dingtalk.com/microapp/kn6zg7/zunrdk#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7

    AntV - F2: https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html

    AntV - F2的集成

    安装f2

    npm install @antv/f2 --save
    

    安装my-f2 ,至于为什么要再包装一层my-f2,可以看下这篇文档 : 聊一聊 F2 与小程序

    npm install @antv/my-f2
    

    开发前需要了解一些图表的api,比如tooltip、guide、legend、coord 等。具体可参考api文档。

    屏幕快照 2019-07-27 上午10.01.26.png

    完成以上步骤后我们先来集成一个折线图吧

    1.通过canvas创建一个图表

    <canvas
        id="am-mc-line-{{$id}}"
        height="{{height}}"
        width="{{width}}"
        onTouchStart="touchStart"
        onTouchMove="touchMove"
        onTouchEnd="touchEnd"
      />
      
     this.chart = new F2.Chart({
        el: canvas,
        width,
        height,
        padding,
        appendPadding,
      });
    

    2.渲染图表的source、tooltip、legend、axis等属性

    this.chart.tooltip(tooltip); /// 可参考tooltip的Api设置对应的属性
    this.chart.legend(legend); /// 可参考legend的Api设置对应的属性
    this.chart.source(data);
    
    /// 折线图的绘制
    this.chart.line().position('key*value').color('#999')
    

    效果预览

    屏幕快照 2019-07-27 上午10.53.42.png

    效果看着有点丑对不对......那我们就来实现一下设计师的效果图吧!具体功能:1.默认展示一个tooltip, 2.tooltip改变时展示对应x轴的数据,3.自定义tooltip

    默认展示一个tooltip

    我们自定义一个默认的tooltip:, 就叫做def_item吧,当图表渲染完成设置def_item = {key: 100, value: 200},这里有个注意点,就是def_item的内容不是随便定义的,这里我们先不做多说,后面会说明这个def_item的key值时如何设置的。

    /// 设置默认的tooltip
    chart.tooltip(tooltip);
    if (tooltip) {
        setTimeout(() => { 
          if (tooltip.def_item) {
            var item = tooltip.def_item; // 要展示 tooltip 的数据
            var point = chart.getPosition(item); // 获取该数据的画布坐标
            chart.showTooltip(point); 
          } 
        }, 500)
    }
    
    /// 网络请求成功,设置def_item
    this.setData({
        tooltip: {
              showTitle: true,
              showCrosshairs: true,
              def_item: {key: '2017-06-07', value: 135}
        },
    })
    

    通过监听tooltip的改变,设置我们需要的指定x轴的数据,同时可以自定义tooltip

    通过查找tooltip的Api我们会发现它有3个事件的回调,在钉钉小程序中我们只能通过props来传递tooltip的回调

    onShow(obj) {
        // obj: { x, y, title, items }
      }, // tooltip 显示时的回调函数
      onHide(obj) {
        // obj: { x, y, title, items }
      }, // tooltip 隐藏时的回调函数
      onChange(obj) {
        // obj: { x, y, title, items }
      }, 
      
      /// 引入到小从程序中
      chart.tooltip({
          showCrosshairs: tooltip.showCrosshairs,
          showTitle: tooltip.showTitle,
          showItemMarker: tooltip.showItemMarker,
          background: tooltip.background,
          crosshairsStyle: tooltip.crosshairsStyle,
          tooltipMarkerStyle: tooltip.tooltipMarkerStyle,
          onChange(ev) {
           console.log(ev, 8888)
           // 通过这个打印我们可以看到具体的信息,这个信息和上面我们说的def_item的设置是有关联的,
           // 我们展开这个ev的信息,可以看到item[0]下的信息: origin:{key: "2017-06-15", value: 245, type: "legend1"}
           // 这个origin中的key和value就是和def_item中的一一对应的。如果不是,那就无法定位默认值。
           // 同时,这个origin中的key和value是源自于我们最初初始化折线图设置的key和value, this.chart.line().position('key*value').color('#999')
            if (props.onTooltipChange) {
              props.onTooltipChange(ev)
            }
          }
      });
    

    优化后的效果


    28.gif

    上面记录了折线图的一些自定义效果,其他图表的扩展也跟折线图差不多,大家花时间研究就好。下面我们再参考F2的js示例封装一个小程序的组合图表。效果如下:

    屏幕快照 2019-07-27 下午12.12.44.png

    1.自定义legend,自定义的legend在小程序端,无法实现点击效果。

    const legendItems =  [{
            name: '个人分数',
            marker: 'square',
            fill: '#7B74FD',
            checked: true
          }, {
            name: '平均分数',
            marker: function marker(x, y, r, ctx) {
              ctx.lineWidth = 1;
              ctx.strokeStyle = ctx.fillStyle;
              ctx.moveTo(x - r - 3, y);
              ctx.lineTo(x + r + 3, y);
              ctx.stroke();
              ctx.arc(x, y, r, 0, Math.PI * 2, false);
              ctx.fill();
            },
            fill: '#FE75B0',
            checked: true
          }]
          
    chart.legend({
        custom: true,
        items: legendItems
      });
    

    2.图表的绘制,图表的具体配置和前面基本一致。

    chart.interval().position('name*score').color('#7B74FD').adjust(adjust);
    chart.line().position('name*avgScore').color('#FE75B0').adjust(adjust);
    

    注意点

    1.图表的最外层容器,尽量不要使用scrollView,使用scrollView会造成图表的tooltip点击事件失效,可能是跟scrollView的滚动事件有冲突。

    2.如果是legend无法点击,或者是点击区域有错位的现象,可能是图表渲染时机问题,可以尝试使用aif来控制图表在数据设置完成完成之后再渲染。

    最后附上我简单写的demo地址。 github

    相关文章

      网友评论

          本文标题:钉钉小程序图表库AntV - F2 使用总结

          本文链接:https://www.haomeiwen.com/subject/rxkctctx.html