Görselleştirme: Hareket Grafiği

  1. Genel Bakış
  2. Örnek
  3. Yükleniyor
  4. Başlangıç Durumunu Ayarlama
  5. Veri Biçimi
  6. Yapılandırma Seçenekleri
  7. Yöntemler
  8. Etkinlikler
  9. Veri Politikası
  10. Notlar

Genel bakış

Zaman içindeki çeşitli göstergeleri keşfetmek için dinamik grafik. Grafik, Flash kullanılarak tarayıcıda oluşturulur.

Geliştiriciler için not: Flash güvenlik ayarları nedeniyle, bu seçenek (ve tüm Flash tabanlı görselleştirmeler), web sunucusu URL'sinden (ör. http://www.myhost.com/myviz.html) değil, tarayıcıdaki bir dosya konumundan (ör. file:///c:/webhost/myhost/myviz.html) erişildiğinde düzgün çalışmayabilir. Bu genellikle yalnızca bir test sorunudur. Bu sorunu, Adobe web sitesinde açıklandığı şekilde çözebilirsiniz.

Örnek

(Aşağıdaki kodun yerel dosya olarak yüklendiğinde çalışmaz; bir web sunucusundan yüklenmesi gerektiğini unutmayın.)

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["motionchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 600, height:300});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 600px; height: 300px;"></div>
  </body>
</html>

Yükleniyor

google.charts.load paket adı "motionchart".

  google.charts.load('current', {'packages': ['motionchart']});

Görselleştirmenin sınıf adı: google.visualization.MotionChart.

  var visualization = new google.visualization.MotionChart(container);

Veri Biçimi

  • İlk sütun "dize" türünde olmalı ve öğe adlarını (ör. yukarıdaki örnekte "Elma", "Turuncu", "Muz)
  • İkinci sütun zaman değerleri içermelidir. Zaman, aşağıdaki biçimlerden herhangi birinde ifade edilebilir:
    • Yıl - Sütun türü: "sayı". Örnek: 2008.
    • Ay, gün ve yıl: Sütun türü: "date"; değerler, JavaScript Date örnekleri olmalıdır.
    • Hafta numarası: Sütun türü: "dize"; değerler, ISO 8601'e uyan YYYYWww kalıbını kullanmalıdır. Örnek: "2008W03".
    • Çeyrek: Sütun türü: "dize"; değerler, ISO 8601'e uyan YYYYQq kalıbına sahip olmalıdır. Örnek: "2008Q3".
  • Sonraki sütunlar "sayı" veya "dize" türünde olabilir. Sayı sütunları, X, Y, Renk ve Boyut eksenlerinin açılır menülerinde gösterilir. Dize sütunları yalnızca Renk açılır menüsünde görünür. Yukarıdaki örneğe bakın.

Başlangıç Durumunu Ayarlama

Hareket grafiğinin belirli bir durumla (yani, seçilen bir varlık kümesiyle) başlayacağını ve özelleştirmeleri görüntüleyeceğinizi belirtebilirsiniz. Bunu yapmak için önce grafiği oluşturmanız ve görüntülemeniz, ardından grafiğin göstermesini istediğiniz durum değişikliklerini yapmanız (değerler seçme, ayarları değiştirme vb.) ve ardından bu ayarları bir dize olarak dışa aktarmanız, ardından bu dizeyi kodunuzda kullanarak "durum" seçeneğine atamanız gerekir. Sonraki iki bölümde, durum kodunun nasıl dışa aktarılacağı ve ardından nasıl kullanılacağı açıklanmaktadır.

  1. Çalışan bir grafik açıp yakalamak istediğiniz ayarları yapın. Belirtebileceğiniz ayarlar arasında opaklık düzeyleri, yakınlaştırma, günlük ve doğrusal ölçeklendirme bulunur.
  2. Grafiğin sağ alt köşesindeki İngiliz anahtarı simgesini tıklayarak Ayarlar panelini açın.
  3. Gelişmiş panelini gruba eklemek için sol alt köşedeki Gelişmiş bağlantısını tıklayın.
  4. Gelişmiş panelini genişletin ve Durum metin kutusunun içeriğini panonuza kopyalayın. (Not: 2-4 arasındaki adımlarda açıklanan menüyü kullanmak yerine, sayfanıza getState() çağrısı yapan ve mevcut durumu bir ileti kutusunda görüntüleyen bir düğme ekleyebilirsiniz.)
  5. Önceki adımda kopyaladığınız durum dizesini, burada gösterildiği gibi kodunuzdaki "durum" seçenekler parametresine atayın. draw() yöntemine iletilen grafik, başlangıçta belirtilen duruma göre başlatılır.
var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

Yapılandırma Seçenekleri

Ad Tür Varsayılan Açıklama
yükseklik number (sayı) 300 Grafiğin piksel cinsinden yüksekliği.
genişlik number (sayı) 500 Grafiğin piksel cinsinden genişliği.
state string hiçbiri Grafik için ilk görüntüleme durumu. Bu, yakınlaştırma düzeyini, seçilen boyutları, seçili balonları/varlıkları ve diğer durum açıklamalarını açıklayan serileştirilmiş bir JSON nesnesidir. Nasıl ayarlanacağını öğrenmek için Başlangıç Durumunu Ayarlama bölümünü inceleyin.
ShowGrafikDüğmeleri boolean true false (yanlış) grafiği, sağ üst köşedeki grafik türünü (balonlar / çizgiler / sütunlar) kontrol eden düğmeleri gizler.
BaşlıkBaşlığı boolean true false, öğelerin başlık etiketini gizler (veri tablosundaki ilk sütunun etiketinden türetilir).
program_listesiseçBileşeni boolean true false, görünür öğelerin listesini gizler.
yan panel boolean true false, sağ paneli gizler.
programXMetrik Seçici boolean true false, x için metrik seçiciyi gizler.
programYMetrik Seçici boolean true false, y için metrik seçiciyi gizler.
ShowXScalePicker boolean true false, x için ölçek seçiciyi gizler.
ShowYScalePicker boolean true false, y için ölçek seçiciyi gizler.
Gelişmiş Paneli göster boolean true false, ayarlar panelindeki seçenekler bölmesini devre dışı bırakır.

Yöntemler

Yöntem Dönüş Türü Açıklama
draw(data, options) yok Sağlanan seçenekleri içeren grafiği çizer.
getState() string Hareket grafiğinin, JSON dizesiyle serileştirilmiş şekilde mevcut durumunu döndürür. Bu durumu grafiğe atamak için draw() yöntemindeki state seçeneğine bu dizeyi atayın. Bu, genellikle varsayılan durumu kullanmak yerine başlangıçta özel bir grafik durumu belirtmek için kullanılır.

Etkinlikler

Ad Açıklama Özellikler
error Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir. kimlik, mesaj
hazır Grafik, harici yöntem çağrıları için hazır. Grafik ve çizdikten sonra arama yöntemleriyle etkileşimde bulunmak isterseniz, çizim yöntemini çağırmadan önce bu etkinlik için bir işleyici oluşturmanız ve bunları yalnızca etkinlik tetiklendikten sonra çağırmanız gerekir. Yok
Statechange Kullanıcı, grafikle bir şekilde etkileşimde bulundu. Grafiğin mevcut durumunu öğrenmek için getState() numaralı telefonu arayın. Yok

Veri Politikası

Tüm kod ve veriler tarayıcıda işlenir ve oluşturulur. Hiçbir sunucuya veri gönderilmez.

Notlar

Flash güvenlik ayarları nedeniyle, bir web sunucusu URL'sinden (ör. http://www.myhost.com/myviz.html) değil, tarayıcıdaki bir dosya konumundan (ör. file:///c:/webhost/myhost/myviz.html) erişildiğinde bu (ve tüm Flash tabanlı görselleştirmeler) düzgün çalışmayabilir. Bu genellikle yalnızca bir test sorunudur. Bu sorunu, Makromedia web sitesinde açıklandığı şekilde çözebilirsiniz.