Merhabalar;
Bu yazımda Asp.Net Core Projemizde pie, line, bar vb. grafikler nasıl oluşturulur bunu anlatacağım.
Öncelikle Asp.NET Core Web Application projesi oluşturmayı biliyor olmamız gerekiyor, burada bu konuya girmeyeceğiz fakat Asp.Net Core Web Applicatiob ile devam ederek bir tane oluşturuyoruz,
Bu projede Jquery ve chart.js kütüphanelerinden faydalanacağız.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> Öncelikle Model klasörü altına “SimpleReportViewModel” ve
“StackedViewModel” isimlerinde birer class oluşturuyoruz.
SimpleReportViewModel
public class SimpleReportViewModel
{
public string DimensionOne { get; set; }
public int Quantity { get; set; }
} StackedViewModel
public class StackedViewModel
{
public string StackedDimensionOne { get; set; }
public List<SimpleReportViewModel> LstData { get; set; }
}Şimdi Controller oluşturuyoruz,
ChartController
public IActionResult Bar()
{
private Random rnd = new Random();
//list of department
var lstModel = new List<SimpleReportViewModel>();
lstModel.Add( new SimpleReportViewModel
{
DimensionOne = "Technology",
Quantity = rnd.Next( 10 )
} );
lstModel.Add( new SimpleReportViewModel
{
DimensionOne = "Sales",
Quantity = rnd.Next( 10 )
} );
lstModel.Add( new SimpleReportViewModel
{
DimensionOne = "Marketing",
Quantity = rnd.Next( 10 )
} );
lstModel.Add( new SimpleReportViewModel
{
DimensionOne = "Human Resource",
Quantity = rnd.Next( 10 )
} );
lstModel.Add( new SimpleReportViewModel
{
DimensionOne = "Research and Development",
Quantity = rnd.Next( 10 )
} );
lstModel.Add( new SimpleReportViewModel
{
DimensionOne = "Acconting",
Quantity = rnd.Next( 10 )
} );
lstModel.Add( new SimpleReportViewModel
{
DimensionOne = "Support",
Quantity = rnd.Next( 10 )
} );
lstModel.Add( new SimpleReportViewModel
{
DimensionOne = "Logistics",
Quantity = rnd.Next( 10 )
} );
return View( lstModel );
} View
@model List<SimpleReportViewModel>
@{
var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( x => x.DimensionOne ).ToList() );
var YValues = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( x => x.Quantity ).ToList() );
ViewData["Title"] = "Bar Chart";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Bar</title>
</head>
<body>
<div class="box-body">
<div class="chart-container">
<canvas id="chart" style="width:100%; height:500px"></canvas>
</div>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
var chartName = "chart";
var ctx = document.getElementById(chartName).getContext('2d');
var data = {
labels: @Html.Raw(XLabels),
datasets: [{
label: "Departments Chart",
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)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
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)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderWidth: 1,
data: @Html.Raw(YValues)
}]
};
var options = {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'bar'
});
});
</script> Sonuç olarak bu şekilde bir bar chart oluşturmuş oluyoruz.
Github adresinde ki projeyi clonlayarak diğer türlerdeki grafiklerin örneklerine ulaşabilirsiniz.
js ile grafik oluşturmak daha kolay olacaktır.
Ekran görüntüsü paylaşımı yapsaydınız keşke. Bu kodları yazmaya değer mi görebilirdik.