web

코드

늉_늉 2024. 10. 16. 11:19

RGBA 색상 코드

  1. 블로썸 (Blossom):
    • rgba(255, 82, 82, 1) (주홍색)
  2. 버블스 (Bubbles):
    • rgba(135, 206, 250, 1) (하늘색)
  3. 버터컵 (Buttercup):
    • rgba(51, 204, 51, 1) (녹색)
  4. 검은색 (Black):
    • rgba(0, 0, 0, 1) (검정)
  5. 하늘색 (Light Blue):
    • rgba(173, 216, 230, 1) (연한 파란색)
  6. 핑크색 (Pink):
    • rgba(255, 192, 203, 1) (연핑크)
  7. 노란색 (Yellow):
    • rgba(255, 255, 0, 1) (노란색)
  8. 파란색 (Blue):
    • rgba(0, 0, 255, 1) (파란색)
  9. 보라색 (Purple):
    • rgba(128, 0, 128, 1) (보라색)
  10. 주황색 (Orange):
    • rgba(255, 165, 0, 1) (주황색)
  11. 연두색 (Light Green):
    • rgba(144, 238, 144, 1) (연두색)
{"ttt":"{\"January\":40,\"February\":25,\"March\":70,\"April\":15,\"May\":88,\"June\":32,\"July\":54,\"August\":96,\"September\":12,\"October\":23,\"November\":74,\"December\":50}"}

plugins: [{ afterDatasetsDraw: function(chart) { const ctx = chart.ctx; chart.data.datasets.forEach((dataset, i) => { const meta = chart.getDatasetMeta(i); meta.data.forEach((bar, index) => { const data = dataset.data[index]; // 위치와 크기 ctx.fillStyle = 'black'; // 텍스트 색상 const x = bar.x; // x 위치 const y = bar.y - 5; // y 위치 (막대 위쪽) ctx.fillText(data, x, y); // 데이터 값을 그리기 }); }); } }] });

  plugins: [{
                afterDatasetsDraw: function(chart) {
                    const ctx = chart.ctx;
                    chart.data.datasets.forEach((dataset, i) => {
                        const meta = chart.getDatasetMeta(i);
                        meta.data.forEach((bar, index) => {
                            const data = dataset.data[index];
                            // 위치와 크기
                            ctx.fillStyle = 'black'; // 텍스트 색상
                            const x = bar.x; // x 위치
                            const y = bar.y - 5; // y 위치 (막대 위쪽)
                            ctx.fillText(data, x, y); // 데이터 값을 그리기
                        });
                    });
                }
            }]
        });

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Pie Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2"></script>
</head>
<body>
    <canvas id="myPieChart" width="400" height="400"></canvas>

    <script>
        const data = {
            labels: ['Red', 'Blue', 'Yellow', 'Green'],
            datasets: [{
                label: 'Fruit Data',
                data: [12, 19, 3, 5],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)'
                ],
                borderWidth: 1,
            }]
        };

        const ctx = document.getElementById('myPieChart').getContext('2d');
        const myPieChart = new Chart(ctx, {
            type: 'pie',
            data: data,
            options: {
                plugins: {
                    tooltip: {
                        enabled: false // 기본 툴팁 비활성화
                    },
                    legend: {
                        display: false // 범례 비활성화
                    }
                }
            },
            plugins: [{
                afterDatasetsDraw: function(chart) {
                    const ctx = chart.ctx;
                    chart.data.datasets.forEach((dataset, i) => {
                        const meta = chart.getDatasetMeta(i);
                        meta.data.forEach((slice, index) => {
                            const dataValue = dataset.data[index];
                            const label = chart.data.labels[index];
                            const centerX = slice.x; // 원의 중심 X 좌표
                            const centerY = slice.y; // 원의 중심 Y 좌표
                            const radius = slice.outerRadius; // 원의 반지름
                            const angle = slice.startAngle + (slice.endAngle - slice.startAngle) / 2; // 조각의 중앙 각도

                            // 라벨 위치 계산
                            const x = centerX + Math.cos(angle) * (radius / 2);
                            const y = centerY + Math.sin(angle) * (radius / 2);

                            console.log(`Label: ${label}, Value: ${dataValue}, Position: (${x}, ${y})`); // 콘솔 로그
                            
                            ctx.fillStyle = 'black'; // 텍스트 색상
                            ctx.fillText(`${label}: ${dataValue}`, x, y); // 데이터 값과 라벨 그리기
                        });
                    });
                }
            }]
        });
    </script>
</body>
</html>

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doughnut Chart with Bread</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4"></script>
</head>
<body>
    <canvas id="myDoughnutChart"></canvas>

    <script>
        // 데이터 입력
        const apple = {
            "sn": "aaaa",
            "banana": "aaaaa",
            "peach": "{\"0\":9.1212,\"1\":0.0,\"2\":3.456,\"3\":7.890}",
            "bread": "5.0"
        };

        // bread 값과 나머지 계산
        const breadValue = parseFloat(apple.bread); // "5.0"을 숫자로 변환
        const otherValue = 100 - breadValue; // 나머지 95% 계산

        // Chart.js로 Doughnut Chart 생성
        const ctx = document.getElementById('myDoughnutChart').getContext('2d');
        const myDoughnutChart = new Chart(ctx, {
            type: 'doughnut', // 도넛 차트로 변경
            data: {
                labels: ['Bread', 'Others'], // Bread와 나머지 항목
                datasets: [{
                    data: [breadValue, otherValue], // Bread와 나머지 비율
                    backgroundColor: [
                        'rgba(255, 0, 0, 1)',    // 선명한 빨간색
                        'rgba(211, 211, 211, 1)' // 연한 회색
                    ],
                    borderColor: [
                        'rgba(255, 0, 0, 1)',    // 선명한 빨간색 테두리
                        'rgba(169, 169, 169, 1)' // 회색 테두리
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                return tooltipItem.label + ': ' + tooltipItem.raw + '%'; // 퍼센트 표시
                            }
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Donut Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="400"></canvas>

    <script>
        const apple = {
            "sn": "aaaa",
            "banana": "aaaaa",
            "peach": "{\"0\":9.1212,\"1\":0.0,\"2\":3.456,\"3\":7.890}",
            "bread": "5.0"
        };

        // 데이터 준비
        const breadValue = parseFloat(apple.bread);
        const total = 100; // 전체 수치
        const otherValue = total - breadValue; // 나머지 값

        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Bread', 'Other'],
                datasets: [{
                    label: 'Dataset',
                    data: [breadValue, otherValue],
                    backgroundColor: [
                        'rgba(255, 0, 0, 1)', // Bread 색상 (예: 빨간색)
                        'rgba(211, 211, 211, 1)' // Other 색상 (연한 회색)
                    ],
                }]
            },
            options: {
                plugins: {
                    tooltip: {
                        enabled: false // 툴팁 비활성화
                    },
                    legend: {
                        display: false // 범례 비활성화
                    },
                    // 가운데에 Bread 값과 라벨을 표시하는 플러그인
                    beforeDraw: (chart) => {
                        const width = chart.width,
                              height = chart.height,
                              ctx = chart.ctx;

                        ctx.restore();
                        const fontSize = (height / 114).toFixed(2); // 크기 계산
                        ctx.font = fontSize + "em sans-serif";
                        ctx.textBaseline = "middle";
                        const text = `Bread\n${breadValue}`;
                        const textX = Math.round((width - ctx.measureText(text).width) / 2);
                        const textY = height / 2;

                        ctx.fillStyle = "#000"; // 글씨 색상
                        ctx.fillText(text, textX, textY);
                        ctx.save();
                    }
                },
                responsive: true,
                maintainAspectRatio: false
            }
        });
    </script>
</body>
</html>

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doughnut Chart with Bread</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4"></script>
</head>
<body>
    <canvas id="myDoughnutChart"></canvas>

    <script>
        // 데이터 입력
        const apple = {
            "sn": "aaaa",
            "banana": "aaaaa",
            "peach": "{\"0\":9.1212,\"1\":0.0,\"2\":3.456,\"3\":7.890}",
            "bread": "5.0"
        };

        // bread 값과 나머지 계산
        const breadValue = parseFloat(apple.bread); // "5.0"을 숫자로 변환
        const otherValue = 100 - breadValue; // 나머지 95% 계산

        // Chart.js로 Doughnut Chart 생성
        const ctx = document.getElementById('myDoughnutChart').getContext('2d');
        const myDoughnutChart = new Chart(ctx, {
            type: 'doughnut', // 도넛 차트로 변경
            data: {
                labels: ['Bread', 'Others'], // Bread와 나머지 항목
                datasets: [{
                    data: [breadValue, otherValue], // Bread와 나머지 비율
                    backgroundColor: [
                        'rgba(255, 0, 0, 1)',    // 선명한 빨간색
                        'rgba(211, 211, 211, 1)' // 연한 회색
                    ],
                    borderColor: [
                        'rgba(255, 0, 0, 1)',    // 선명한 빨간색 테두리
                        'rgba(169, 169, 169, 1)' // 회색 테두리
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                return tooltipItem.label + ': ' + tooltipItem.raw + '%'; // 퍼센트 표시
                            }
                        }
                    }
                },
                // Custom plugin to draw text in the center of the doughnut
                plugins: [{
                    id: 'centerLabel',
                    beforeDraw: function(chart) {
                        const width = chart.width,
                              height = chart.height,
                              ctx = chart.ctx;

                        ctx.restore();
                        const fontSize = (height / 114).toFixed(2); // 동적 폰트 크기
                        ctx.font = fontSize + "em sans-serif"; // 폰트 설정
                        ctx.textBaseline = "middle"; // 수직 중앙 정렬

                        const text = `Bread\n${breadValue}`; // 가운데에 표시할 텍스트
                        const textX = Math.round((width - ctx.measureText(text).width) / 2); // 텍스트 X 좌표
                        const textY = height / 2; // 텍스트 Y 좌표

                        ctx.fillStyle = 'black'; // 텍스트 색상
                        ctx.fillText(text, textX, textY); // 텍스트 그리기
                        ctx.save();
                    }
                }]
            }
        });
    </script>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 모달 버튼 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open Modal
</button>

<!-- 모달 -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Modal body text goes here.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // 모달 외부 클릭 시 모달 닫기
    $(document).on('click', function (event) {
        const target = $(event.target);
        if (!target.closest('.modal-dialog').length && !target.closest('.btn-primary').length) {
            $('#myModal').modal('hide');
        }
    });
});
</script>

</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>K-Upload Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/k-upload/1.0.0/k-upload.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .upload-container {
            border: 1px solid #ccc;
            padding: 20px;
            width: 400px;
            margin: 0 auto;
            text-align: center;
        }
        #uploadStatus {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="upload-container">
        <h1>K-Upload File Upload</h1>
        <input type="file" id="fileInput" multiple>
        <button type="button" id="uploadButton">Upload</button>
        <div id="uploadStatus"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/k-upload/1.0.0/k-upload.min.js"></script>
    <script>
        $(document).ready(function () {
            // K-Upload 초기화
            $('#fileInput').kUpload({
                url: '/upload',  // 서버의 파일 업로드 URL
                maxFileSize: 5 * 1024 * 1024,  // 최대 파일 크기 (5MB)
                onUploadSuccess: function (response) {
                    $('#uploadStatus').append('<p>Upload Success: ' + response.fileName + '</p>');
                },
                onUploadError: function (error) {
                    $('#uploadStatus').append('<p>Error: ' + error + '</p>');
                }
            });

            // 업로드 버튼 클릭 시 파일 업로드
            $('#uploadButton').on('click', function () {
                $('#fileInput').kUpload('upload');  // K-Upload의 업로드 메서드 호출
            });
        });
    </script>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>K-Upload Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/k-upload/1.0.0/k-upload.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .upload-container {
            border: 1px solid #ccc;
            padding: 20px;
            width: 400px;
            margin: 0 auto;
            text-align: center;
        }
        #uploadStatus {
            margin-top: 20px;
            font-weight: bold;
        }
        .progress {
            width: 100%;
            height: 20px;
            background-color: #f3f3f3;
            margin-top: 10px;
            border-radius: 5px;
            display: none; /* Initially hidden */
        }
        .progress-bar {
            height: 100%;
            background-color: #4caf50;
            width: 0%; /* Start at 0% width */
            text-align: center;
            color: white;
            line-height: 20px; /* Center text vertically */
        }
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <div class="upload-container">
        <h1>K-Upload File Upload</h1>
        <input type="file" id="fileInput" multiple>
        <button type="button" id="uploadButton">Upload</button>
        <div class="progress" id="progressBar">
            <div class="progress-bar" id="progressBarFill">0%</div>
        </div>
        <div id="uploadStatus"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/k-upload/1.0.0/k-upload.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#fileInput').kUpload({
                url: '/upload', // 서버의 파일 업로드 URL
                maxFileSize: 5 * 1024 * 1024, // 최대 파일 크기 (5MB)
                onUploadStart: function () {
                    $('#uploadStatus').empty(); // 이전 상태 메시지 지우기
                    $('#progressBar').show(); // 프로그래스 바 표시
                },
                onUploadProgress: function (file, progress) {
                    $('#progressBarFill').css('width', progress + '%').text(progress + '%');
                },
                onUploadSuccess: function (response) {
                    $('#uploadStatus').append('<p>Upload Success: ' + response.fileName + '</p>');
                    $('#progressBar').hide(); // 업로드 완료 후 프로그래스 바 숨기기
                },
                onUploadError: function (file, error) {
                    $('#uploadStatus').append('<p class="error">Upload Failed: ' + file.name + ' - ' + error + '</p>');
                    $('#progressBar').hide(); // 업로드 실패 후 프로그래스 바 숨기기
                }
            });

            $('#uploadButton').on('click', function () {
                $('#fileInput').kUpload('upload'); // K-Upload의 업로드 메서드 호출
            });
        });
    </script>
</body>
</html>

 

 

 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thymeleaf Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1 class="mt-5">Thymeleaf Form Example</h1>
        <form th:action="@{/submit}" method="post" class="mt-3">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" class="form-control" th:field="*{name}" required>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>

        <div th:if="${message}" class="alert alert-success mt-3">
            <span th:text="${message}">Submission successful!</span>
        </div>
    </div>
</body>
</html>
저작자표시 (새창열림)

'web' 카테고리의 다른 글

기타  (0) 2024.10.30
소스트리 깃랩 클론 꺼짐현상  (0) 2021.08.13
spring -db 에서 데이터 불러와서 엑셀 다운로드  (0) 2020.12.04
spring - 엑셀파일 업로드db에 저장 poi 3.12  (0) 2020.11.22
Part3 기본적인 웹게시물 관리 - 코드로배우는 스프링 웹프로젝트  (0) 2020.10.29

'web'의 다른글

  • 현재글코드

관련글

티스토리툴바