摘要：本期大綱確定縱坐標(biāo)的范圍并繪制根據(jù)真實(shí)數(shù)據(jù)繪制折線相關(guān)閱讀在微信小程序中繪制圖表在微信小程序中繪制圖表關(guān)注我的項(xiàng)目查看完整代碼。相關(guān)閱讀在微信小程序中繪制圖表在微信小程序中繪制圖表

1、確定縱坐標(biāo)的范圍并繪制

2、根據(jù)真實(shí)數(shù)據(jù)繪制折線

相關(guān)閱讀：
在微信小程序中繪制圖表（part1）
在微信小程序中繪制圖表（part3）

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

為了避免縱坐標(biāo)的刻度出現(xiàn)小數(shù)的情況，我們把縱坐標(biāo)分為5個(gè)區(qū)塊，我們?nèi)∽钚挝豢潭葹槔?0（能夠被5整除），當(dāng)然真實(shí)情況會(huì)比這復(fù)雜，待會(huì)兒我們?cè)儆懻摗?/p>

所以我們的處理輸入輸出應(yīng)該是下面的結(jié)果

(5, 34.1)  => (10, 40)
(10, 34)   => (10, 40)
(-5.1, 40) => (-10, 40)

// 確定Y軸取值范圍
function findRange (num, type, limit) {
    limit = limit || 10;
    
    // upper向上查找，lower向下查找
    type = type ? type : "upper";

    // 進(jìn)行取整操作，避免while時(shí)進(jìn)入死循環(huán)
    if (type === "upper") {
        num = Math.ceil(num);
    } else {
        num = Math.floor(num);
    }
    while (num % limit !== 0) {
        if (type === "upper") {
            num++;
        } else {
            num--;
        }
    }

    return num;
}

好了，初步的確定范圍已經(jīng)完成了，但是細(xì)想一下這個(gè)范圍還是不是很理想，比如用戶傳入的數(shù)據(jù)都是小數(shù)級(jí)別的，比如 (0.2, 0.8)，我們輸出的范圍是(0, 5)這個(gè)范圍偏大，圖表展現(xiàn)的效果則會(huì)是上面有大部分的留白，同樣用戶輸入的數(shù)據(jù)很大，比如(10000, 18000)，我們得到的范圍是(10000, 18010)，這個(gè)范圍則沒(méi)什么意義，所以我們需要根據(jù)傳入的數(shù)據(jù)的范圍來(lái)分別確定我們的最小單位刻度。

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

opts = {
    ...
    series: [{
            ...
            data: [15, 20, 45, 37, 4, 80]
        }, {
            ...
            data: [70, 40, 65, 100, 34, 18]
        }
    ]
}

讓我們繼續(xù)進(jìn)行優(yōu)化

// 合并數(shù)據(jù)，將series中的每項(xiàng)data整合到一個(gè)數(shù)組當(dāng)中
function dataCombine(series) {
    return series.reduce(function(a, b) {
        return (a.data ? a.data : a).concat(b.data);
    }, []);
}

// 根據(jù)數(shù)據(jù)范圍確定最小單位刻度
function getLimit (maxData, minData)
    var limit = 0;
    var range = maxData - minData;
    if (range >= 10000) {
        limit = 1000;
    } else if (range >= 1000) {
        limit = 100;
    } else if (range >= 100) {
        limit = 10;
    } else if (range >= 10) {
        limit = 5;
    } else if (range >= 1) {
        limit = 1;
    } else if (range >= 0.1) {
        limit = 0.1;
    } else {
        limit = 0.01;
    }
}

var dataList = dataCombine(opts.series);
// 獲取傳入數(shù)據(jù)的最小值
var minData = Math.min.apply(this, dataList);
// 獲取傳入數(shù)據(jù)的最大值
var maxData = Math.max.apply(this, dataList);

var limit = getLimit(maxData, minData);

var minRange = findRange(minData, "lower", limit);
var maxRange = findRange(maxData, "upper", limit);

現(xiàn)在我們動(dòng)態(tài)的確定除了合適的最小刻度范圍，接下來(lái)我們接著優(yōu)化一下上面的findRange方法，主要是增加對(duì)小數(shù)的支持

function findRange (num, type, limit) {
    limit = limit || 10;
    type = type ? type : "upper";
    var multiple = 1;
    while (limit < 1) {
        limit *= 10;
        multiple *= 10;
    }
    if (type === "upper") {
        num = Math.ceil(num * multiple);
    } else {
        num = Math.floor(num * multiple);
    }
    while (num % limit !== 0) {
        if (type === "upper") {
            num++;
        } else {
            num--;
        }
    }

    return num / multiple;
}

現(xiàn)在我們已經(jīng)確定好了Y軸的取值范圍，關(guān)于如何畫(huà)出Y軸可以參看 part1 中X軸的繪制方法，此處不再累贅。

Y軸效果圖：

opts = {
    ...
    series: [{
            ...
            data: [15, 20, 45, 37, 4, 80]
        }, {
            ...
            data: [70, 40, 65, 100, 34, 18]
        }
    ]
}

opts = {
    ...
    series: [{
            ...
            data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8]
        }, {
            ...
            data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94]
        }
    ]
}

效果還不錯(cuò)，我們接著往下

問(wèn)題的關(guān)鍵在于確定每個(gè)數(shù)據(jù)點(diǎn)的(x, y)坐標(biāo)，x坐標(biāo)比較好確定，我們根據(jù)畫(huà)布的寬度以及opts.categories即可確定。

規(guī)定我們的配置為：

config = {
    xAxisHeight: 30, // X軸高度
    yAxisWdith: 30   // Y軸寬度
}

var data = [15, 20, 45, 37, 4, 80];
var xPoints = [];
var validWidth = opts.width - config.yAxisWidth;
var eachSpace = validWidth / opts.categories.length;
var start = config.yAxisWidth;

data.forEach(function (item, index) {
    xPoints.push(start + (index + 0.5) * eachSpace);
});

y坐標(biāo)稍微會(huì)復(fù)雜一點(diǎn)，需要根據(jù)Y軸的范圍已經(jīng)本身的數(shù)值進(jìn)行計(jì)算得出。

所以我們計(jì)算出的y應(yīng)該為

y = validHeight * (data - min) / (max - min);
// 由于canvas畫(huà)布是左上角為原點(diǎn)坐標(biāo)，故我們變化一下
// 得到最終的y繪制點(diǎn)
y = valideHeight - y;

代碼如下：

var data = [15, 20, 45, 37, 4, 80];
var yPoints = [];
var validHeight = opts.height - config.xAxisHeight;
data.forEach(function(item) {
    var y = validHeight * (item - min) / (max - min);
    y = validHeight - y;

    yPoints.push(y);
}

現(xiàn)在我們已經(jīng)確定了數(shù)據(jù)點(diǎn)在畫(huà)布上的繪制坐標(biāo)，關(guān)于如何繪制折現(xiàn)請(qǐng)查看 part1 中相關(guān)內(nèi)容，此處不再累贅。

最終效果圖如下：

預(yù)告：下一部分我們一起討論繪制過(guò)程中的一些技巧、動(dòng)畫(huà)效果和如何工程化我們的項(xiàng)目。

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