釘釘小程序圖表庫AntV - F2 使用總結

項目涉及圖表部分的技術選型

對于圖表這塊的開發,使用一些流行的圖表庫可以大大提高我們的開發效率,目前較為流行的圖表庫大概有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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容