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ılır. Ayrıca, JavaScript ve nesne odaklı programlamaya aşina olduğunuz varsayılır. Web'de pek çok JavaScript eğitimi mevcuttur.

Grafik Oluşturma

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

  1. Kodunuz için bir ad alanı seçin. Diğer sayfalar kodunuzu barındıracaktır. Adlandırma çakışmalarından kaçınmaya çalışmalısınız.
  2. Grafik nesnenizi uygulayın. Aşağıdakileri sunan bir JavaScript nesnesi uygulayın:
    • Kurucu
    • Nesnenizi oluşturucuya iletilen DOM öğesinin içinde çizmek için bir draw() yöntemi,
    • İstemcinin kullanacağı diğer isteğe bağlı standart yöntemler (ör. getSelection() ve)
    • Müşterilerinize göstermek istediğiniz özel yöntemler.
  3. İstemcinin yakalaması için tetiklemek istediğiniz [isteğe bağlı] tüm etkinlikleri uygulayın .
  4. Grafiğinizle ilgili dokümanları yazın. Belgelemezseniz kullanıcılar muhtemelen dokümanınızı yerleştiremez.
  5. Grafiğinizi Grafik 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 indirin ve projenize kaydedin. Çoğu IDE, IDE'niz farklı olsa da IDE'yi otomatik olarak dizine ekler ve otomatik tamamlamayı etkinleştirir. Dosyanın her zaman güncel olmayabileceğini unutmayın. En güncel API referansı için referans sayfalarına göz atın.

Ad Alanı Seçin

Grafiğiniz, başka grafikler veya diğer alakasız JavaScript'leri barındıran bir sayfaya yerleştirilebilir. Adlandırmanın diğer kod veya CSS sınıf adlarıyla çakışmaması amacıyla grafik kodunuz için benzersiz bir ad alanı seçmeniz gerekir. Ad alanı için iyi bir seçenek, komut dosyanızı barındırmak için kullanacağınız URL'dir (WWW ve uzantılar hariç). Örneğin, grafiğiniz www.example.com adresinde yayınlanacaksa benzersiz ad alanınız olarak example kullanılır. ile ayrılmış ilave son ekler ekleyebilirsiniz . işaretlerini kullanın (tüm Google grafiklerinde google.visualization ad alanı bulunur). Grafik nesnenizi ve ihtiyaç duyabileceğiniz genel değişkenleri depolamak için ad alanı nesnenizi kullanın.

Aşağıda, MyTable adlı bir grafik sınıfını ve gerekli tüm genel değişkenleri içerecek bir ad alanı nesnesi oluşturma örneği 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 Çakışmalarını Önleme

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

td.example {color: blue;}

Bu durumda grafiğinizi <div> içine şunları kullanarak sarmalayabilirsiniz :

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

Şemanızı uygulama

Grafiğinizi, Referans Bölümü'nde açıklanan standart yöntemleri sunan bir JavaScript nesnesi olarak uygulamanız gerekir. Zorunlu iki yöntem, oluşturucu vedraw() yöntemleridir. Ayrıca kullanıcılarınıza grafiğiniz için uygun olan diğer yöntemleri de gösterebilirsiniz. Unutmayın, kullanımı kolay olan daha iyidir.

Oluşturucu

Grafiğinizde, tek bir parametreyi (grafiğinizi çizeceğiniz bir DOM öğesi) alan tek bir oluşturucu gösterilmelidir. Genellikle grafikler, daha sonra kullanılmak üzere bu öğenin yerel bir kopyasını oluşturucuda depolar:

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

draw() Yöntemi

Grafik sınıfınızda, 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 barındıran bir DataTable.
  2. Grafiğiniz için isteğe bağlı bir ad/değer seçenekleri haritası. Seçeneklerin adları ve değer türleri, sizin tarafınızdan özel grafiğiniz için tanımlanır. Örneğin, aşağıdaki Merhaba Grafik örneğinde, grafik, Boole türünde değere sahip "showLineNumber" adlı bir seçeneği destekler. Kullanıcının belirli bir seçenek için bir değer iletmemesi durumunda 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çemezse 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 Chart!

Bir DataTable verilerini HTML tablosu olarak görüntüleyen basit bir grafiği burada görebilirsiniz:

Uygulama kodu şöyledir:

// 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 Dahil Etme

Ö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 faydalı 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.) 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ı istemciye gösterebilir veya grafiğinizde bir get...() yöntemini kullanabilirsiniz. Müşteri de etkinlik ayrıntılarını almak için bu yöntemi çağırabilir. Her iki durumda da yöntemlerinizi veya etkinlik özelliklerini iyi belgeleyin.

Grafiğinizi Belgeleyin

Grafiğinizi düzgün bir şekilde belgelemezseniz muhtemelen fazla kullanıcı alamayabilirsiniz. Aşağıdakileri belgelediğinizden emin olun:

  • Desteklediğiniz tüm yöntemleri açıklayın. draw() yöntemi tüm grafiklerde ortak olarak kullanılır ancak her grafik kendi ek yöntemlerini destekleyebilir. (Standart dışı bir davranışa sahip olmadığı sürece, büyük olasılıkla oluşturucunuzu belgelemeniz gerekmez.) Beklenen yöntemlerin listesini Referans Sayfası'nda bulabilirsiniz.
  • draw() yönteminizin desteklediği tüm seçenekleri açıklayın. Buna her bir 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ı ile özellikleri ve her bir etkinliğin ne zaman tetiklendiği anlamına gelir.
  • Müşterinin <script> içerme ifadesinde kullanılması gereken grafik kitaplığınızın URL'sini listeleyin ve belgelerinizin URL'sini verin.
  • Grafiğinizin tam adını verin.
  • 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ı grafikler, örneğin bir grafiğin veya haritanın resmini oluşturmak için verileri bir sunucuya gönderebilir. Sunucuya veri gönderirseniz:
    • Hangi verilerin gönderildiğini açıkça tanımlayın.
    • Verilerin sunucuda ne kadar süre boyunca kaydedileceğini 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 kadar süre boyunca kaydedileceğini belirtin.

Dokümanlarınız, grafik kodunuzla aynı yerde barındırılır (aşağıdaki Şemanızı Galeriye Gönderme bölümüne bakın).

Grafiğinizi yazdıktan sonra galerimizin "Ek Grafikler" bölümünde yayınlanması için gönderin. Grafik göndermeniz, kötü amaçlı yazılım oluşturmamayı veya kullanıcı verilerini kötüye kullanmamayı kabul ederek bizimle bir sözleşme imzalamanız gerektiği anlamına gelir. Galeri, oluşturduğumuz veya incelediğimiz grafiklerin işaretçilerinin bir listesidir. Gerçek JavaScript kitaplığını ve belgelerini kendi sitenizde barındırmayı seçebilir veya kitaplığı ve dokümanları Google'ın 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ıyorsa sorunlarınızı çözmenize yardımcı olabilecek bazı yaklaşımları aşağıda bulabilirsiniz:

  • Yazım hatalarını arayı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 Debugger'ı veya Firebug eklentisini kullanabilirsiniz. IE'de Microsoft Komut Dosyası Hata Ayıklayıcısı'nı kullanabilirsiniz.
  • Google Chart API tartışma grubunda arama yapın. Sorunuzun yanıtını içeren 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 kullanıcılar tarafından kullanılmasını bekliyorsanız grafiğinizi farklı diller ve kültürler için yerelleştirilecek şekilde tasarlamak isteyebilirsiniz. En temel yerelleştirme, kullanıcının tarayıcı ayarlarına göre kullanıcı arayüzündeki standart metin dizelerini çevirmektir. Yerelleştirmeye veya bir muhtemelen kullanıcı arayüzü tasarımına bağlı olarak sayı biçimlerini değiştirmek de daha gelişmiş bir yerelleştirme biçimidir. Grafiğinizi yerelleştirmeye karar verirseniz belgelerinizde grafiğinizin desteklediği dilleri listeleyin ve yaygın olarak kullanılan bir dil için varsayılan bir ayar belirtin. Dilin yanlış olması ihtimaline karşı grafiğinizin kullanıcı arayüzüne bir "dili değiştir" düğmesi eklemek de yararlı olur. Tarayıcı dilini algılamanın yaygın bir yolu, accept-Language HTML başlığına bakmaktır.