溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“微信小程序開發中如何使用canvas繪制坐標圖”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“微信小程序開發中如何使用canvas繪制坐標圖”這篇文章吧。
1、線圖
function draw(data, ctx) { var width, height = 300, ratioX, ratioY, maxY, stepY; var newArr = new Array(); //-------- 數據處理 -----------
if (data.time == null) {return;
} if (data.type == 'day' || data.type == 'month') {var timeList = new Array();for (var i = 0; i < data.time.length; i++) { if ((i % 4 == 0 && data.type == 'day') || (i % 5 == 0 && data.type == 'month')) {
timeList.push(data.time[i].substr(data.time[i].length - 5, 5));
}
}
data.time = timeList;
} else {for (var i = 0; i < data.time.length; i++) {
data.time[i] = data.time[i].substr(data.time[i].length - 5, 5);
}
}//這里是后臺返回的數據，處理后展示在頁面
// ---------- 獲取屏寬 ---------------
wx.getSystemInfo({
success: function (res) {
width = res.windowWidth;
}
})
ratioX = parseInt((width - 60) / (data.time.length - 1));
ratioY = parseInt((height - 45) / 6); //求value的最大值
for (var i = 0; i < data.list.length; i++) {
newArr.push(Math.max.apply(Math, data.list[i].value));
}
maxY = Math.max.apply(Math, newArr);
stepY = Math.ceil(maxY / 4); // ------- 繪制坐標線 ------
ctx.beginPath(); for (var i = 0; i < 5; i++) {
ctx.save();
ctx.setStrokeStyle("#dde2e3");
ctx.setFillStyle("#848198");
ctx.setFontSize('8');
ctx.fillText(i * stepY, 0, 220 - i * ratioY);
ctx.moveTo(22, 215 - i * ratioY);
ctx.lineTo((width - 30), 215 - i * ratioY);
ctx.stroke();
ctx.restore();
} //--------- 繪制圖例 ------------
for (var i = 0; i < data.list.length; i++) {
ctx.save();
ctx.translate(15, 215);
ctx.beginPath();
ctx.setStrokeStyle(color[i]);
ctx.setLineCap("round");
ctx.setLineWidth(10);
ctx.moveTo(22 + i * 38, 46);
ctx.lineTo(38 + i * 38, 46);
ctx.stroke();
ctx.setFontSize('8');
ctx.setFillStyle("#000000");
ctx.fillText(data.list[i].title, 21 + i * 38, 66);
ctx.restore();
} // ------ 繪制橫坐標 ------
for (var i = 0; i < data.time.length; i++) {
ctx.save();
ctx.translate(15, 215);
ctx.setFontSize('8');
ctx.setFillStyle('#848198');
ctx.fillText(data.time[i], i * (ratioX), 20);
ctx.restore();
} //------ 繪制折線 ---------
for (var i = 0; i < data.list.length; i++) {
ctx.beginPath();
ctx.save();
ctx.translate(22, 215);
ctx.setStrokeStyle(color[i]);
ctx.moveTo(0, -data.list[i].value[0] / (stepY / ratioY));//console.log(data.list[i].value);for (var j = 0; j < data.list[i].value.length; j++) {
ctx.lineTo(j * (parseFloat((width - 53) / (data.list[i].value.length - 1))), -(data.list[i].value[j] / (stepY / ratioY)));
ctx.stroke();
}
ctx.restore();
}
ctx.draw();
}2、餅圖
function draw(data, ctx) { var start = 0,x,y = 140,r = 90,total=0, end,width; var ratio = new Array();
wx.getSystemInfo({success: function (res) {
width = res.windowWidth;
}
});
x = width / 2 - 15; for(var i=0;i<data.length;i++){
total += data[i].num;
} for (var i = 0; i < data.length; i++) {
ratio.push(data[i].num / total);
} // -------- 繪制餅圖 --------------------
for (var i = 0; i < data.length; i++) {
end = start + Math.PI * 2 * ratio[i];
ctx.save();
ctx.translate(x, y);
ctx.setFontSize("8");
ctx.setFillStyle(color[i]);
ctx.setTextAlign("center");
ctx.setTextBaseline("middle");
ctx.fillText(data[i].name + ' ' + (ratio[i] * 100).toFixed(2) + '%', Math.cos((end+start)/2)* 120, Math.sin((end+start)/2)* 120);
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.setFillStyle(color[i]);
ctx.moveTo(x, y);
ctx.arc(x, y, r, start, end, false);
ctx.fill();
ctx.restore();
start = end;
} // -------- 餅心 ---------------
ctx.save();
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, 50, 0, Math.PI * 2);
ctx.setFillStyle("#ffffff");
ctx.fill();
ctx.restore();
ctx.draw();
}3、柱狀圖
function draw(data, ctx) { var width,height = 260; var newArr = new Array();
wx.getSystemInfo({success: function (res) {
width = res.windowWidth;
}
}) var ratioX = (width - 55) / data.length; var ratioY = parseInt((height - 45) / 5); //求NUM的最大值
for (var i = 0; i < data.length; i++) {
newArr.push(data[i].num);
} var maxY = Math.max.apply(Math, newArr); var stepY = Math.ceil(maxY / 4); // ------- 繪制坐標線 ------
ctx.beginPath(); for (var i = 0; i < 5; i++) {
ctx.save();
ctx.setStrokeStyle("#dde2e3");
ctx.setFillStyle("#848198");
ctx.setFontSize('8');
ctx.moveTo(15, 215 - i * ratioY);
ctx.lineTo(380, 215 - i * ratioY);
ctx.fillText(i * stepY, 0, 220 - i * ratioY);
ctx.stroke();
ctx.restore();
}
以上是“微信小程序開發中如何使用canvas繪制坐標圖”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
