так какого кода? вводные данные? так это не код, даже и не переменные
<canvas width="500" height="300"> </canvas> ну епана, допустим размер canvas 500x300px точка отсчета с левого верхнего угла, так? высота 300px от 0 до 300px это от 0 до 6.02$ т.е. можно расчитать пропорцией 1$ и сколько это в px будет на графике, так? только 6.02$ это 0px а 0$ это 300px даже не знаю как оформить в коде сиё действие |
Signal,
эх мне бы ваш язык знать, может чем помог, а так немогутный я, до коле толмач не сыщется. |
canvas chart
Цитата:
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> canvas { border: 1px solid red; } </style> </head> <body> <canvas width="500" height="300"> </canvas> <script> let arr = Array.from({ length: 24 }, _ => Math.random() * 2 + 4); let canvas = document.querySelector("canvas"); let ctx = canvas.getContext("2d"); let cnvWidth = canvas.width / 23; let cnvHeight = canvas.height; let x = 0; let tempY = arr[0]; ctx.lineWidth = 3; for (let y of arr.slice(1)) { ctx.beginPath(); ctx.moveTo(x, cnvHeight * (1 - tempY / 6.2)); ctx.strokeStyle = y < tempY ? "#FF0000" : "#228B22"; tempY = y; ctx.lineTo(x += cnvWidth, cnvHeight * (1 - y / 6.2)); ctx.stroke(); } </script> </body> </html> |
ну вроде, то, я пока водой занимаюсь, в лнр воды нет почти, но ты тут сгенерил результат, а конкретный список? для графика нужна только первая цифра
4.621335/4.1592015/ 5.709323/5.1383907/ 5.538191/4.9843719/ 5.643141/5.0788269/ 4.889848/4.4008632/ 4.819855/4.3378695/ 5.433496/4.8901464/ 4.493977/4.0445793/ 5.146029/4.6314261/ 4.614111/4.1526999/ 4.760567/4.2845103/ 5.625925/5.0633325/ 5.299403/4.7694627/ 5.673628/5.1062652/ 5.397109/4.8573981/ 5.602033/5.0418297/ 5.6111/5.04999/ 4.935967/4.4423703/ 4.512971/4.0616739/ 4.720645/4.2485805/ 4.923674/4.4313066/ 4.291274/3.8621466/ 5.669429/5.1024861/ 5.365008/4.8285072/ |
Signal,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> canvas { border: 1px solid red; } </style> </head> <body> <canvas width="500" height="300"> </canvas> <script> let str = `4.621335/4.1592015/ 5.709323/5.1383907/ 5.538191/4.9843719/ 5.643141/5.0788269/ 4.889848/4.4008632/ 4.819855/4.3378695/ 5.433496/4.8901464/ 4.493977/4.0445793/ 5.146029/4.6314261/ 4.614111/4.1526999/ 4.760567/4.2845103/ 5.625925/5.0633325/ 5.299403/4.7694627/ 5.673628/5.1062652/ 5.397109/4.8573981/ 5.602033/5.0418297/ 5.6111/5.04999/ 4.935967/4.4423703/ 4.512971/4.0616739/ 4.720645/4.2485805/ 4.923674/4.4313066/ 4.291274/3.8621466/ 5.669429/5.1024861/ 5.365008/4.8285072/ `; const arr = str.split(/\/\d+\.\d+\/\n/).map(Number).slice(0,-1); const average = arr.reduce((a,b) => a + b, 0)/arr.length; let canvas = document.querySelector("canvas"); let ctx = canvas.getContext("2d"); let cnvWidth = canvas.width; let cnvHeight = canvas.height; let x = 0; let tempY = arr[0]; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(0, cnvHeight * (1 - average / 6.2)); ctx.strokeStyle = "#FFFF00"; ctx.lineTo(cnvWidth, cnvHeight * (1 - average / 6.2)); ctx.stroke(); for (let y of arr.slice(1)) { ctx.beginPath(); ctx.moveTo(x, cnvHeight * (1 - tempY / 6.2)); ctx.strokeStyle = y < tempY ? "#FF0000" : "#228B22"; tempY = y; ctx.lineTo(x += cnvWidth/(arr.length-1), cnvHeight * (1 - y / 6.2)); ctx.stroke(); } document.body.append(`arr: ${JSON.stringify(arr)}, average: ${average.toFixed(1)}`) </script> </body> </html> |
как аказалось, все просто, спасибо тебе мил человек, как доходит до расчетов, математики, тоя просто даун, еще раз благодарствую, будешь у нас в лнр в красном луче, напою тебя витамиными коктейлями)))
|
Signal,
:) |
Часовой пояс GMT +3, время: 02:00. |