Javascript-форум - График в canvas на javascript

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - График в canvas на javascript (https://javascript.ru/forum/misc/84370-grafik-v-canvas-na-javascript.html)

Signal

21.08.2022 14:02

График в canvas на javascript

Всех приветствую.
Есть 24 числа, скажем от 4 до 6 в каждой единице из этих 24 значений
типа array(24) 4.2, 5,7, 3.1 и т.д. 24 штуки

, т.е. он получается перевернут
а надо так:

я понимаю, что пропорциями можно все рассчитать, но не математик я и 2-ка была по ней, не въеду

координаты считаю так
let PosY = ((Centered * BuyPrice) / (MaxFPrice));

рони	21.08.2022 14:32

Signal,
подожду переводчика ...

Signal

21.08.2022 14:36

Цитата:

Сообщение от рони (Сообщение 547498)

Signal,
подожду переводчика ...

так, а чего не понятно, координаты картинки с верхнего левого угла, т.е. чем больше число, тем ниже оно на графике расположено, а надо наоборот

рони	21.08.2022 15:12

Signal,
ок, подожду человека который вам ответит, возможно тогда пойму что вы спросили.)))

Signal

21.08.2022 15:24

Цитата:

Сообщение от рони (Сообщение 547500)

Signal,
ок, подожду человека который вам ответит, возможно тогда пойму что вы спросили.)))

ну в тогда так, в 3d моделировании, точка та, которая в 4.42 (чернинькая) должна быть в красненькой точке, т.е. на графике начало координат по оси Y снизу, а на canvase начальноя точка координат сверху, вот и сам вопрос как их трансформировать-то?

рони	21.08.2022 15:27

Signal,
увы мне))) не понимаю ... но на всякий случай ...

<html>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);
            let arr = Array.from({length : 24}, (_, i)=> [i,Math.random() * 2 + 4]);
            const average = arr.reduce((a,b) => a + b[1], 0)/24;
            arr = arr.map( a => [...a, average]);
            function drawChart() {
                var data = google.visualization.arrayToDataTable( [
                    ["data", "test", "average"], ...arr
                ]);

                var options = {
                    title: 'на всякий случай',
                    legend: { position: 'bottom' },
                };

                var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

                chart.draw(data, options);
            }
        </script>
    </head>
    <body>
        <div id="curve_chart" style="width: 900px; height: 500px"></div>
    </body>
</html>

Signal

21.08.2022 15:32

ты правильно скинул, но там система начальных координат одна, у меня же получается разная, на 180 градусов, как мне посоветовали просто отзеркаль от линии оси, да это проканает, но я хочу сразу сетку координат сделать, чтоб просто математически ее пересчитать
т.е. математически, чтоб как были данные, так они и на графике без отзеркаливания

рони	21.08.2022 15:40

Signal,
кто его знает, что тебе надо)))

Signal

21.08.2022 15:48

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

рони	21.08.2022 16:49

Signal,
:-?

может кода чуть-чуть?)))
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Signal

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
даже не знаю как оформить в коде сиё действие

рони	21.08.2022 17:48

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

рони	21.08.2022 18:17

canvas chart

Цитата:

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

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/

рони	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

21.08.2022 19:09

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

рони	21.08.2022 19:19

Signal,
:)

Часовой пояс GMT +3, время: 15:38.