怎樣在小程序中繪制圖表？

由于微信小程序本身框架的限制，很難集成目前已有的圖表工具，顯示圖表目前有兩種方案： 服務器端渲染圖表，輸出圖片，微信小程序中直接顯示渲染好的圖片； 利用微信小程序 API 中提供的 canvas 組件支持，自行繪制圖表。 前一種方案已經有非常多類似服務可選，比如 Highcharts 提供了服務端渲染的能力。但這種方式需要后臺有一套渲染服務，并且有一定的網絡開銷。 那么，如何利用 canvas 組件，在小程序中繪制圖表呢？下面，我們就來看嘗試一下。 API 首先，我們在模板文件中使用 聲明一個 canvas 組件，再使用 wx.createContext() 獲取繪圖上下文 context。 接下來，我們調用 wx.drawCanvas() 進行繪制：開始圖表的繪制 繪制折線圖

需要注意的是，moveTo() 方法不會記錄到路徑中。 看看效果圖：好像沒有想象中難，看上去效果還不錯。 繪制每個數據點的標識圖案效果圖：為了避免之前繪制的折線路徑影響到標識圖案的路徑，這一部分包裹在了 beginPath() 和 closePath() 之間。

繪制橫坐標 我們規定的參數格式是這樣的：我們根據參數中的 categories 來繪制橫坐標。先稍微整理下思路： 根據 categories 數均分畫布寬度； 計算出橫坐標中每個分類的起始點； 繪制文案（這兒會多一些代碼，后面會具體提到）

效果圖：效果其實還行，除了文字沒有居中....... 查閱微信小程序官方提供的文檔，小程序并沒有提供 HTML 5 canvas 中的 mesureText（獲取文案寬度）的方法。 下面是我們自己簡單的實現，并不是絕對精確，但誤差基本可以忽略。這里分別處理了字母、數字、點（.）、橫線（-）以及漢字這幾個常用字符。 上面的代碼稍微修改下：

前后圖表對比：