<!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="myBarChart" width="400" height="400"></canvas>
<script>
$(document).ready(function () {
// 데이터셋을 정의합니다. 여기서는 간단한 데이터를 사용하겠습니다.
var data = {
labels: ['항목 1', '항목 2', '항목 3', '항목 4', '항목 5'],
datasets: [{
label: '데이터',
data: [10, 20, 15, 25, 30],
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)'
],
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)'
],
borderWidth: 1
}]
};
// 바 차트를 생성합니다.
var ctx = document.getElementById('myBarChart').getContext('2d');
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
</script>
</body>
</html>
1. **Dependencies**:
- The document includes CDN links to both jQuery and Chart.js. jQuery is used for its `$(document).ready()` function, ensuring the chart initialization code executes only after the DOM is fully loaded. Chart.js is the core library for rendering the bar chart.
2. **Canvas Element**:
- A `<canvas>` element with `id="myBarChart"` serves as the container where the bar chart will be drawn. The width and height attributes specify the size of the chart.
3. **JavaScript for Chart Initialization**:
- Inside a `<script>` block, jQuery's `$(document).ready()` function wraps the chart initialization code to ensure it runs after the webpage is fully loaded.
- The data object defines the labels for the x-axis (`'항목 1'` to `'항목 5'`) and a dataset containing the values (`10`, `20`, `15`, `25`, `30`) to be represented by the bars of the chart. Each bar's background and border colors are also specified, resulting in a colorful bar chart.
- The `var ctx = document.getElementById('myBarChart').getContext('2d');` line retrieves the rendering context for the canvas, which is necessary for drawing the chart.
- The `new Chart(ctx, {...})` function creates the bar chart on the specified canvas. The `type: 'bar'` property defines the chart as a bar chart, and the data object is passed to configure the chart's appearance and data points.
- The `options` object contains configuration specific to how the chart behaves, with `scales: { y: { beginAtZero: true } }` ensuring that the y-axis begins at zero, providing a clear baseline for all bars.
### Summary:
This example showcases how to use Chart.js with jQuery to create a visually appealing and interactive bar chart embedded within a web page. The chart visualizes simple data across five categories with distinct colors for each bar, offering an intuitive and engaging way to present numerical information.
'개념 > JQuery' 카테고리의 다른 글
| JQuery) jQuery Mobile Page Transitions Example (0) | 2025.02.23 |
|---|---|
| JQuery) HTML Document with Mixed CSS Styling Methods (0) | 2025.02.21 |
| JQuery) Basic jQuery Mobile Page Template (1) | 2025.02.17 |
| JQuery) jQuery Line Chart Example (0) | 2025.02.10 |
| Jquery-Mobile) Creating a Mobile-Friendly Web Page with jQuery Mobile (0) | 2025.02.07 |