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

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

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

關(guān)注我的 github項(xiàng)目 查看完整代碼。

查看微信小程序詳細(xì) Canvas API 文檔

在模板文件中使用聲明一個(gè)canvas組件

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

調(diào)用wx.drawCanvas進(jìn)行繪制

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

// 獲取繪圖上下文 context
var context = wx.createContext();
// 設(shè)置描邊顏色
context.setStrokeStyle("#7cb5ec");
// 設(shè)置線寬
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);
// 對(duì)當(dāng)前路徑進(jìn)行描邊
context.stroke();
wx.drawCanvas({
    canvasId: "testCanvas",
    actions: context.getActions()
});

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

效果圖：

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

...

context.beginPath();
// 設(shè)置描邊顏色
context.setStrokeStyle("#ffffff");
// 設(shè)置填充顏色
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();

效果圖：

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

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

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

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

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

// 計(jì)算每個(gè)分類的起始點(diǎn)x坐標(biāo)
opts.categories.forEach(function(item, index) {
    points.push(startX + index * eachSpacing);
});
points.push(endX);

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

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

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

效果圖：

效果不錯(cuò)，除了文字沒有居中.......

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

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;
}

這里分別處理了字母, 數(shù)字, ., -, 漢字這幾個(gè)常用字符

上面的代碼稍微修改下：

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

大功告成！

如何在折線上繪制出每個(gè)數(shù)據(jù)點(diǎn)的數(shù)值文案大家可以動(dòng)手自己實(shí)現(xiàn)下

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

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