一 js原生实现canvas画图形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h2>line canvas</h2>
<canvas id="mycanvas" width="100" height="50" style="border: 1px solid #ccc;"></canvas>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
window.onload = function(){
var arr = [40,50,30,70,80,40,90,60,80,60,69,80,60]
drawLine.minCurve(arr)
}
var drawLine = {};
!function(){
// 求数据最大值
Array.prototype.max = function(){
var max = this[0];
var len = this.length;
for (let i = 1; i < len; i++) {
if(this[i]>max){
max = this[i]
}
}
return max
}
function draw(arr){
var width = 100,height=50;
var maxV = arr.max();
// 计算y轴增量
var yStep = height/maxV
var domCan = document.getElementById("mycanvas")
var context = domCan.getContext("2d")
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = "#395b73";
// context.moveTo(0,0) //开始画图的位置
var x_space = width/(arr.length - 1);//水平点的间隙像素
// x表示水平向右延伸,y表示垂直高度位置,从画板最左上角(0,0)开始计算坐标
// context.lineTo(15,60);
var xLen = 0;
for (let i = 0; i < arr.length; i++) {
var yValue = arr[i];//纵坐标值
xLen += x_space;
var yPont = height -yValue*yStep
if(i = 0){
xLen = 0;
}
var m = xLen + ','+ yPont;
context.lineTo (xLen,yPont)
}
context.stroke();
context.closePath();
}
drawLine.minCurve = draw;
}()
</script>
</body>
</html>
二 vue + render+ canvas 绘制图形
<template>
<div>
<!-- 这是table -->
<table ref="searchPage">
........// 此处结构省略
</table>
</div>
</template>
<script>
export default {
data() {
return {
// 表格的配置项
labelArr: [
{ label: "姓名", field: "name", minwidth: 90 },
{
label: "近半月趋势缩略图",
field: "sub",
render: (row) => {
return `<canvas
id="mycanvas" width="100" height="50"
style="border: 1px solid #ccc;">
</canvas>`;
},
},
// {.......} // 此处配置省略
],
arr: [],
};
},
mounted() {
// 在数据原型上绑定求最大值规则,求数据最大值
Array.prototype.max = function () {
var max = this[0];
var len = this.length;
for (let i = 1; i < len; i++) {
if (this[i] > max) {
max = this[i];
}
}
return max;
};
this.canvasData();
},
methods: {
async canvasData() {
// 展示的数据
this.arr = [40, 50, 30, 70, 80, 40, 90, 60, 80, 60, 69, 80, 60];
let mycanvas = "mycanvas";
// 先获取表格的数据,获取数组长度,根据长度调用几次画布方法
let res = await this.$refs["searchPage"].tableData();
for (let i = 0; i < res.data.length; i++) {
mycanvas = `mycanvas${i}`;
// 因为canvas是动态渲染的,通过for循环arr的长度把每条数据的索引拼接在id上生成不同的id,传给draw方 // 法画出多个图形
this.draw(this.arr, mycanvas);
}
},
// canvas绘制方法
draw(arr, mycanvas) {
var width = 100,
height = 50;
var maxV = arr.max();
// 计算y轴增量
var yStep = height / maxV;
var domCan = document.getElementById("mycanvas");
var context = domCan.getContext("2d");
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = "#395b73";
// context.moveTo(0,0) //开始画图的位置
var x_space = width / (arr.length - 1); //水平点的间隙像素
// context.lineTo(15,60); // x表示水平向右延伸,y表示垂直高度位置,从画板最左上角(0,0)开始计算坐标
var xLen = 0;
for (let i = 0; i < arr.length; i++) {
var yValue = arr[i]; //纵坐标值
xLen += x_space;
var yPont = height - yValue * yStep;
if ((i = 0)) {
xLen = 0;
}
// var m = xLen + "," + yPont;
context.lineTo(xLen, yPont);
}
context.stroke();
context.closePath();
},
},
};
</script>
<style>
</style>