так какого кода? вводные данные? так это не код, даже и не переменные
<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, время: 18:33. |