2023-02-26 01:30

2023-02-26 01:30:37 +09:00
commit 9a13ccbd17
122 changed files with 32148 additions and 0 deletions
--- a/getting-chartjs/01_first.html
+++ b/getting-chartjs/01_first.html
@@ -0,0 +1,57 @@
+<html>
+
+<head>
+    <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
+</head>
+
+<body>
+    <div style="width: 400px; height: 300px;">
+        <canvas id="chart-01" width="400" height="300"></canvas>
+    </div>
+    <script>
+        var ctx = document.getElementById('chart-01');
+        var myChart = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+                datasets: [{
+                    label: '# of Votes',
+                    data: [12, 19, 3, 5, 2, 3],
+                    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)',
+                        'rgba(153, 102, 255, 0.2)',
+                        'rgba(255, 159, 64, 0.2)'
+                    ],
+                    borderColor: [
+                        'rgba(255, 99, 132, 1)',
+                        'rgba(54, 162, 235, 1)',
+                        'rgba(255, 206, 86, 1)',
+                        'rgba(75, 192, 192, 1)',
+                        'rgba(153, 102, 255, 1)',
+                        'rgba(255, 159, 64, 1)'
+                    ],
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                scales: {
+                    yAxes: [{
+                        ticks: {
+                            beginAtZero: true
+                        }
+                    }]
+                }
+            }
+        });
+        setTimeout(() => {//빨간
+            myChart.type = 'line';
+            myChart.update();
+        }, 2500);
+
+    </script>
+</body>
+
+</html>