微信小程式畫折線圖
阿新 • • 發佈:2019-02-17
原始碼連線原始碼
先上效果圖
登陸首頁
折線圖(小程式每天的訪問人數)
檔案功能
analyze.js:初始化登陸頁面,指定頁面的初始資料、生命週期函式、事件處理函式等。設定了一個點選事件,跳轉到訪問人數折線圖頁面。
brokenline.js:折線圖的繪畫。
dimen.js:螢幕尺寸調整檔案,將開發的小程式調整成與手機相適應的螢幕尺寸。
daily.js:儲存折線圖的資料,該資料直接從小程式公眾平臺的開放介面獲取。
實現流程
- 設定初始登陸頁面,編寫折線圖頁面的介面
analyze.js
Page({
/**
1. 頁面的初始資料
*/
data: {
},
/**
2. 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
this.drawTransitionLine();
},
/**
3. 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
4. 生命週期函式--監聽頁面顯示
*/
onShow: function () {
},
/**
5. 生命週期函式--監聽頁面隱藏
*/
onHide: function () {
},
/**
6. 生命週期函式--監聽頁面解除安裝
*/
onUnload: function () {
},
/**
7. 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
},
/**
8. 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {
},
/**
9. 使用者點選右上角分享
*/
onShareAppMessage: function () {
},
// 跳轉至折線圖
startBrokenline: function (event) {
wx.navigateTo({
url: '/pages/analyze/brokenline/brokenline'
})
},
})
2.初始呼叫dimen.js daily.js 獲取資料和尺寸大小
var dimen = require("../../../utils/dimen.js");
var data = require('../../../data/daily.js');
3.建立canvas畫布
const context_line = wx.createCanvasContext('line-canvas');
4.定義座標軸放大倍數和需要的顏色值
// x軸放大倍數
var ratioX = 12.4;
// y軸放大倍數
var ratioY = 4;
// 紫色
var purple = '#7E8FDD';
// 淺紫
var lightPurple = '#D6DBF4';
// 灰色
var gray = '#cccccc';
// 淺灰
var lightGray = '#c7cce5';
// 橙色
var orange = '#ffaa00';
// 淺橙色
var lightOrange = '#DAD7DC';
// 板岩暗藍灰色
var SlateBlue = '#6A5ACD';
// 最大訪問人數
var maxUV = 0;
var count = 0;
5.設定動畫效果
var Timing = {
//由慢至快
easeIn: function easeIn(pos) {
//x的y次冪
return Math.pow(pos, 3);
},
//由快至慢
easeOut: function easeOut(pos) {
return Math.pow(pos - 1, 3) + 1;
},
//由快至慢再由慢至快
easeInOut: function easeInOut(pos) {
if ((pos /= 0.5) < 1) {
return 0.5 * Math.pow(pos, 3);
} else {
return 0.5 * (Math.pow(pos - 2, 3) + 2);
}
},
linear: function linear(pos) {
return pos;
}
};
6.畫折線
drawVisitUvLine: function (list, count) {
list.forEach(function (data, i, array) {
if (data.visit_uv > maxUV) {
maxUV = data.visit_uv;
}
});
//x,y軸放大倍數
ratioX = (canvasWidth_line - dimen.rpx2px(30)) / list.length;
ratioY = (canvasHeight_line - dimen.rpx2px(80)) / maxUV;
if (count < list.length - 1) {
// 當前點座標
var currentPoint = {
x: count * ratioX + dimen.rpx2px(40),
y: (canvasHeight_line - list[count].visit_uv * ratioY) - dimen.rpx2px(40)
};
// 下一個點座標
var nextPoint = {
x: (count + dimen.rpx2px(2)) * ratioX + dimen.rpx2px(40),
y: (canvasHeight_line - list[count + 1].visit_uv * ratioY) - dimen.rpx2px(40)
}
// 開始路徑
context_line.beginPath();
// 畫線:移動到當前點
context_line.moveTo(currentPoint.x, currentPoint.y);
// 畫線:畫線到下個點
context_line.lineTo(nextPoint.x, nextPoint.y);
// 設定線寬度
context_line.setLineWidth(dimen.rpx2px(2));
// 設定線顏色
context_line.setStrokeStyle('white');
// 描線
context_line.stroke();
// 填充內容:豎直往下,至x軸
context_line.lineTo(nextPoint.x, canvasHeight_line - dimen.rpx2px(40));
// 填充內容:水平往左,至上一個點的在x軸的垂點
context_line.lineTo(currentPoint.x, canvasHeight_line - dimen.rpx2px(40));
// 設定填充顏色
context_line.setFillStyle('#D6DBF4');
// 實現閉合與x軸之前的區域
context_line.fill();
}
},
7.畫橫向參照線
drawVisitBackground: function () {
var lineCount = 5; //5條
var estimateRatio = 2;
var ratio = (canvasHeight_line + dimen.rpx2px(30)) / lineCount;
var maxPeople = ((Math.floor(Math.floor(148 / 10) / 4) + 1) * 4) * 10;
for (var i = 0; i < lineCount; i++) {
context_line.beginPath(); //建立一個新路徑
//設定當前座標點
var currentPoint = {
x: dimen.rpx2px(40),
y: (canvasHeight_line - i * ratio) - dimen.rpx2px(40)
};
// 移動到當前座標點
context_line.moveTo(currentPoint.x, currentPoint.y);
// 向Y正軸方向畫線
context_line.lineTo(canvasWidth_line - dimen.rpx2px(10), (canvasHeight_line - i * ratio) - dimen.rpx2px(40));
// 設定屬性
context_line.setLineWidth(dimen.rpx2px(2));
// 設定顏色
context_line.setStrokeStyle(lightGray);
context_line.stroke();
// 標註數值
context_line.setFillStyle(gray);
// 底部人數文字
context_line.fillText(i * maxPeople / (lineCount - 1), currentPoint.x - dimen.rpx2px(40), currentPoint.y);
}
},
8.畫底部日期
drawDate: function (list) {
var ref_date = "";
var temp_ref_date1 = "";
var temp_ref_date2 = "";
list.forEach(function (data, i, array) {
if (i < array.length - 1) {
context_line.setFillStyle(gray); //灰色
ref_date = data.ref_date.toString();
temp_ref_date1 = ref_date.substring(4, 6) + ".";//擷取第4個到第6個字元
temp_ref_date2 = ref_date.substring(6, ref_date.length);
ref_date = temp_ref_date1 + temp_ref_date2;
//每4個標記一次
if (i % 4 == 0) {
context_line.fillText(ref_date, i * ratioX + dimen.rpx2px(10), canvasHeight_line - dimen.rpx2px(10));
}
}
});
},