Antrium A35D

Bir sonraki için en iyisini yap...

Jquery Area chart Kullanımı

Whatsapp ile paylaş

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>İşlem Adeti ve Tutar Area Grafiği</title>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- Chart.js (v2.9.4) -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script>
  <style>
    #chart-container {
      width: 700px;
      height: 500px;
      margin: auto;
    }
  </style>
</head>
<body>
  <div id="chart-container">
    <canvas id="myChart"></canvas>
  </div>
  
  <script>
    $(document).ready(function(){
      // Tüm verileri tek bir string içinde veriyoruz.
      // Format: "tarih|işlem adeti|tutar|link;tarih|işlem adeti|tutar|link;..."
      var dataString = "07.02.2025|3|3500|link1;08.02.2025|5|8500|link2;09.02.2025|2|2500|link3";
      
      // ";" karakteri ile kayıtları ayırıyoruz.
      var records = dataString.split(";");
      
      // Verileri tutacak diziler:
      var labels = [];            // Tarihler
      var transactionCounts = []; // İşlem Adeti
      var amounts = [];           // Tutar
      var links = [];             // Yönlendirme linkleri
      
      // Her kaydı "|" ile bölüp ilgili dizilere ekliyoruz.
      $.each(records, function(index, record){
        var fields = record.split("|");
        labels.push(fields[0]);                      // Tarih
        transactionCounts.push(parseInt(fields[1])); // İşlem adeti
        amounts.push(parseFloat(fields[2]));         // Tutar
        links.push(fields[3]);                       // Link
      });
      
      // Canvas'ı seçip 2D context'ini alıyoruz.
      var ctx = document.getElementById('myChart').getContext('2d');
      
      // Chart.js veri setlerini oluşturuyoruz: iki ayrı dataset (area grafik) 
      var chartData = {
        labels: labels,
        datasets: [
          {
            label: "İşlem Adeti",
            data: transactionCounts,
            fill: true,  // Çizgi altı doldurulsun
            backgroundColor: "rgba(153, 102, 255, 0.4)", // Mor tonlarında
            borderColor: "rgba(153, 102, 255, 1)",
            borderWidth: 2,
            pointBackgroundColor: "rgba(153, 102, 255, 1)"
          },
          {
            label: "Tutar (TL)",
            data: amounts,
            fill: true,
            backgroundColor: "rgba(255, 159, 64, 0.4)",  // Turuncu tonlarında
            borderColor: "rgba(255, 159, 64, 1)",
            borderWidth: 2,
            pointBackgroundColor: "rgba(255, 159, 64, 1)"
          }
        ]
      };
      
      // Grafik seçenekleri ve tıklama olayını ayarlıyoruz.
      var options = {
        responsive: true,
        maintainAspectRatio: false,
        onClick: function(evt, elements) {
          if (elements.length > 0) {
            // Chart.js v2'de _index ile tıklanan veri noktasının index bilgisini alıyoruz.
            var index = elements[0]._index;
            // İlgili index'teki link üzerinden yönlendirme yapıyoruz.
            window.location.href = links[index];
          }
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      };
      
      // Area (doldurulmuş line) grafiğini oluşturuyoruz.
      var myChart = new Chart(ctx, {
        type: 'line',
        data: chartData,
        options: options
      });
    });
  </script>
</body>
</html>
 

21 Okunma | 9.02.2025 00:40
Jquery Area chart

YORUMLAR

Yorum Yaz
Hüseyin ÖZKAN Yazılım Uzmanı

C#,MVC,MSSQL,Windows Forms

Kategoriler
Son Eklenenler
En Çok Okunanlar