仿小程序數(shù)據(jù)助手?jǐn)?shù)據(jù)頁面之折線圖
昨天微信團(tuán)隊(duì)發(fā)布了神器——小程序數(shù)據(jù)助手,想起自己以前也寫過一個(gè)很簡陋的餅圖繪制的demo,那么就再搞點(diǎn)事,畫個(gè)折線圖。
1.Line連線、畫空心圓圈
2.描圓圈
3.填充背景色
4.監(jiān)聽觸摸手勢
5.隨著滑動(dòng)讀取數(shù)據(jù)并顯示
說明
1-4點(diǎn)應(yīng)該不難理解,第5點(diǎn)需要處理手勢滑動(dòng)的步長,是以天為單位,一天一移動(dòng);浮動(dòng)層跟隨當(dāng)前日期移動(dòng)而移動(dòng),其位置當(dāng)處在對(duì)側(cè)的半屏區(qū)域中,比如接近右屏邊緣時(shí),要在浮動(dòng)層置左。
1.獲取數(shù)據(jù)
小程序已經(jīng)開放了統(tǒng)計(jì)接口,直接拿真實(shí)的數(shù)據(jù)過來做了。
https://mp.weixin.qq.com/debug/wxadoc/dev/api/analysis.html#日趨勢
以日趨勢數(shù)據(jù)為例,按照文檔,先取到access_token,再向https://api.weixin.qq.com/datacube/getweanalysisappiddailysummarytrend?access_token=ACCESS_TOKEN請(qǐng)求數(shù)據(jù),傳入起始日期做為參數(shù)。這里有一個(gè)巨坑,只能夠起始入傳同一天,否則,返回時(shí)報(bào)range過界錯(cuò)誤。
整理得到的數(shù)組數(shù)據(jù)示例如下
[
{
"ref_date": "20170412",
"session_cnt": 8,
"visit_pv": 49,
"visit_uv": 4,
"visit_uv_new": 1,
"stay_time_uv": 73.75,
"stay_time_session": 36.875,
"visit_depth": 3.25
},
{
"ref_date": "20170413",
"session_cnt": 10,
"visit_pv": 81,
"visit_uv": 8,
"visit_uv_new": 2,
"stay_time_uv": 351.25,
"stay_time_session": 281,
"visit_depth": 3.5
}
...
]
2.畫折線
var data = require('../../data/daily.js');
Page({
data: {
}, //事件處理函數(shù)
onLoad: function () { // 畫布高度,與CSS中定義等值
var canvasHeight = 100; // x軸放大倍數(shù)
var ratioX = 10; // y軸放大倍數(shù)
var ratioY = 2; const context = wx.createCanvasContext('line-canvas');
data.daily.forEach(function(daily, i, array) { // 當(dāng)前點(diǎn)坐標(biāo)
var currentPoint = {
x: i * ratioX,
y: canvasHeight - daily.visit_uv_new * ratioY
}; /* 畫折線 */
if (i < array.length - 1) { // 開始
context.beginPath(); // 移動(dòng)到當(dāng)前點(diǎn)
context.moveTo(currentPoint.x, currentPoint.y); // 畫線到下個(gè)點(diǎn)
context.lineTo((i + 1) * ratioX, canvasHeight - array[i + 1].visit_uv_new * ratioY); // 設(shè)置屬性
context.setLineWidth(1); // 設(shè)置顏色
context.setStrokeStyle('#7587db'); // 描線
context.stroke();
} /* 畫圓圈 */
});
context.draw();
}
})
寫代碼的過程中,犯一個(gè)錯(cuò)誤,將context.draw();方法放在forEach循環(huán)體中了,于是只顯現(xiàn)出最后一段折線,之前的繪制的全被覆蓋了。
效果如圖
3.畫圓圈
畫圓的本質(zhì)是畫弧,以當(dāng)前點(diǎn)作為圓心,畫半徑為3的??;填充為白色背景,要覆蓋折線的拐點(diǎn)。fill()與stroke()分別填充背景與描邊。
/* 畫圓圈 */context.beginPath();
context.arc(currentPoint.x, currentPoint.y, 2, 0, 2 * Math.PI);context.setStrokeStyle(purple);
context.setFillStyle('white');
context.stroke();
context.fill();
效果如圖
4.畫參照線
畫橫線的同時(shí),標(biāo)上數(shù)值。
/* 畫橫向參照線 */
var lineCount = 4;
var estimateRatio = 3;
var ratio = canvasHeight / lineCount; for (var i = 0; i < lineCount; i++) {
context.beginPath();
var currentPoint = {
x: 0,
y: canvasHeight - i * ratio
}; // 移動(dòng)到原點(diǎn)
context.moveTo(currentPoint.x, currentPoint.y); // 向Y正軸方向畫線
context.lineTo(canvasWidth, canvasHeight - i * ratio); // 設(shè)置屬性
context.setLineWidth(1); // 設(shè)置顏色
context.setStrokeStyle(gray);
context.stroke(); // 標(biāo)注數(shù)值
context.setFillStyle(gray);
context.fillText((i * ratio / estimateRatio).toFixed(0), currentPoint.x, currentPoint.y);
}
以上代碼中estimateRatio,是估算的一值,因?yàn)榈侥壳盀橹?,還沒有計(jì)算報(bào)表數(shù)據(jù)中最大的Y值是幾許。
效果如圖
填充紫色背景
目前看起來都是白底,光禿禿一條折線不免單調(diào),因此要填充上從折線與x軸之前的面積區(qū)域。
思路是:每畫一段,便自由落體拐頭向下,左往x軸負(fù)方向回到上一個(gè)的位置,最后與上一個(gè)點(diǎn)閉合,于是形成了一個(gè)梯形結(jié)構(gòu),經(jīng)多次fill()方法填充后,實(shí)現(xiàn)了面積圖的效果。
// 豎直往下,至x軸context.lineTo(nextPoint.x, canvasHeight);// 水平往左,至上一個(gè)點(diǎn)的在x軸的垂點(diǎn)context.lineTo(currentPoint.x, canvasHeight);// 設(shè)置淡紫色context.setFillStyle(lightPurple);// 實(shí)現(xiàn)閉合與x軸之前的區(qū)域context.fill();
將以上代碼放在畫折線圖forEach循環(huán)體的最末。
得到上述最終效果。