摘要：微信小程序中提供了的支持，利用自行繪制圖表。關注我的項目查看完整代碼。

由于微信小程序本身框架的限制，很難集成目前已有的圖表工具，顯示圖表目前有兩種方案：
1、服務器端渲染圖表，輸出圖片，微信小程序中直接顯示渲染好的圖片，比如highcharts提供了服務端渲染的能力hightcharts server render，這種方式需要后臺有一套渲染服務，并且有一定的網絡開銷。
2、微信小程序API中提供了canvas的支持，利用canvas自行繪制圖表。

下面我們來看下怎么在微信小程序中繪制圖表。

關注我的 github項目 查看完整代碼。

查看微信小程序詳細 Canvas API 文檔

在模板文件中使用聲明一個canvas組件

使用wx.createContext獲取繪圖上下文 context

調用wx.drawCanvas進行繪制

wx.drawCanvas({
    canvasId: "firstCanvas",
    actions: context.getActions() // 獲取繪圖動作數組
});

// 獲取繪圖上下文 context
var context = wx.createContext();
// 設置描邊顏色
context.setStrokeStyle("#7cb5ec");
// 設置線寬
context.setLineWidth(4);

context.moveTo(50, 70);
context.lineTo(150, 150);
context.lineTo(250, 30);
context.lineTo(350, 120);
context.lineTo(450, 150);
context.lineTo(550, 95);
// 對當前路徑進行描邊
context.stroke();
wx.drawCanvas({
    canvasId: "testCanvas",
    actions: context.getActions()
});

說明：moveTo方法不記錄到路徑中

效果圖：

好像沒有想象中難，看上去效果還不錯

...

context.beginPath();
// 設置描邊顏色
context.setStrokeStyle("#ffffff");
// 設置填充顏色
context.setFillStyle("#7cb5ec");
context.moveTo(50 + 7, 70);
// 繪制圓形區(qū)域
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);

...

context.closePath();
// 填充路徑
context.fill();
context.stroke();

效果圖：

說明：避免之前繪制的折線路徑影響到標識圖案的路徑，這里包裹在了beginPath和closePath中

規(guī)定我們的參數格式是這樣的

opts = {
    width: 640,    // 畫布區(qū)域寬度
    height: 400,   // 畫布區(qū)域高度
    categories: ["2016-08", "2016-09", "2016-10", "2016-11", "2016-12", "2017"]
}

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

var eachSpacing = Math.floor(opts.width / opts.categories.length);
var points = [];
// 起始點x坐標
var startX = 0;
// 起始點y坐標
var startY = opts.height - 30;
// 終點x坐標
var endX = opts.width;
// 終點y坐標
var endY = opts.height;

// 計算每個分類的起始點x坐標
opts.categories.forEach(function(item, index) {
    points.push(startX + index * eachSpacing);
});
points.push(endX);

// 繪制橫坐標
context.beginPath();
context.setStrokeStyle("#cccccc");
context.setLineWidth(1);

// 繪制坐標軸橫線
context.moveTo(startX, startY);
context.lineTo(endX, startY);
// 繪制坐標軸各區(qū)塊豎線
points.forEach(function(item, index) {
    context.moveTo(item, startY);
    context.lineTo(item, endY);
});
context.closePath();
context.stroke();

context.beginPath();
// 設置字體大小
context.setFontSize(20);
// 設置字體填充顏色
context.setFillStyle("#666666");
opts.categories.forEach(function(item, index) {
    context.fillText(item, points[index], startY + 28);
});
context.closePath();
context.stroke();

效果圖：

效果不錯，除了文字沒有居中.......

查看微信小程序官方提供的文檔并沒有提供html5 canvas中的mesureText(獲取文案寬度)方法，下面我們自己簡單的實現，并不是絕對精確，但是誤差基本可以忽略

function mesureText (text) {
    var text = text.split("");
    var width = 0;
    text.forEach(function(item) {
        if (/[a-zA-Z]/.test(item)) {
            width += 14;
        } else if (/[0-9]/.test(item)) {
            width += 11;
        } else if (/./.test(item)) {
            width += 5.4;
        } else if (/-/.test(item)) {
            width += 6.5;
        } else if (/[u4e00-u9fa5]/.test(item)) {
            width += 20;
        }
    });
    return width;
}

這里分別處理了字母, 數字, ., -, 漢字這幾個常用字符

上面的代碼稍微修改下：

opts.categories.forEach(function(item, index) {
    var offset = eachSpacing / 2 - mesureText(item) / 2;
    context.fillText(item, points[index] + offset, startY + 28);
});

大功告成！

如何在折線上繪制出每個數據點的數值文案大家可以動手自己實現下

預告：下一部分我們一起討論如何根據真實的數據繪制折線以及如果確定縱坐標的范圍和縱坐標分區(qū)的問題。

在微信小程序中繪制圖表（part2）
在微信小程序中繪制圖表（part3）