HTML5, JS Ve CSS Ile Bar Grafik Çizdirme

Trang chủ » Html Css Grafik » HTML5, JS Ve CSS Ile Bar Grafik Çizdirme

Có thể bạn quan tâm

Oğuzhan TAŞ Web Tasarım & Programlama Blogu
  • Ana Sayfa
  • Hakkımda
  • Kitap Yorumları
  • Sunumlar
  • C# Dersleri
  • Asp.net
  • PHP
  • SQL Server
  • İletişim
HTML5, JS ve CSS ile Bar Grafik Çizdirme <!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <link href="Content/Site.css" rel="stylesheet" type="text/css" />     <title>HTML5 BAR Grafik</title>     <script type="text/javascript">     <!--         // bar grafiğindeki verilerin dizisi oluşturuluyor, ilk değer X ekseni, ikinci değer Y eksenini gösteriyor. //Örneğin il değerde, 2007 yılında 750 kişi ziyaret etmiş olduğunu söylüyoruz.         var arrVisitors = new Array();         arrVisitors[0] = "2007, 750";         arrVisitors[1] = "2008, 425";         arrVisitors[2] = "2009, 960";         arrVisitors[3] = "2010, 700";         arrVisitors[4] = "2011, 800";         arrVisitors[5] = "2012, 975";         arrVisitors[6] = "2013, 375";         arrVisitors[7] = "2014, 775";           var canvas;         var context;         // grafik özellik değişkenleri         var cWidth, cHeight, cMargin, cSpace;         var cMarginSpace, cMarginHeight;         // bar özellik değişken tanımları         var bWidth, bMargin, totalBars, maxDataValue;         var bWidthMargin;         // bar animasyonu için değişken tanımları         var ctr, numctr, speed;         // eksen özellikleri         var totLabelsOnYAxis;             // bar oluşturuluyor         function barChart() {             canvas = document.getElementById('bchart');             if (canvas && canvas.getContext) {                 context = canvas.getContext('2d');             }               chartSettings();             drawAxisLabelMarkers();             drawChartWithAnimation();         }           // grafik Ayarları         function chartSettings() {             // grafik özellikleri             cMargin = 25;             cSpace = 60;             cHeight = canvas.height - 2 * cMargin - cSpace;             cWidth = canvas.width - 2 * cMargin - cSpace;             cMarginSpace = cMargin + cSpace;             cMarginHeight = cMargin + cHeight;             // bar özellikleri             bMargin = 15;             totalBars = arrVisitors.length;             bWidth = (cWidth / totalBars) - bMargin;                 // maksimum değeri bulma             maxDataValue = 0;             for (var i = 0; i < totalBars; i++) {                 var arrVal = arrVisitors[i].split(",");                 var barVal = parseInt(arrVal[1]);                 if (parseInt(barVal) > parseInt(maxDataValue))                     maxDataValue = barVal;             }               totLabelsOnYAxis = 10;             context.font = "10pt Garamond Fontu kullanıldı";               // başlangıç değerlerini ayarlama             ctr = 0;             numctr = 100;             speed = 10;         }           // grafiğin etiketlerini, verilerini ayarlama         function drawAxisLabelMarkers() {             context.lineWidth = "2.0";             // y eksenini çizdirme             drawAxis(cMarginSpace, cMarginHeight, cMarginSpace, cMargin);             // x eksenini çizdirme             drawAxis(cMarginSpace, cMarginHeight, cMarginSpace + cWidth, cMarginHeight);             context.lineWidth = "1.0";             drawMarkers();         }           // X ve Y ekseni çizgilerini lineTo ile çizme         function drawAxis(x, y, X, Y) {             context.beginPath();             context.moveTo(x, y);             context.lineTo(X, Y);             context.closePath();             context.stroke();         }           // X ve Y eksenleri Yazı Hizalama ve Rengini ayarlama         function drawMarkers() {             var numMarkers = parseInt(maxDataValue / totLabelsOnYAxis);             context.textAlign = "right";             context.fillStyle = "#000"; ;               // Y Axis             for (var i = 0; i <= totLabelsOnYAxis; i++) {                 markerVal = i * numMarkers;                 markerValHt = i * numMarkers * cHeight;                 var xMarkers = cMarginSpace - 5;                 var yMarkers = cMarginHeight - (markerValHt / maxDataValue);                 context.fillText(markerVal, xMarkers, yMarkers, cSpace);             }               // X Ekseni             context.textAlign = 'center';             for (var i = 0; i < totalBars; i++) {                 arrval = arrVisitors[i].split(",");                 name = arrval[0];                   markerXPos = cMarginSpace + bMargin + (i * (bWidth + bMargin)) + (bWidth / 2);                 markerYPos = cMarginHeight + 10;                 context.fillText(name, markerXPos, markerYPos, bWidth);             }               context.save();               // Y eksenine başlık ekleme             context.translate(cMargin + 10, cHeight / 2);             context.rotate(Math.PI * -90 / 180);             context.fillText('Ziyaretçi Sayısı(Bin)', 0, 0);               context.restore();               // X eksenine başlık ekleme             context.fillText('Yıllar', cMarginSpace + (cWidth / 2), cMarginHeight + 30);         }           function drawChartWithAnimation() {             // Bar grafiklerin animasyonlu şekilde yükseltilmesi sağlanıyor             for (var i = 0; i < totalBars; i++) {                 var arrVal = arrVisitors[i].split(",");                 bVal = parseInt(arrVal[1]);                 bHt = (bVal * cHeight / maxDataValue) / numctr * ctr;                 bX = cMarginSpace + (i * (bWidth + bMargin)) + bMargin;                 bY = cMarginHeight - bHt - 2;                 drawRectangle(bX, bY, bWidth, bHt, true);             }               // bar grafik yeterli büyüklüğe ulaşmamışsa çizmeye devam                if (ctr < numctr) {                 ctr = ctr + 1;                 setTimeout(arguments.callee, speed);             }         }   //dikdörtgen Çizdirme fonksiyonu         function drawRectangle(x, y, w, h, fill) {             context.beginPath();             context.rect(x, y, w, h);             context.closePath();             context.stroke();               if (fill) {                 var gradient = context.createLinearGradient(0, 0, 0, 300);                 gradient.addColorStop(0, 'green'); //yeşil renkli çiziliyor                 gradient.addColorStop(1, 'rgba(67,203,36,.15)');                 context.fillStyle = gradient;                 context.strokeStyle = gradient;                 context.fill();             }         }             -->     </script>     <noscript>         JavaScript tarayıcınız tarafından etkinleştirilmediğinden grafik gösterilemiyor.     </noscript> </head> <body onload="barChart();">     <div id="body">         <section class="featured">             <div class="content-wrapper">                 <hgroup class="title">                     <h1>                         HTML5 ile Bar Grafik</h1>                 </hgroup>                 <p>                                     </p>             </div>         </section>         <section class="content-wrapper main-content clear-fix">             <canvas id="bchart" height="400" width="600">    Tarayıcı HTML Canvas özelliğini desteklemiyor. </canvas>         </section>     </div> </body> </html> ÇALIŞAN DEMO  KAYNAKLAR http://www.dotnetcurry.com/showarticle.aspx?ID=839   Bookmark and Share Dil Değiştir(Change Language) Kategoriler
  • Csharp (58)
  • Csharp Formlar (23)
  • Web Tasarım (9)
  • CSS (27)
  • JavaScript (37)
  • PHP (50)
  • Laravel (3)
  • ASP.net (38)
  • Excel (15)
  • Güvenlik (4)
  • E-Ticaret (3)
  • Kariyer (5)
  • SQL Server (29)
  • MySQL (16)
  • Linux (17)
  • MacOSX (8)
  • Ayarlar (12)
  • Bilgisayar Ağları (3)
  • Symfony (1)
  • Teknoloji (7)
  • VBS (1)
  • Arduino (6)
  • RaspberryPi (1)
  • Algoritmalar (15)
  • HTML (3)
  • Python (2)
  • Bash Script (7)
  • C Programlama (10)
  • Flutter - Dart (11)
  • Bootstrap (1)
Kütüphane Programı En çok Okunan 18 Makale
  • :: Excelde EĞER Fonksiyonu Kullanımı...
  • :: Csharp ile Access Veritabanı Bağlan...
  • :: SQL nedir, Temel SQL Komutları nele...
  • :: Hangi Linux Dağıtımı?
  • :: OSX İşletim Sistemine PHP, MySQL, A...
  • :: Excel Hesap tablosunda EĞERSAY Fonk...
  • :: Excel Hesap tablosunda ÇOKETOPLA Fo...
  • :: PHP dilini kullanarak MySQLi tekniğ...
  • :: Excel hücrelerinde yıldız koyarak b...
  • :: Excel Hesap tablosunda ETOPLA Fonks...
  • :: Excel Hesap tablosunda ÇOKEĞERSAY F...
  • :: Hangi Programlama Dilini Öğrenmeliy...
  • :: Mac Bilgisayarınıza Windows 7 Yükle...
  • :: PHP ile Basit Dosya Yükleme
  • :: C# Programlama Dili ile İlgili Örne...
  • :: PHP Dili kullanarak MySQLi Tekniği ...
  • :: PhpMyAdmin Şifresi Nasıl Değiştiril...
  • :: Hangisi acaba, PHP mi ASP.NET mi ?
  • Ana Sayfa
  • Hakkımda
  • Kitap Yorumları
  • Sunumlar
  • C# Dersleri
  • Asp.net
  • PHP
  • SQL Server
  • İletişim
  • Csharp ile Programlamaya Giriş
  • Csharp ile Veritabanı İşlemleri
  • Web Tasarım, HTML5, CSS, Jquery
  • PHP ile Web Programlama
  • ASP.net ile Web Uygulamaları
  • Adres1 İstanbul

Oğuzhan TAŞ, 2015 - 2016 (Özel Tasarım)

Twitter

FaceBook

Linkedin SlideShare RSS

Từ khóa » Html Css Grafik