Форум

Signal · #11 (**permalink**) 21.08.2022, 17:08

так какого кода? вводные данные? так это не код, даже и не переменные

<canvas width="500" height="300">
</canvas>

ну епана, допустим размер canvas 500x300px

точка отсчета с левого верхнего угла, так?

высота 300px
от 0 до 300px
это от 0 до 6.02$
т.е. можно расчитать пропорцией 1$ и сколько это в px будет на графике, так?
только 6.02$ это 0px а 0$ это 300px
даже не знаю как оформить в коде сиё действие

рони · #12 (**permalink**) 21.08.2022, 17:48

Signal,
эх мне бы ваш язык знать, может чем помог, а так немогутный я, до коле толмач не сыщется.

рони · #13 (**permalink**) 21.08.2022, 18:17

Сообщение от 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 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>

Signal · #14 (**permalink**) 21.08.2022, 18:41

ну вроде, то, я пока водой занимаюсь, в лнр воды нет почти, но ты тут сгенерил результат, а конкретный список? для графика нужна только первая цифра

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/

рони · #15 (**permalink**) 21.08.2022, 18:53

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 · #16 (**permalink**) 21.08.2022, 19:09

как аказалось, все просто, спасибо тебе мил человек, как доходит до расчетов, математики, тоя просто даун, еще раз благодарствую, будешь у нас в лнр в красном луче, напою тебя витамиными коктейлями)))

рони · #17 (**permalink**) 21.08.2022, 19:19

Signal,

Форум

Справочник

Discord чат

Курсы javascript