Anasayfa » Asp.NET Core Grafik (Chart) Oluşturma

Makaleyi Paylaş

.Net Core / ASP.NET / Yazılım

Asp.NET Core Grafik (Chart) Oluşturma

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.

Sponsor

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.

Makaleyi Paylaş

IT alanında 16 sene önce donanım ile başlayan tecrübem, network ve sonrasında iş analizi, yazılım geliştirme ve proje yöneticiliği alanlarında devam etmiştir. Endüstriyel yazılımlar, sahadan veri toplama ve analizleri, otomatik etiketleme ve barkod sistemleri, otomatik tartım ve robotik konularında tecrübe sahibiyim. Sanayi 4.0 kapsamında imalat sanayinin dijital dönüşümünde çok fazla projenin hayata geçmesini sağladım. Open Source projelerle uzun süre ilgilendim, analiz ve implementasyonu konularında tecrübe edindim. Bunlar dışında hobi amacıyla başlasam da sonradan ürüne dönüşen, geliştirme kartları ile farklı çalışmalarım olmuştur. Raspberry Pi üzerinde yaptığım donanımsal ve yazılımsal işler ile çok farklı ürünler ortaya çıkartarak tecrübe edindim.

1 Yorum

  1. js ile grafik oluşturmak daha kolay olacaktır.

Cevap bırakın