<!DOCTYPE html>
<html>
<head>
<title>jQuery Line Chart Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function(){
var ctx = $("#myChart").get(0).getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Monthly Sales Data',
data: [10, 20, 30, 40, 50, 60, 70],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
</script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
</html>
1. **Library Inclusions**:
- The document includes the jQuery library and Chart.js via CDN (Content Delivery Network) links. jQuery is used to simplify DOM manipulations and event handling, while Chart.js is the core library for creating the line chart.
2. **Canvas Element**:
- A `<canvas>` element with `id="myChart"` is defined in the body. This element serves as the container where the line chart will be drawn. The width and height attributes set the size of the chart.
3. **Chart Initialization Script**:
- A `<script>` block contains the code to initialize the line chart. This code is wrapped inside jQuery's `$(document).ready()` function to ensure it executes after the DOM is fully loaded.
- The `$("#myChart").get(0).getContext('2d');` line uses jQuery to select the canvas element by its ID and retrieve its 2D rendering context, which is necessary for drawing the chart with Chart.js.
- `new Chart(ctx, {...})` creates a new line chart on the specified canvas context (`ctx`). The configuration object passed as the second argument defines the chart type (`'line'`), data, and options.
- The `data` object specifies the x-axis labels (months from January to July) and datasets. Here, a single dataset representing "Monthly Sales Data" is defined with an array of values (sales numbers from 10 to 70), along with styles for the line (background and border colors).
- The `options` object includes configuration for the chart's scales. Specifically, `y: {beginAtZero: true}` ensures that the y-axis starts from zero, providing a clear baseline for the data.
### Summary:
This example showcases a simple yet effective use of Chart.js to visualize data in the form of a line chart. By plotting "Monthly Sales Data" across seven months, it demonstrates how dynamic and visually appealing charts can be easily created and integrated into web pages to enhance data presentation and user interaction.
'개념 > 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) Bar Chart (0) | 2025.02.11 |
| Jquery-Mobile) Creating a Mobile-Friendly Web Page with jQuery Mobile (0) | 2025.02.07 |