{"id":301,"date":"2024-12-26T19:40:03","date_gmt":"2024-12-26T19:40:03","guid":{"rendered":"https:\/\/www.qrngua.website\/?page_id=301"},"modified":"2024-12-26T19:42:17","modified_gmt":"2024-12-26T19:42:17","slug":"random-number-chart","status":"publish","type":"page","link":"https:\/\/www.qrngua.website\/?page_id=301","title":{"rendered":"Random number chart"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u0413\u0440\u0430\u0444\u0438\u043a \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b<\/title>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            margin: 20px;\n            text-align: center;\n        }\n        canvas {\n            max-width: 90%;\n            width: 1000px;\n            height: 500px;\n            margin: 0 auto;\n        }\n        .control-panel {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: 10px;\n            margin-top: 20px;\n        }\n        .control-row {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n        label {\n            font-size: 16px;\n        }\n        input, select, button {\n            padding: 10px 20px;\n            font-size: 16px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <h1>\u0413\u0440\u0430\u0444\u0438\u043a \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b<\/h1>\n    <canvas id=\"randomChart\"><\/canvas>\n    <div class=\"control-panel\">\n        <!-- \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 -->\n        <div class=\"control-row\">\n            <label for=\"minValue\">\u041c\u0438\u043d\u0438\u043c\u0443\u043c:<\/label>\n            <input type=\"number\" id=\"minValue\" value=\"0\">\n            <label for=\"maxValue\">\u041c\u0430\u043a\u0441\u0438\u043c\u0443\u043c:<\/label>\n            <input type=\"number\" id=\"maxValue\" value=\"100\">\n            <label for=\"numPoints\">\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u043e\u0447\u0435\u043a:<\/label>\n            <input type=\"number\" id=\"numPoints\" value=\"10\">\n        <\/div>\n        <!-- \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u043c -->\n        <div class=\"control-row\">\n            <button id=\"updateButton\">\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a<\/button>\n        <\/div>\n        <!-- \u0421\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 -->\n        <div class=\"control-row\">\n            <label for=\"saveFormat\">\u0424\u043e\u0440\u043c\u0430\u0442 \u0444\u0430\u0439\u043b\u0430:<\/label>\n            <select id=\"saveFormat\">\n                <option value=\"text\">\u0422\u0435\u043a\u0441\u0442 \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439<\/option>\n                <option value=\"raw\">\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0440\u044f\u0434 \u0447\u0438\u0441\u0435\u043b<\/option>\n                <option value=\"binary\">\u0411\u0438\u043d\u0430\u0440\u043d\u044b\u0439<\/option>\n            <\/select>\n            <button id=\"downloadButton\">\u0421\u043a\u0430\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435<\/button>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ \u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445\n        function generateRandomData(min, max, count) {\n            const data = [];\n            for (let i = 0; i < count; i++) {\n                data.push(Math.floor(Math.random() * (max - min + 1)) + min);\n            }\n            return data;\n        }\n\n        \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0441 Chart.js\n        const ctx = document.getElementById('randomChart').getContext('2d');\n        const chart = new Chart(ctx, {\n            type: 'line',\n            data: {\n                labels: Array.from({ length: 10 }, (_, i) => `\u0422\u043e\u0447\u043a\u0430 ${i + 1}`),\n                datasets: [{\n                    label: '\u0421\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0435 \u0447\u0438\u0441\u043b\u0430',\n                    data: generateRandomData(0, 100, 10),\n                    backgroundColor: 'rgba(75, 192, 192, 0.2)',\n                    borderColor: 'rgba(75, 192, 192, 1)',\n                    borderWidth: 2\n                }]\n            },\n            options: {\n                responsive: true,\n                plugins: {\n                    legend: {\n                        display: true,\n                        position: 'top',\n                    }\n                },\n                scales: {\n                    x: {\n                        title: {\n                            display: true,\n                            text: '\u0422\u043e\u0447\u043a\u0438'\n                        }\n                    },\n                    y: {\n                        title: {\n                            display: true,\n                            text: '\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f'\n                        },\n                        beginAtZero: true\n                    }\n                }\n            }\n        });\n\n        \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0430\n        document.getElementById('updateButton').addEventListener('click', () => {\n            const minValue = parseInt(document.getElementById('minValue').value, 10);\n            const maxValue = parseInt(document.getElementById('maxValue').value, 10);\n            const numPoints = parseInt(document.getElementById('numPoints').value, 10);\n\n            if (minValue >= maxValue || numPoints <= 0) {\n                alert('\u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u0432\u043e\u0434\u0430 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u043e\u0447\u0435\u043a.');\n                return;\n            }\n\n            const newData = generateRandomData(minValue, maxValue, numPoints);\n            chart.data.labels = Array.from({ length: numPoints }, (_, i) => `\u0422\u043e\u0447\u043a\u0430 ${i + 1}`);\n            chart.data.datasets[0].data = newData;\n            chart.update();\n        });\n\n        \/\/ \u0421\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445\n        document.getElementById('downloadButton').addEventListener('click', () => {\n            const data = chart.data.datasets[0].data;\n            const format = document.getElementById('saveFormat').value;\n\n            if (format === 'text') {\n                \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439\n                const labels = chart.data.labels;\n                const content = labels.map((label, index) => `${label}: ${data[index]}`).join('\\n');\n                const blob = new Blob([content], { type: 'text\/plain' });\n\n                const link = document.createElement('a');\n                link.href = URL.createObjectURL(blob);\n                link.download = 'random_numbers.txt';\n                link.click();\n            } else if (format === 'raw') {\n                \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0440\u044f\u0434 \u0447\u0438\u0441\u0435\u043b\n                const content = data.join(' ');\n                const blob = new Blob([content], { type: 'text\/plain' });\n\n                const link = document.createElement('a');\n                link.href = URL.createObjectURL(blob);\n                link.download = 'random_numbers_raw.txt';\n                link.click();\n            } else if (format === 'binary') {\n                \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0431\u0438\u043d\u0430\u0440\u043d\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435\n                const buffer = new ArrayBuffer(data.length * 4); \/\/ 4 \u0431\u0430\u0439\u0442\u0430 \u043d\u0430 \u0447\u0438\u0441\u043b\u043e (32-\u0431\u0438\u0442\u043d\u043e\u0435 \u0446\u0435\u043b\u043e\u0435)\n                const view = new DataView(buffer);\n\n                data.forEach((value, index) => {\n                    view.setInt32(index * 4, value, true); \/\/ true \u0434\u043b\u044f little-endian\n                });\n\n                const blob = new Blob([buffer], { type: 'application\/octet-stream' });\n\n                const link = document.createElement('a');\n                link.href = URL.createObjectURL(blob);\n                link.download = 'random_numbers.bin';\n                link.click();\n            }\n        });\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0413\u0440\u0430\u0444\u0438\u043a \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b \u0413\u0440\u0430\u0444\u0438\u043a \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b \u041c\u0438\u043d\u0438\u043c\u0443\u043c: \u041c\u0430\u043a\u0441\u0438\u043c\u0443\u043c: \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u043e\u0447\u0435\u043a: \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a \u0424\u043e\u0440\u043c\u0430\u0442 \u0444\u0430\u0439\u043b\u0430: \u0422\u0435\u043a\u0441\u0442 \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0440\u044f\u0434 \u0447\u0438\u0441\u0435\u043b\u0411\u0438\u043d\u0430\u0440\u043d\u044b\u0439 \u0421\u043a\u0430\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-301","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/pages\/301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=301"}],"version-history":[{"count":2,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/pages\/301\/revisions"}],"predecessor-version":[{"id":305,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/pages\/301\/revisions\/305"}],"wp:attachment":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}