Grafik Türleri Oluşturma

Bu sayfada, kendi grafik türünüzü nasıl geliştireceğiniz ve kullanıcılara nasıl sunacağınız açıklanmaktadır.

Kitle

Bu sayfada, Grafikleri Kullanma sayfasını okuduğunuz varsayılmaktadır. Ayrıca, JavaScript ve nesne odaklı programlama hakkında bilgi sahibi olduğunuz varsayılır. Web'de JavaScript öğreticilerini bulabilirsiniz.

Grafik Oluşturma

Grafikler, oluşturduğunuz bir JavaScript kitaplığı üzerinden kullanıcıya gösterilir. Grafik kitaplığı oluşturmak için aşağıdaki adımları uygulayın:

  1. Kodunuz için ad alanı seçin. Diğer sayfalar da kodunuzu barındıracaktır. Ad çakışmalarından kaçınmaya çalışmanız gerekir.
  2. Grafik nesnenizi uygulayın. Aşağıdakileri açığa çıkaran bir JavaScript nesnesi uygulayın:
    • Kurucu,
    • Nesneyi oluşturucuya aktarılan DOM öğesinin içinde çizmek için bir draw() yöntemi,
    • Bir istemcinin kullanabileceği diğer tüm isteğe bağlı standart yöntemler (ör. getSelection() ve
    • Müşterilerinize göstermek istediğiniz tüm özel yöntemler.
  3. [İsteğe bağlı] Müşterinin yakalamak üzere tetiklemesini istediğiniz etkinlikleri uygulayın.
  4. Grafiğinizin dokümanlarını yazın. Bu özelliği belgelemezseniz kişiler muhtemelen dokümanı yerleştiremez.
  5. Grafiğinizi Galeri Galerisi'nde yayınlayın.

İpucu

  • IDE'nizde (kod düzenleyici) otomatik tamamlamayı etkinleştirmek için goog.visualization API sınıfını ve yöntem tanımlarını indirebilirsiniz. Dosyayı http://www.google.com/uds/modules/gviz/gviz-api.js adresinden indirip projenize kaydedin. IDE'leriniz otomatik olarak dizine eklenir ve otomatik tamamlama etkinleştirilir. Ancak IDE'niz farklı olabilir. Dosyanın her zaman güncel olmayabileceğini unutmayın. En güncel API referansı için referans sayfalarını kontrol edin.

Ad alanı seçin

Grafiğiniz, diğer grafikleri veya alakasız başka JavaScript'leri barındıran bir sayfaya yerleştirilebilir. Diğer kod veya CSS sınıf adlarıyla çakışma olmaması için grafik kodunuza ait benzersiz bir ad alanı seçmeniz gerekir. Komut dosyanızı barındırmak için kullanacağınız URL (WWW ve uzantılar hariç) bir ad alanı için iyi bir seçimdir. Örneğin, grafiğiniz www.example.com adresinde yayınlanacaksa benzersiz ad alanınız olarak example değerini kullanırsınız. ile sona eren ilave sonekler ekleyebilirsiniz . işaretlerini kullanarak grafiğinizi daha fazla gruplandırabilirsiniz (Google'ın tüm grafiklerinin ad alanı google.visualization'dır). Grafik nesnenizin yanı sıra ihtiyacınız olan genel değişkenleri depolamak için ad alanı nesnenizi kullanın.

Aşağıda, Tablom adlı bir grafik sınıfını ve gerekli tüm genel değişkenleri içerecek bir ad alanı nesnesi oluşturmaya dair bir örnek verilmiştir:

// Namespace, implemented as a global variable.
var example = {};

// MyTable class constructor.
example.MyTable = function(container) {
  // ...
}

// MyTable.draw() method.
example.MyTable.prototype.draw = function(data, options) {
  // ...
}

CSS Anlaşmazlıklarından kaçınma

CSS kullanıyorsanız sayfadaki diğer grafikleri etkileyebilecek CSS kuralları yazmadığınızdan emin olun. Örneğin, yalnızca bir grafiği değil, sayfadaki diğer <td> öğelerini etkileyeceği için td {color: blue;} gibi bir kural kesinlikle önerilmez. Bunu aşmanın yollarından biri, tüm grafiğinizi bir <div> adı içine almak ve tüm CSS kurallarınızın, yalnızca söz konusu sınıf adına sahip bir alt alt öğeye uygulanmasıdır. Örneğin, aşağıdaki CSS kuralı yalnızca üst öğe olarak "example" sınıf adına sahip bir öğesi olan <td> öğelerini etkiler.

td.example {color: blue;}

Ardından, grafiğinizi bir <div> içinde şunlarla sarmalayabilirsiniz :

<div class="example">
  ...
</div>

Grafiğinizi uygulama

Grafiğinizi, Referans Bölümü'nde açıklanan standart yöntemleri ortaya çıkaran bir JavaScript nesnesi olarak uygulamanız gerekir. Gerekli iki yöntem, oluşturucu ve pull() yöntemleridir. Ayrıca, kullanıcılarınıza grafiğiniz için uygun olan ek yöntemleri de gösterebilirsiniz. Kullanımın daha kolay olduğunu unutmayın.

Oluşturucu

Grafiğinizde, tek bir parametre (grafiği çizeceğiniz bir DOM öğesi) alan tek bir oluşturucu gösterilmelidir. Genel olarak grafikler, daha sonra kullanmak üzere oluşturucuda bu öğenin yerel bir kopyasını depolar:

function example.MyTable(container) {
  this.container = container
}

draw() Yöntemi

Grafik sınıfınızın prototipinde tanımlanmış bir draw() yöntemi olmalıdır. draw() yöntemi iki parametreyi kabul eder:

  1. Gösterilecek verileri tutan bir DataTable.
  2. Grafiğiniz için isteğe bağlı ad/değer seçenekleri haritası. Seçeneklerin adları ve değer türleri belirli bir grafiğiniz için sizin tarafınızdan tanımlanır. Aşağıdaki grafik, aşağıdaki Merhaba Grafik örneğinde Boole türünde 'showLineNumber' adlı seçeneği destekler. Kullanıcının belirli bir seçenek için değer iletmemesi ihtimaline karşı her seçenek için varsayılan bir değeri desteklemeniz gerekir. Bu parametre isteğe bağlıdır. Bu nedenle, kullanıcı bu parametreyi geçmezse tüm varsayılan değerleri kullanmaya hazır olmanız gerekir (daha fazla bilgi).
example.MyTable.prototype.draw = function(data, options) {
  // Process data and options and render output into the container element.
  ...
}

Merhaba Grafik!

DataTable verilerini HTML tablosu olarak gösteren basit bir grafik:

Uygulama kodu aşağıda verilmiştir:

// Declare a unique namespace.
var example = {};

// Class constructor. Parameter container is a DOM elementon the client that
// that will contain the chart.
example.MyTable = function(container) {
  this.containerElement = container;
}

// Main drawing logic.
// Parameters:
//   data is data to display, type google.visualization.DataTable.
//   options is a name/value map of options. Our example takes one option.
example.MyTable.prototype.draw = function(data, options) {

  // Create an HTML table
  var showLineNumber = options.showLineNumber; // Boolean configuration option.

  var html = [];
  html.push('<table border="1">');

  // Header row
  html.push('<tr>');
  if (showLineNumber) {
    html.push('<th>Seq</th>');
  }
  for (var col = 0; col < data.getNumberOfColumns(); col++) {
    html.push('<th>' + this.escapeHtml(data.getColumnLabel(col)) + '</th>');
  }
  html.push('</tr>');

  for (var row = 0; row < data.getNumberOfRows(); row++) {
    html.push('<tr>');
    if (showLineNumber) {
      html.push('<td align="right">', (row + 1), '</td>');
    }

    for (var col = 0; col < data.getNumberOfColumns(); col++) {
      html.push(data.getColumnType(col) == 'number' ? '<td align="right">' : '<td>');
      html.push(this.escapeHtml(data.getFormattedValue(row, col)));
      html.push('</td>');
    }
    html.push('</tr>');
  }
  html.push('</table>');

  this.containerElement.innerHTML = html.join('');
}

// Utility function to escape HTML special characters
example.MyTable.prototype.escapeHtml = function(text) {
  if (text == null)
    return '';
  return text.replace(/&/g, '&').replace(/</g, '<')
      .replace(/>/g, '>').replace(/"/g, '"');
}

Grafiğinizi Bir Web Sayfasına Ekleme

Önceki grafiği kullanmak için tarayıcınızdan erişilebilen bir .js dosyasına kaydedin. Ardından <script> kaynak parametresini JavaScript dosyanıza işaret edecek şekilde değiştirerek aşağıdaki kodu kaydedin:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="mytablevis.js"></script>
    <script type="text/javascript">
      google.charts.load("current");

      // Set callback to run when API is loaded
      google.charts.setOnLoadCallback(drawVisualization);

      // Called when the Chart API is loaded.
      function drawVisualization() {

        // Create and populate a data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Daily Hours');
        data.addRows(5);
        data.setCell(0, 0, 'Work');
        data.setCell(0, 1, 11);
        // Add more data rows and cells here

        // Instantiate our table object.
        var vis = new example.MyTable(document.getElementById('mydiv'));

        // Draw our table with the data we created locally.
        vis.draw(data, {showLineNumber: true});
       }
   </script>
  <title>MyTable example page</title></head>
  <body>
    <div id="mydiv"></div>
    <p>This page demonstrates hosting a table visualization.</p>
  </body>
</html>

 

Etkinliklerinizi Uygulama

Grafiğinizin yararlı etkinlikleri (örneğin, zamanlayıcı etkinlikleri veya tıklamalar gibi kullanıcı tarafından başlatılan etkinlikler) tetiklemesini istiyorsanız etkinliğinizin ayrıntılarıyla (ad, gönderilecek özellikler vb.) birlikte google.visualization.events.trigger işlevini çağırmanız gerekir. Ayrıntıları Etkinlikler sayfasında bulabilirsiniz. Etkinlik nesnesine özellikler ekleyerek etkinlik ayrıntılarınızı müşteriye gösterebilirsiniz veya grafiğinizde bir tür... get...() yöntemi gösterebilirsiniz. Müşteri, etkinlik ayrıntılarını almak için bu yöntemi çağırabilir. Her iki durumda da yöntemlerinizi veya etkinlik özelliklerinizi iyi belgeleyin.

Grafiğinizi Belgeleyin

Grafiğinizi uygun şekilde belgelememeniz durumunda muhtemelen çok sayıda kullanıcı almazsınız. Aşağıdakileri belgelemeyi unutmayın:

  • Desteklediğiniz tüm yöntemleri açıklayın. draw() yöntemi tüm grafiklerde ortaktır ancak her grafik kendi ek yöntemlerini destekleyebilir. (Standart dışı bir davranışı olmadığı sürece kurucunuzu belgelemeniz gerekmez.) Beklenen yöntemlerin listesini Referans Sayfası'nda bulabilirsiniz.
  • draw() yönteminizin desteklediği tüm seçenekleri açıklayın. Buna her seçeneğin adı, beklenen değer türü ve varsayılan değeri dahildir.
  • Tetiklediğiniz tüm etkinlikleri açıklayın. Bu, her bir etkinliğin adı, özellikleri ve her etkinliğin ne zaman tetiklendiği anlamına gelir.
  • İstemcinin <script> ekleme beyanında kullanılması gereken grafik kitaplığınızın URL'sini listeleyin ve belgelerinizin URL'sini verin.
  • Grafiğinizin tam adını belirtin.
  • Grafiğinizi desteklediği seçenekler, etkinlikleri ve özel yöntemleriyle nasıl kullanacağınızı gösteren örnek sayfalar oluşturun.
  • Grafiğinizin veri politikasını net bir şekilde açıklayın. Çoğu grafik, verileri tarayıcı içinde işler ancak bazıları, örneğin bir grafiğin veya haritanın görüntüsü oluşturmak için bir sunucuya veri gönderebilir. Sunucuya veri gönderiyorsanız:
    • Hangi verilerin gönderileceğini açıkça tanımlayın.
    • Verilerin sunucuya ne kadar süre boyunca saklanacağını not edin.
    • Verilere hangi varlıkların erişebileceğini belgeleyin. Örneğin, XYZ şirketi vb.
    • Verilerin günlüğe kaydedilip kaydedilmeyeceğini ve ne süreyle girileceğini belirtin.

Dokümanlarınız, grafik kodunuzla aynı yerde barındırılır (aşağıdaki Grafiğinizi Galeriye Gönderme konusuna bakın).

Grafiğinizi yazdıktan sonra galerimizin "Ek Grafikler" bölümünde yayınlanması için gönderin. Grafik göndermek kötü amaçlı yazılım oluşturmamayı veya kullanıcı verilerini kötüye kullanmamayı kabul eden bir sözleşme imzalamanız gerektiği anlamına gelir. Galeri, oluşturduğumuz veya incelediğimiz grafiklerin işaretçilerinden oluşan bir listedir. Kendi JavaScript kitaplığını ve dokümanlarını kendi sitenizde barındırmayı tercih edebilir ya da Google'ın kitaplığı ve dokümanları sizin için barındırmasını sağlayabilirsiniz. Grafiğinizi galeride yayınladığınızda barındırmamızı isteyip istemediğinizi belirtin.

Sorun giderme

Kodunuz çalışmıyor gibi görünüyorsa sorunlarınızı çözmenize yardımcı olabilecek bazı yaklaşımları aşağıda bulabilirsiniz:

  • Yazım hataları olup olmadığına bakın. JavaScript'in büyük/küçük harfe duyarlı bir dil olduğunu unutmayın.
  • JavaScript hata ayıklayıcısı kullanın. Firefox'ta JavaScript konsolunu, Venkman Hata Ayıklayıcı'yı veya Firebug eklentisini kullanabilirsiniz. IE'de Microsoft Script Hata Ayıklayıcı'yı kullanabilirsiniz.
  • Google Chart API tartışma grubunda arama yapın. Sorunuzun yanıtlandığı bir yayını bulamıyorsanız sorunuzu, sorunu gösteren bir web sayfasının bağlantısıyla birlikte gruba gönderin.

Yerelleştirme

Grafiğinizin çeşitli ülkelerdeki kişiler tarafından kullanılmasını bekliyorsanız grafiğinizi farklı diller ve kültürler için yerelleştirilecek şekilde tasarlayabilirsiniz. En temel yerelleştirme, kullanıcı arayüzündeki standart metin dizelerini kullanıcının tarayıcı ayarlarına göre çevirmektir. Yerelleştirmenin daha gelişmiş bir yolu, yerelleştirmeyi ve hatta kullanıcı arayüzü tasarımına bağlı olarak sayı biçimlerini değiştirmektir. Grafiğinizi yerelleştirmeye karar verirseniz dokümanlarınızda desteklenen dilleri listeleyin ve yaygın olarak kullanılan dil için varsayılan bir ayar sağlayın. Dili yanlış kullanım ihtimaline karşı grafiğinizin kullanıcı arayüzüne bir "dil değiştir" düğmesi eklemek de yararlıdır. Tarayıcı dilini algılamanın yaygın yolu, Accept-Language HTML başlığına bakmaktır.