<!DOCTYPE html>
<html>
<head>
<title>파이 차트 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myPieChart" width="400" height="400"></canvas>
<script>
$(document).ready(function () {
// 데이터셋을 정의합니다. 여기서는 간단한 데이터를 사용하겠습니다.
var data = {
labels: ['항목 1', '항목 2', '항목 3'],
datasets: [{
data: [30, 40, 30],
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)',
'rgba(255, 206, 86, 0.5)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
};
// 파이 차트를 생성합니다.
var ctx = document.getElementById('myPieChart').getContext('2d');
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top'
}
}
}
});
});
</script>
</body>
</html>
1. **HTML Structure**: The document contains a single `canvas` element (`id="myPieChart"`) where the pie chart will be drawn. The fixed width and height attributes ensure that the chart has a specific size.
2. **Library Inclusions**:
- **jQuery**: Included via a CDN link, although its primary use in this example is to ensure the DOM is fully loaded before executing the chart rendering script.
- **Chart.js**: Also included through a CDN, this library provides the functionality to draw the pie chart based on the provided data and configuration.
3. **Chart Setup and Rendering**:
- **Document Ready**: Utilizes jQuery's `$(document).ready()` to ensure the script runs after the full page is loaded.
- **Data Definition**: The data for the pie chart is defined in a `data` object, which includes:
- `labels`: An array of labels for each segment of the pie chart ('항목 1', '항목 2', '항목 3').
- `datasets`: An array containing a single dataset object where the pie chart's segment values (30, 40, 30) and styles (background and border colors) are defined.
- **Chart Creation**: Instantiates a new Chart object by passing the context of the canvas element (`ctx`) and an object specifying the chart's type ('pie'), data, and options.
- **Options**: Configures the chart to be responsive and adjusts the aspect ratio settings. Also customizes the legend's position to appear at the top of the chart.
### Key Points:
- The example effectively demonstrates how to use Chart.js to create a simple, yet visually appealing, pie chart. It covers the essential steps from including necessary libraries to configuring and rendering the chart.
- Chart.js's versatility is hinted at through the customization options provided, such as color settings, responsiveness, and legend configuration. These options showcase the potential for further customization.
- The use of jQuery for DOM manipulation is minimal here, primarily ensuring that the chart setup code executes once the page is fully loaded.
### Possible Improvements:
- Expanding the example to include interaction with the chart, such as tooltips on hover, could provide a more engaging user experience.
- Demonstrating how to dynamically update the chart's data in response to user actions (e.g., form inputs) would illustrate a more interactive and real-time use case.
- Including a brief discussion or comments on alternative chart types and configurations available in Chart.js could serve as an educational bridge for users looking to explore beyond pie charts.
'개념 > JQuery' 카테고리의 다른 글
| JQuery) Interactive To-Do List with jQuery (0) | 2025.03.11 |
|---|---|
| JQuery) Bubble Chart Example with Chart.js (0) | 2025.03.10 |
| JQuery) jQuery Event Handling Example (0) | 2025.03.08 |
| JQuery) jQuery Mobile Dialog, Popup, and Grid Layout Example (0) | 2025.03.05 |
| JQuery) jQuery Mobile Advanced Grids and Collapsible Panel Example (0) | 2025.03.04 |