.NET 8 Framework
C# (C-Sharp)
Charts.js with ASP.NET
ตัวอย่างการใช้งาน Charts.js โดยใช้ .NET 8 Framework, C# (C-Sharp)
Ake Suwaphan
12 February 2024
Charts.js with ASP.NET
Charts.js Charts.js เป็น JavaScript library ฟรี ใช้งานง่าย ช่วยให้นักพัฒนาเว็บสามารถสร้างกราฟและแผนภูมิแบบโต้ตอบบนเว็บไซต์ได้โดยไม่ต้องพึ่งพา plugin เพิ่มเติม
สรุปการใช้งาน Charts.js
- ใช้งานง่าย Charts.js มี API ที่เข้าใจง่าย ช่วยให้นักพัฒนาเว็บสามารถสร้างกราฟและแผนภูมิได้อย่างรวดเร็ว
- ฟรี Charts.js เป็น open-source library ที่สามารถใช้งานได้ฟรี
- หลากหลาย Charts.js รองรับกราฟและแผนภูมิหลายประเภท เช่น Bar Chart, Line Chart, Pie Chart, Doughnut Chart ฯลฯ
- ปรับแต่งได้ Charts.js สามารถปรับแต่งได้หลากหลาย ช่วยให้นักพัฒนาเว็บสามารถสร้างกราฟและแผนภูมิที่ตรงกับความต้องการ
- โต้ตอบ Charts.js รองรับการโต้ตอบ ช่วยให้ผู้ใช้สามารถดูข้อมูลในกราฟและแผนภูมิได้อย่างละเอียด
ตัวอย่างการใช้งาน Charts.js โดยใช้ .NET 8 Framework, C# (C-Sharp)
เพิ่ม ChartDataModel สำหรับข้อมูลที่จะให้ Chart.js ใน Models ของโปรเจค
public class ChartDataModel
{
public string? year { get; set; }
public int? sales { get; set; }
public int? expenses { get; set; }
public int? profit { get; set; }
}
เพิ่ม Controller ที่จะสร้างข้อมูลและส่งไปยัง View
public IActionResult ChartsJs()
{
var data = new List<ChartDataModel>();
var random = new Random();
int start = DateTime.Now.Year - 4;
int end = DateTime.Now.Year;
for (int i = start; i <= end; i++)
{
int _sales = random.Next(1000000, 99999999);
int _expenses = random.Next(1000000, 99999999);
data.Add(
new ChartDataModel
{
year = i.ToString(),
sales = _sales,
expenses = _expenses,
profit = _sales - _expenses
});
}
return View(data);
}
เพิ่ม @model List<ChartDataModel> และ JavaScript ในส่วนของ View
@model List<ChartDataModel>
// var jsonData รับข้อมูลที่ส่งมาจาก Controller
var jsonData = @Html.Raw(Json.Serialize(Model));
// สร้างข้อมูลสำหรับ Chart.js
var yearData = [];
var salesData = [];
var expensesData = [];
var profitData = [];
// สร้างข้อมูลสำหรับ Chart.js
for (var i = 0; i < jsonData.length; i++) {
yearData.push(jsonData[i].year);
salesData.push(jsonData[i].sales);
expensesData.push(jsonData[i].expenses);
profitData.push(jsonData[i].profit);
}
options and config Vertical Bar Chart
var ctx = document.getElementById('verticalBarChart').getContext('2d');
var verticalBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: yearData,
datasets: [
{
label: 'Sales',
data: salesData
},
{
label: 'Expenses',
data: expensesData
},
{
label: 'Profit',
data: profitData
}
]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Vertical Bar Chart'
}
}
}
});
options and config Horizontal Bar Chart
var ctx = document.getElementById('horizontalBarChart').getContext('2d');
var horizontalBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: yearData,
datasets: [
{
label: 'Sales',
data: salesData
},
{
label: 'Expenses',
data: expensesData
},
{
label: 'Profit',
data: profitData
}
]
},
options: {
indexAxis: 'y',
elements: {
bar: {
borderWidth: 2,
}
},
responsive: true,
plugins: {
legend: {
position: 'right',
},
title: {
display: true,
text: 'Chart.js Horizontal Bar Chart'
}
}
}
});
options and config Line Chart
var ctx = document.getElementById('lineChart').getContext('2d');
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: yearData,
datasets: [
{
label: 'Sales',
data: salesData,
pointStyle: 'circle',
pointRadius: 10,
pointHoverRadius: 15
},
{
label: 'Expenses',
data: expensesData,
pointStyle: 'circle',
pointRadius: 10,
pointHoverRadius: 15
},
{
label: 'Profit',
data: profitData,
pointStyle: 'circle',
pointRadius: 10,
pointHoverRadius: 15
}
]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Line Chart'
}
}
}
});
options and config Area Chart
var ctx = document.getElementById('areaChart').getContext('2d');
var areaChart = new Chart(ctx, {
type: 'line',
data: {
labels: yearData,
datasets: [
{
label: 'Sales',
data: salesData,
fill: true
},
{
label: 'Expenses',
data: expensesData,
fill: true
},
{
label: 'Profit',
data: profitData,
fill: true
}
]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Area Chart',
tooltip: {
mode: 'index'
},
}
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
}
}
});
options and config Combined Line/Bar Chart
var ctx = document.getElementById('comboChart').getContext('2d');
var comboChart = new Chart(ctx, {
type: 'bar',
data: {
labels: yearData,
datasets: [
{
label: 'Sales',
data: salesData,
type: 'line'
},
{
label: 'Expenses',
data: expensesData,
type: 'line'
},
{
label: 'Profit',
data: profitData
}
]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Combined Line/Bar Chart'
}
}
}
});
options and config Doughnut Chart
var ctx = document.getElementById('doughnutChart').getContext('2d');
var doughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: yearData,
datasets: [
{
label: 'Profit',
data: profitData
}
]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
}
}
}
});
options and config Polar Area Chart (polar area centered point labels)
var ctx = document.getElementById('polarAreaChart').getContext('2d');
var polarAreaChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: yearData,
datasets: [
{
label: 'Profit',
data: profitData
}
]
},
options: {
responsive: true,
scales: {
r: {
pointLabels: {
display: true,
centerPointLabels: true,
font: {
size: 18
}
}
}
},
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Polar Area Chart With Centered Point Labels'
}
}
}
});
options and config Bubble Chart
var ctx = document.getElementById('bubbleChart').getContext('2d');
var bubbleChart = new Chart(ctx, {
type: 'bubble',
data: {
labels: yearData,
datasets: [
{
label: 'Sales',
data: salesData
},
{
label: 'Expenses',
data: expensesData
},
{
label: 'Profit',
data: profitData
}
]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bubble Chart'
}
}
}
});
options and config Radar Chart (radar skip points)
var ctx = document.getElementById('radarChart').getContext('2d');
var radarChart = new Chart(ctx, {
type: 'radar',
data: {
labels: yearData,
datasets: [
{
label: 'Sales',
data: salesData
},
{
label: 'Expenses',
data: expensesData
},
{
label: 'Profit',
data: profitData
}
]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Radar Skip Points Chart'
}
}
}
});
options and Stacked Bar Chart
var ctx = document.getElementById('stackedBarChart').getContext('2d');
var stackedBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: yearData,
datasets: [
{
label: 'Sales',
data: salesData
},
{
label: 'Expenses',
data: expensesData
},
{
label: 'Profit',
data: profitData
}
]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
}
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
});