官方微信圖形插件wx-f2

wx-f2

F2 的微信小程序版本，支持原生 F2 的所有功能，歡迎使用反饋。

文檔結構

本項目參考了 echarts-for-weixin 的封裝思路，即封裝一個自定義組件 ，方便用戶使用，該組件位於 /f2-canvas 目錄下。

微信小程序自定義組件結構和使用請參考: 自定義組件

以下是目錄結構說明：

├── f2-canvas                    // f2-canvas 組件
│   ├── f2-canvas.js
│   ├── f2-canvas.json
│   ├── f2-canvas.wxml
│   ├── f2-canvas.wxss
│   ├── interaction              // f2 封裝的圖表交互模塊
│   └── lib                      // f2-canvas 組件依賴的類庫
│       ├── EventEmitter.min.js  // 事件發射器，用於監聽、觸發事件， 3.1K
│       ├── f2.js                // f2 腳本（壓縮），155K
│       └── renderer.js          // f2 專爲適配微信小程序繪圖上下文 context 而封裝的僞 Canvas
├── pages                        // f2-canvas 組件使用示例
│  

下載

由於目前微信小程序中不支持通過 npm install 來安裝第三方的工具庫，所以需要將本項目中的 /f2-canvas 文件夾拷貝到自己的項目中以便使用。

注意

當前 /f2-canvas/lib/ 目錄下的 f2.js 文件爲 3.2.0-beta.x 版本（支持圖表交互）。如有必要，也可以由用戶自己編譯（如要使用 F2 的按需加載）替換。

API

參見 F2 API：https://antv.alipay.com/zh-cn/f2/3.x/api/index.html

快速開始

下面我們就開始使用 f2-canvas 組件來繪製圖表吧，這裏假設用戶已經初步瞭解微信小程序的基礎框架，如不瞭解，請先閱讀官網教程： 官方教程。

以繪製柱狀圖爲例：

• STEP 1：在 pages 目錄下新建 column 目錄，該目錄需要包含以下幾個文件：

  • index.js
  • index.json
  • index.wxml
  • index.wxss

  各個文件的內容如下：

  • index.json 配置文件，引入 f2-canvas 組件，這裏需要注意路徑要正確，由於微信小程序組件名不允許包含數字，所以這裏將其命名爲 ff-canvas

  // index.json
  {
    "usingComponents": {
      "ff-canvas": "../../../f2-canvas/f2-canvas"
    }
  }

  • index.wxml 視圖，使用 ff-canvas 組件，其中 opts 是一個我們在 index.js 中定義的對象，必設屬性，它使得圖表能夠在頁面加載後被初始化並設置，詳見 index.js 中的使用。

  <!--index.wxml-->
  <view class="container">
    <ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas>
  </view>

  • index.js 邏輯處理，這裏還需要引入 F2 用於繪製圖表，結構如下，注意路徑正確。

  // index.js
  import F2 from '../../../f2-canvas/lib/f2';
  
  let chart = null;
  
  function initChart(canvas, width, height) { // 使用 F2 繪製圖表
    const data = [
      { year: '1951 年', sales: 38 },
      { year: '1952 年', sales: 52 },
      { year: '1956 年', sales: 61 },
      { year: '1957 年', sales: 145 },
      { year: '1958 年', sales: 48 },
      { year: '1959 年', sales: 38 },
      { year: '1960 年', sales: 38 },
      { year: '1962 年', sales: 38 },
    ];
    chart = new F2.Chart({
      el: canvas,
      width,
      height
    });
  
    chart.source(data, {
      sales: {
        tickCount: 5
      }
    });
    chart.tooltip({
      showItemMarker: false,
      onShow(ev) {
        const { items } = ev;
        items[0].name = null;
        items[0].name = items[0].title;
        items[0].value = '¥ ' + items[0].value;
      }
    });
    chart.interval().position('year*sales');
    chart.render();
    return chart;
  }
  
  Page({
    data: {
      opts: {
        onInit: initChart
      }
    },
  
    onReady() {
    }
  });

 由於 f2-canvas 組件主要是對小程序的畫布上下文和 html5 canvas 的上下文進行了適配以支持 F2 在小程序端的渲染，所以 F2 能繪製什麼圖表，小程序端就能繪製什麼圖表，使用時也只需按照 F2 的語法來寫即可。

本項目只展示了部分 demos，更全的見 AntV F2。

需要注意的是，在創建 chart 的時候，需要使用 'el' 屬性來指定容器，對應 this.data.opts.onInit 方法形參中的 canvas 屬性，另外該方法還會返回 width, height 屬性分別對應畫布的寬和高。

chart = new F2.Chart({
  el: canvas,
  width,
  height
});

不支持的功能

目前由於小程序不支持 document，所以 Guide.Html 輔助元素組件目前仍無法使用，其他 F2 的功能全部支持。

微信版本要求

• 微信版本 >= 6.6.3
• 基礎庫版本 >= 1.9.91

如何貢獻

如果您在使用的過程中碰到問題，可以先通過 issues 看看有沒有類似的 bug 或者建議。

License

MIT license

 

QQ羣：614568147（AI軟件與硬件開發應用）
QQ羣：479199951（Cesium）

微信公衆號：