console
var height = 700;
var width = 1000;
var cx = width / 2;
var cy = height / 2;
var ctx = document.getElementById("canvas").getContext('2d');
function drawLine(start, end, lineWidth = 1, color) {
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
ctx.moveTo(...start);
ctx.lineTo(...end);
ctx.stroke();
}
function drawPixel(x, y, clr) {
x = x;
y = cy - y;
ctx.strokeStyle = clr;
ctx.lineWidth = 1;
// 设置开始点和结束点
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + 1, y); // 加1是为了确保线条在x方向上至少有一个像素
ctx.closePath();
// 画线
ctx.stroke();
}
var base = 17.64;
var maxval = base * 1.1;
var minval = base * 0.9;
var arr = [["09:30",17.64,17.64,17.64,17.64,368884],["09:31",17.28,17.6,17.63,17.09,599869],["09:32",17.47,16.8,17.47,16.76,333862],["09:33",16.9,17.82,17.82,16.9,294016],["09:34",17.84,18.18,18.18,17.83,538518],["09:35",18.18,18.6,18.8,18.18,449833],["09:36",18.48,18.21,18.48,18,321780],["09:37",18.25,18.68,18.68,18.25,199030],["09:38",18.69,18.34,18.7,18.21,292072],["09:39",18.35,18.36,18.49,18.35,165893],["09:40",18.34,18.15,18.34,18,224485],["09:41",18.19,18.35,18.4,18.19,93953],["09:42",18.3,17.9,18.3,17.9,135734],["09:43",17.88,17.16,17.88,17.16,121512],["09:44",17.09,16.65,17.09,16.65,222952],["09:45",16.61,16.97,16.97,16.4,212578],["09:46",17,17.2,17.56,17,166219],["09:47",17.19,16.97,17.19,16.9,112173],["09:48",16.97,17.44,17.45,16.97,52410],["09:49",17.44,17.03,17.45,17.03,72390],["09:50",17.02,17.2,17.2,17,61706],["09:51",17.2,17.51,17.51,17.2,48586],["09:52",17.55,17.8,17.8,17.55,83483],["09:53",17.81,18.05,18.06,17.81,111854],["09:54",18.02,17.4,18.02,17.4,95252],["09:55",17.4,17.64,17.65,17.37,46933],["09:56",17.65,17.49,17.68,17.49,62545],["09:57",17.48,17.25,17.48,17.25,34369],["09:58",17.25,17.48,17.48,17.25,44039],["09:59",17.48,17.37,17.51,17.37,32967],["10:00",17.36,17.1,17.36,17.1,43687],["10:01",17.09,17.09,17.09,17.01,62553],["10:02",17.1,17.22,17.25,17.1,48796],["10:03",17.18,16.88,17.18,16.88,73782],["10:04",16.86,16.84,16.88,16.81,83628],["10:05",16.85,16.95,16.99,16.85,53368],["10:06",16.97,16.67,16.97,16.67,66928],["10:07",16.66,16.48,16.66,16.48,126979],["10:08",16.46,16.5,16.5,16.4,121091],["10:09",16.5,16.85,16.85,16.5,47640],["10:10",16.87,16.89,17,16.87,51814],["10:11",16.85,16.48,16.85,16.45,61014],["10:12",16.48,16.5,16.5,16.43,82989],["10:13",16.5,16.44,16.63,16.44,50790],["10:14",16.44,16.06,16.44,16.05,108322],["10:15",16.02,15.88,16.02,15.88,412013],["10:16",15.89,16.35,16.35,15.89,83632],["10:17",16.38,16.47,16.61,16.38,63296],["10:18",16.45,16.16,16.45,16.16,53315],["10:19",16.16,16.28,16.28,16.14,48326],["10:20",16.3,16.72,16.72,16.3,27565],["10:21",16.76,16.9,17.02,16.76,78547],["10:22",16.88,16.61,16.88,16.55,37847],["10:23",16.62,16.82,16.85,16.57,30231],["10:24",16.82,16.99,17,16.82,26501],["10:25",17,17.05,17.13,17,49670],["10:26",17.07,16.81,17.07,16.81,26268],["10:27",16.82,17.04,17.05,16.82,32693],["10:28",17.05,16.78,17.05,16.77,37422],["10:29",16.78,16.9,16.9,16.77,19180],["10:30",16.92,16.99,17.01,16.92,26458],["10:31",16.99,16.85,16.99,16.85,17280],["10:32",16.83,16.92,16.92,16.82,12786],["10:33",16.92,16.85,16.93,16.85,14205],["10:34",16.86,16.8,16.86,16.8,14328],["10:35",16.8,16.71,16.8,16.71,12282],["10:36",16.71,16.77,16.77,16.71,15024],["10:37",16.78,16.81,16.81,16.78,13680],["10:38",16.81,16.85,16.86,16.81,12776],["10:39",16.85,16.84,16.87,16.84,11350],["10:40",16.85,16.77,16.86,16.77,10625],["10:41",16.76,16.7,16.76,16.7,19161],["10:42",16.7,16.6,16.7,16.6,14316],["10:43",16.59,16.51,16.59,16.5,17896],["10:44",16.51,16.55,16.56,16.49,20109],["10:45",16.57,16.81,16.81,16.57,13568],["10:46",16.81,16.9,16.9,16.81,11227],["10:47",16.91,16.98,16.98,16.91,16399],["10:48",16.98,16.8,16.98,16.8,12507],["10:49",16.77,16.73,16.78,16.71,9226],["10:50",16.74,16.82,16.83,16.74,9706],["10:51",16.82,16.77,16.82,16.76,10065],["10:52",16.76,16.74,16.77,16.74,9311],["10:53",16.73,16.73,16.74,16.72,6627],["10:54",16.73,16.69,16.73,16.69,9127],["10:55",16.68,16.67,16.7,16.67,9655],["10:56",16.66,16.6,16.66,16.6,8399],["10:57",16.61,16.56,16.61,16.56,10142],["10:58",16.56,16.53,16.56,16.53,11936],["10:59",16.52,16.52,16.53,16.51,13012],["11:00",16.52,16.56,16.56,16.52,13032],["11:01",16.55,16.61,16.61,16.55,6326],["11:02",16.62,16.56,16.62,16.56,10563],["11:03",16.55,16.49,16.55,16.49,19729],["11:04",16.48,16.37,16.48,16.37,12692],["11:05",16.35,16.22,16.35,16.22,20282],["11:06",16.2,16.46,16.46,16.2,24861],["11:07",16.47,16.44,16.5,16.44,14398],["11:08",16.44,16.35,16.44,16.35,11307],["11:09",16.35,16.3,16.35,16.3,13418],["11:10",16.3,16.39,16.39,16.3,11571],["11:11",16.39,16.5,16.5,16.39,8199],["11:12",16.52,16.6,16.6,16.52,6560],["11:13",16.6,16.51,16.6,16.51,12122],["11:14",16.51,16.5,16.51,16.5,9025],["11:15",16.5,16.45,16.5,16.45,5742],["11:16",16.44,16.41,16.44,16.4,8406],["11:17",16.41,16.5,16.5,16.4,7337],["11:18",16.5,16.55,16.55,16.5,7033],["11:19",16.55,16.53,16.55,16.52,6588],["11:20",16.53,16.47,16.53,16.47,7471],["11:21",16.48,16.48,16.5,16.48,7426],["11:22",16.49,16.49,16.5,16.48,7157],["11:23",16.49,16.49,16.5,16.48,6448],["11:24",16.48,16.48,16.5,16.48,7694],["11:25",16.49,16.49,16.5,16.48,6457],["11:26",16.49,16.49,16.5,16.49,6812],["11:27",16.49,16.5,16.5,16.49,8352],["11:28",16.49,16.49,16.5,16.49,7894],["11:29",16.49,16.49,16.5,16.48,6784],["11:30",16.5,16.51,16.51,16.49,8512],["13:01",16.51,16.43,16.51,16.43,35178],["13:02",16.41,16.29,16.41,16.29,15903],["13:03",16.28,16.17,16.28,16.17,28364],["13:04",16.16,16.01,16.16,16.01,33565],["13:05",16.01,16.18,16.18,16,46663],["13:06",16.19,16.39,16.39,16.19,12538],["13:07",16.4,16.17,16.4,16.17,16506],["13:08",16.16,16.17,16.17,16.14,16522],["13:09",16.17,16.18,16.19,16.16,15126],["13:10",16.18,16.19,16.2,16.18,12013],["13:11",16.2,16.17,16.21,16.17,16652],["13:12",16.17,16,16.17,16,51738],["13:13",16.01,15.94,16.01,15.94,57844],["13:14",15.94,15.91,15.94,15.9,81118],["13:15",15.91,15.9,15.91,15.89,70852],["13:16",15.9,15.91,15.91,15.9,42237],["13:17",15.91,16.07,16.07,15.91,14894],["13:18",16.08,16.13,16.19,16.08,20610],["13:19",16.13,15.91,16.13,15.9,27185],["13:20",15.92,15.99,16,15.92,18232],["13:21",15.99,15.95,15.99,15.95,15383],["13:22",15.94,15.92,15.94,15.91,24155],["13:23",15.91,15.9,15.91,15.89,52224],["13:24",15.9,15.88,15.9,15.88,74761],["13:25",15.88,15.89,15.89,15.88,62079],["13:26",15.88,15.88,15.89,15.88,125764],["13:27",15.88,15.88,15.88,15.88,15697],["13:28",15.88,15.88,15.88,15.88,25304],["13:29",15.88,15.98,15.98,15.88,55318],["13:30",16,16.2,16.2,16,22343],["13:31",16.21,16.57,16.57,16.21,25502],["13:32",16.6,16.38,16.75,16.38,48216],["13:33",16.32,16.24,16.32,16.06,18076],["13:34",16.26,16.55,16.56,16.26,21694],["13:35",16.55,16.3,16.55,16.23,21098],["13:36",16.31,16.31,16.41,16.31,11383],["13:37",16.32,16.16,16.32,16.16,13099],["13:38",16.13,16.15,16.15,16.08,11484],["13:39",16.17,16.33,16.33,16.16,8863],["13:40",16.34,16.19,16.35,16.19,9843],["13:41",16.19,16.09,16.19,16.09,8453],["13:42",16.09,16.06,16.09,16.06,10386],["13:43",16.06,16,16.06,16,15462],["13:44",16.01,16.18,16.18,16.01,13246],["13:45",16.2,16.22,16.3,16.2,13885],["13:46",16.2,16.07,16.2,16.07,7190],["13:47",16.07,16.07,16.08,16.06,8801],["13:48",16.07,16.05,16.08,16.05,8512],["13:49",16.05,16.02,16.06,16.02,8137],["13:50",16.02,16,16.03,16,13261],["13:51",16.01,16.12,16.12,16.01,9795],["13:52",16.12,16.07,16.14,16.06,7836],["13:53",16.07,16.04,16.07,16.03,6679],["13:54",16.03,16.01,16.03,16.01,8793],["13:55",16.01,16.01,16.02,16,11676],["13:56",16.01,16,16.01,16,17023],["13:57",16,15.91,16,15.91,13637],["13:58",15.91,15.95,15.95,15.9,21180],["13:59",15.95,16.11,16.11,15.95,14986],["14:00",16.13,16.29,16.29,16.13,16952],["14:01",16.29,16.29,16.35,16.29,27897],["14:02",16.28,16.1,16.28,16.1,13711],["14:03",16.09,16.08,16.1,16.07,8563],["14:04",16.08,16.13,16.13,16.08,8967],["14:05",16.13,16.2,16.2,16.13,8197],["14:06",16.2,16.11,16.2,16.11,7483],["14:07",16.1,16.07,16.11,16.07,7747],["14:08",16.06,16.03,16.07,16.03,8335],["14:09",16.03,16.01,16.03,16,10564],["14:10",16.01,16.02,16.03,16.01,10763],["14:11",16.01,16.01,16.03,16.01,9326],["14:12",16.01,16,16.01,16,10143],["14:13",16.01,16.01,16.02,16.01,9712],["14:14",16.01,16.01,16.02,16,10177],["14:15",16.02,16.02,16.03,16.01,11801],["14:16",16.02,16.01,16.02,16,11469],["14:17",16.01,16.01,16.02,16,15719],["14:18",16.01,16.01,16.01,16,13531],["14:19",16.01,15.96,16.01,15.96,10523],["14:20",15.96,15.9,15.96,15.9,19291],["14:21",15.9,15.89,15.91,15.89,39932],["14:22",15.89,15.9,15.91,15.88,28498],["14:23",15.91,15.97,15.97,15.91,9541],["14:24",15.98,16.01,16.01,15.95,13291],["14:25",16.01,15.95,16.01,15.95,10628],["14:26",15.95,15.91,15.96,15.91,11594],["14:27",15.91,15.89,15.91,15.89,18349],["14:28",15.89,15.88,15.9,15.88,22809],["14:29",15.88,15.89,15.89,15.88,25431],["14:30",15.89,15.89,15.9,15.88,24396],["14:31",15.9,15.91,15.92,15.9,12817],["14:32",15.91,15.89,15.91,15.89,17605],["14:33",15.9,15.88,15.9,15.88,32314],["14:34",15.88,15.88,15.89,15.88,56565],["14:35",15.88,15.88,15.88,15.88,6835],["14:36",15.88,15.88,15.88,15.88,6604],["14:37",15.88,15.88,15.88,15.88,6337],["14:38",15.88,15.88,15.88,15.88,3230],["14:39",15.88,15.88,15.88,15.88,5554],["14:40",15.88,15.88,15.88,15.88,5167],["14:41",15.88,15.88,15.88,15.88,3737],["14:42",15.88,15.88,15.88,15.88,4114],["14:43",15.88,15.88,15.88,15.88,4520],["14:44",15.88,15.88,15.88,15.88,3381],["14:45",15.88,15.88,15.88,15.88,3405],["14:46",15.88,15.88,15.88,15.88,2982],["14:47",15.88,15.88,15.88,15.88,4459],["14:48",15.88,15.88,15.88,15.88,4254],["14:49",15.88,15.88,15.88,15.88,2968],["14:50",15.88,15.88,15.88,15.88,2580],["14:51",15.88,15.88,15.88,15.88,4298],["14:52",15.88,15.88,15.88,15.88,4445],["14:53",15.88,15.88,15.88,15.88,3333],["14:54",15.88,15.88,15.88,15.88,3118],["14:55",15.88,15.88,15.88,15.88,3941],["14:56",15.88,15.88,15.88,15.88,4480],["14:57",15.88,15.88,15.88,15.88,5333],["14:58",15.88,15.88,15.88,15.88,401],["14:59",15.88,15.88,15.88,15.88,0],["15:00",15.88,15.88,15.88,15.88,10998]];
drawLine([0, cy], [width, cy], 1, '#fff');
//drawLine([cy, 0], [cy, height], 1, '#fff');
ctx.beginPath();
var step = width/arr.length;
var lx = 0;
var ly = 0;
for(var x = 0; x < arr.length; x++)
{
var dx = x * step;
var dy = height - (arr[x][2]-minval) / (maxval-minval) * height;
ctx.moveTo(lx, ly);
ctx.lineTo(dx, dy);
lx = dx;
ly = dy;
}
ctx.closePath();
ctx.stroke();
<canvas id="canvas" height="800px" width="1000px">
#canvas {
background-color: #000;
transform: scale(0.5);
transform-origin: left top;
}