<!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="myBubbleChart" width="400" height="400"></canvas>
<script>
$(document).ready(function () {
// 데이터셋을 정의합니다. 여기서는 간단한 데이터를 사용하겠습니다.
var data = {
datasets: [{
label: '데이터',
data: [
{ x: 10, y: 20, r: 10 },
{ x: 30, y: 40, r: 15 },
{ x: 50, y: 60, r: 20 },
{ x: 70, y: 80, r: 25 },
{ x: 90, y: 100, r: 30 }
],
backgroundColor: 'rgba(75, 192, 192, 0.5)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
};
// 버블 차트를 생성합니다.
var ctx = document.getElementById('myBubbleChart').getContext('2d');
var myBubbleChart = new Chart(ctx, {
type: 'bubble',
data: data,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
min: 0,
max: 100
},
y: {
min: 0,
max: 120
}
}
}
});
});
</script>
</body>
</html>
1. **HTML Structure**: The structure is minimal, featuring only a `canvas` element (`id="myBubbleChart"`) designated as the drawing area for the bubble chart. The canvas dimensions are explicitly set, though Chart.js will handle scaling responsively based on these initial values.
2. **Library Inclusions**:
- **jQuery**: Included through a CDN link to facilitate DOM manipulation, primarily used here to ensure the chart code executes after the document is fully loaded.
- **Chart.js**: Also included via CDN, it's the core library that enables the creation and manipulation of the chart based on specified data and options.
3. **Chart Setup and Configuration**:
- **Initialization**: Utilizes jQuery's `$(document).ready()` function to run the script once the HTML document is fully loaded.
- **Data Structure**: The `data` object is structured specifically for a bubble chart, where each data point consists of an object with `x`, `y`, and `r` properties. These properties represent the x-coordinate, y-coordinate, and radius of each bubble, respectively.
- **Dataset Configuration**: A single dataset is defined with a label and styling properties (background color, border color, and border width). The dataset contains an array of data points for the bubbles in the chart.
- **Chart Instantiation**: A new Chart.js instance is created, specifying 'bubble' as the chart type, the data object, and additional options for customization.
4. **Options and Scaling**:
- **Responsiveness**: Configured to be responsive, adapting its size to the container while maintaining the aspect ratio as specified by `maintainAspectRatio: false`.
- **Scales Configuration**: The x and y scales are explicitly set with minimum and maximum values to control the chart's grid dimensions. This customization ensures that all bubbles are properly placed within the chart's bounds.
### Key Points:
- The example demonstrates the use of Chart.js for creating a bubble chart, which can represent three dimensions of data: the x and y positions, plus the size of each bubble.
- It highlights the flexibility of Chart.js in terms of data visualization capabilities and customization options, such as scaling and styling.
- The document's simplicity focuses on the essentials of bubble chart creation, making it a useful starting point for users new to Chart.js or those exploring different chart types.
### Possible Improvements:
- Adding tooltips or other interactive elements could enhance the chart's informativeness and user engagement by displaying additional details about each bubble on hover.
- Expanding the dataset or incorporating dynamic data loading (e.g., from an API) would make the example more practical for real-world applications, where data is often not static.
- Demonstrating more advanced customization options, like custom scale tick marks or animation effects, could further showcase Chart.js's capabilities and inspire users to create more sophisticated charts.
'개념 > JQuery' 카테고리의 다른 글
| JQuery) Multi-Page Mobile Web Application with jQuery Mobile (0) | 2025.03.12 |
|---|---|
| JQuery) Interactive To-Do List with jQuery (0) | 2025.03.11 |
| JQuery) Pie Chart Example with Chart.js (0) | 2025.03.09 |
| JQuery) jQuery Event Handling Example (0) | 2025.03.08 |
| JQuery) jQuery Mobile Dialog, Popup, and Grid Layout Example (0) | 2025.03.05 |