微信小程序不支持圖表工具，通過實例帶你了解兩種繪制方案 _圖表工具

作者：，前端開發工程師，專注于前端技術研究和內容分享，地址：
由于微信小程序本身框架的限制，很難集成目前已有的圖表工具，顯示圖表目前有兩種方案：
服務器端渲染圖表，輸出圖片，微信小程序中直接顯示渲染好的圖片，比如提供了服務端渲染的能力，這種方式需要后臺有一套渲染服務，并且有一定的網絡開銷。
微信小程序API中提供了的支持，利用自行繪制圖表。
下面我們來看下怎么在微信小程序中繪制圖表。
API
查看微信小程序詳細API 文檔。
在模板文件中使用聲明一個組件。
使用wx.獲取繪圖上下文。
調用wx.進行繪制。
wx.drawCanvas({
開始圖表的繪制
繪制折線圖
// 獲取繪圖上下文 context
說明：方法不記錄到路徑中
效果圖：
好像沒有想象中難，看上去效果還不錯。
繪制每個數據點的標識圖案
...context.beginPath; // 設置描邊顏色 context.setStrokeStyle("#ffffff"); // 設置填充顏色 context.setFillStyle("#7cb5ec"); context.moveTo(50 + 7, 70); // 繪制圓形區域 context.arc(50, 70, 8, 0, 2 * Math.PI, false); context.moveTo(150 + 7, 150); context.arc(150, 150, 8, 0, 2 * Math.PI, false);
效果圖：
說明：避免之前繪制的折線路徑影響到標識圖案的路徑，這里包裹在了和中。
繪制橫坐標
規定我們的參數格式是這樣的。
opts = { width: 640, // 畫布區域寬度 height: 400, // 畫布區域高度 categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'] }
我們根據參數中的來繪制橫坐標。
稍微整理下思路：
根據
計算出橫坐標中每個分類的起始點；
繪制文案（這兒會多一些代碼，后面會具體提到）。
var eachSpacing = Math.floor(opts.width / opts.categories.length);
效果圖：
效果不錯，除了文字沒有居中……
查看微信小程序官方提供的文檔并沒有提供HTML5 中的（獲取文案寬度）方法，下面我們自己簡單的實現，并不是絕對精確，但是誤差基本可以忽略。
function mesureText (text) { var text = text.split('');
這里分別處理了字母、數字、.、-、漢字這幾個常用字符。
上面的代碼稍微修改下：
opts.categories.forEach(function(item, index) { var offset = eachSpacing / 2 - mesureText(item) / 2; context.fillText(item, points[index] + offset, startY + 28); });
大功告成！
如何在折線上繪制出每個數據點的數值文案大家可以動手自己實現下。
確定縱坐標的范圍并繪制
為了避免縱坐標的刻度出現小數的情況，我們把縱坐標分為5個區塊，我們取最小單位刻度為例如10（能夠被5整除），當然真實情況會比這復雜，待會兒我們再討論。
所以我們的處理輸入輸出應該是下面的結果。
(5, 34.1) => (10, 40)
// 確定Y軸取值范圍
好了，初步的確定范圍已經完成了，但是細想一下這個范圍還是不是很理想，比如用戶傳入的數據都是小數級別的，比如 (0.2, 0.8)，我們輸出的范圍是(0, 5)這個范圍偏大，圖表展現的效果則會是上面有大部分的留白，同樣用戶輸入的數據很大，比如(10000, 18000)，我們得到的范圍是(10000, 18010)，這個范圍則沒什么意義，所以我們需要根據傳入的數據的范圍來分別確定我們的最小單位刻度。
規定我們的參數格式是這樣的：
opts = {
讓我們繼續進行優化。
// 合并數據，將series中的每項data整合到一個數組當中
現在我們動態的確定除了合適的最小刻度范圍，接下來我們接著優化一下上面的方法，主要是增加對小數的支持。
function findRange (num, type, limit) { limit = limit || 10;
現在我們已經確定好了Y軸的取值范圍，關于如何畫出Y軸可以參看上文中X軸的繪制方法，此處不再累贅。
Y軸效果圖：
opts = {
opts = {
效果還不錯，我們接著往下。
根據真實數據繪制折線
問題的關鍵在于確定每個數據點的(x, y)坐標，x坐標比較好確定，我們根據畫布的寬度以及opts.即可確定。
規定我們的配置為：
config = { xAxisHeight: 30, // X軸高度 yAxisWdith: 30 // Y軸寬度
var data = https://www.jianzixun.com/[15, 20, 45, 37, 4, 80];
y坐標稍微會復雜一點，需要根據Y軸的范圍已經本身的數值進行計算得出。
所以我們計算出的y應該為：
y = validHeight * (data - min) / (max - min);
代碼如下：
var data = https://www.jianzixun.com/[15, 20, 45, 37, 4, 80];
現在我們已經確定了數據點在畫布上的繪制坐標，關于如何繪制折現請查看 part1 中相關內容，此處不再累贅。
最終效果圖如下：
餅圖繪制
先看一下API 。
下面開始（使用ES6語法編寫，后面我們可以使用編譯成ES5的語法）
假設我們有這樣的數據
const series = [ {data: 15, color: '#7cb5ec'}, {data: 35, color: '#f7a35c'}, {data: 78, color: '#434348'}, {data: 63, color: '#90ed7d'} ];
計算出各項所占的比例和開始的弧度。
.js
export function calPieAngle (series) { // 計算數據總和 let count = 0; series.forEach((item) => { count += item.data; });
數據已經計算出來了，下面讓我開始繪制吧。
.js
import { calPieAngle } from 'calPieData'export default function drawPieChart (series) {
調用()就可以得到下面的結果：
很簡單是不是，下面我們給各區塊加上一個白色的分割線。
因為arc實際上是繪制了一條路徑，所以我們簡單的描邊一下就可以了。
...
添加動畫效果
首先讓我們創建一個動畫工具，這個動畫工具能夠傳入一些自定義的參數微信小程序 ios兼容性，比如動畫時間，能夠有動畫每一步的回調以及動畫結束的回調。
.js
export default function Animation (opts) { // 處理用戶傳入的動畫時間，默認為1000ms // 因為用戶有可能傳入duration為0，所以不能用opts.duration = opts.duration || 1000 來做默認值處理 // 否則用戶傳入0也會處理成默認值1000 opts.duration = typeof opts.duration === 'undefined' ? 1000 : opts.duration;
動畫使用了e，并且已經滿足了我們上面定義的需求
在實戰中，此處的動畫都是線性的，一般我們還會加入緩動選項，比如緩入，緩出，還有一點，在微信小程序真機中IOS設備是不支持e的，所以要做降級處理，使用微信小程序 ios兼容性，。
下面我們調用來完成動畫效果。
app.js
修改一下tion，能夠接受參數。
...
同樣，修改一下，能夠接受參數。
export function calPieAngle (series, process = 1) {
使用構建項目
is a next-.your app orusing, thenthem up into afile for use inand Node.js.
也就是說是一個前端構建工具，能夠將我們的整個項目合并輸出成一個最終的編譯結果，上面我們編寫代碼的時候都是按照不同的功能放到不同的文件中，這樣有利于后期的可持續性開發和維護，正好能幫助我們構建出最后的編譯結果。
先安裝。
npm install -g rollup
添加對ES6的支持。
npm install --save-dev rollup-plugin-babel
創建.文件在項目根目錄，告訴babel轉義時使用哪個。
{ "presets": ["es2015-rollup"], }
好了剩下最后一步，定義我們的..js配置文件:
import babel from 'rollup-plugin-babel'; export default {
會從入口文件開始，查找我們的依賴（），逐級往下深入，把依賴的文件全部收集起來并合并到一起，最后輸出到我們定義的dest文件中
執行:
rollup -c
好了，我們就得到了我們最后的項目編譯文件.js 。
【微信小程序不支持圖表工具，通過實例帶你了解兩種繪制方案】本文到此結束，希望對大家有所幫助。

继夫的玩弄H辣文的小说|女人与拘性猛交视频|精品欧美高清不卡高清|一起做亏亏的事情的视频|啦啦啦在线视频观看|望月直播下载ios版本|国产日韩欧美一区二区三区

微信小程序不支持圖表工具，通過實例帶你了解兩種繪制方案