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 (ve Flash tabanlı tüm görselleştirmeler) 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 doğru şekilde çalışmayabilir. Bu sorun genellikle yalnızca test amaçlıdır. Bu sorunu Adobe web sitesinde açıklandığı şekilde çözebilirsiniz.

Örnek

(Aşağıdaki kodun yerel dosya olarak yüklendiğinde çalışmayacağını, 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 paketinin 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 varlık adlarını (ör. (yukarıdaki örnekte "Elma", "Portakal", "Muz").
  • İkinci sütun zaman değerlerini içermelidir. Zaman, şu biçimlerden herhangi birinde ifade edilebilir:
    • Yıl: Sütun türü: 'numara'. Örnek: 2008.
    • Ay, gün ve yıl - Sütun türü: "tarih"; değerler, JavaScript Date örnekleri olmalıdır.
    • Hafta numarası- Sütun türü: "string"; değerler, ISO 8601'e uygun YYYYWww kalıbını kullanmalıdır. Örnek: '2008W03'.
    • Quarter - Sütun türü: "string"; değerler, ISO 8601'e uygun YYYYQq kalıbına sahip olmalıdır. Örnek: '2008Q3'.
  • Sonraki sütunlar "number" veya "dize" türünde olabilir. X, Y, Renk ve Boyut eksenleri için açılır menülerde sayı sütunları 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çili varlıklar kümesiyle ve özelleştirmelerle başlamasını belirtebilirsiniz. Bunu yapmak için önce grafiği oluşturup görüntülemeniz, ardından grafiğin göstermesini istediğiniz durum değişikliklerini yapmanız (değerleri seçme, ayarları değiştirme vb.), bu ayarları bir dize olarak dışa aktarmanız ve son olarak da 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. Bir çalışma grafiği açın ve yakalamak istediğiniz ayarları belirleyin. Belirtebileceğiniz ayarlar arasında opaklık düzeyleri, yakınlaştırma ve günlük ile doğrusal ölçeklendirmeyi karşılaştırma yer alır.
  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. adımlarda açıklanan menüyü kullanmak yerine sayfanıza getState() işlevini çağıran ve geçerli durumu bir mesaj 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çenekleri parametresine atayın. draw() yöntemine geçirildiğinde, grafik başlangıçta belirtilen duruma hazırlanı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 sayı 300 Grafiğin piksel cinsinden yüksekliği.
genişlik sayı 500 Grafiğin piksel cinsinden genişliği.
state dize hiçbiri Grafik için ilk görüntüleme durumu. Bu, yakınlaştırma düzeyini, seçili boyutları, seçili balonları/varlıkları ve diğer durum açıklamalarını açıklayan serileştirilmiş bir JSON nesnesidir. Bunu nasıl ayarlayacağınızı öğrenmek için İlk Durumu Ayarlama bölümüne bakın.
showChartButtons boolean true false (yanlış) sağ üst köşedeki grafik türünü kontrol eden düğmeleri (balonlar / çizgiler / sütunlar) gizler.
showHeader boolean true false, varlıkların başlık etiketini gizler (veri tablosundaki ilk sütunun etiketinden türetilir).
showSelectListComponent boolean true false (yanlış) değerine ayarlanırsa görünür öğelerin listesini gizler.
showSidePanel boolean true false (yanlış) değeri sağ taraftaki paneli gizler.
showXMetricPicker boolean true false (yanlış) değeri, x için metrik seçiciyi gizler.
showYMetricPicker boolean true false (yanlış) değeri, y için metrik seçiciyi gizler.
showXScalePicker boolean true false (yanlış) değeri, x için ölçek seçiciyi gizler.
showYScalePicker boolean true false (yanlış) değeri, y için ölçek seçiciyi gizler.
showAdvancedPanel boolean true false (yanlış) değerine ayarlanırsa 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 Grafiği, sunulan seçeneklerle çizer.
getState() dize Hareket şemasının bir JSON dizesine göre serileştirilmiş mevcut state döndürür. Bu durumu grafiğe atamak için bu dizeyi draw() yönteminde state seçeneğine atayın. Bu durum genellikle varsayılan durumu kullanmak yerine başlangıçta özel bir grafik durumunu 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, ileti
hazır Grafik, harici yöntem çağrıları için hazır. Grafikle etkileşim kurmak ve çizdikten sonra yöntemleri çağırmak 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
durum değişikliği Kullanıcı, grafikle bir şekilde etkileşim kurmuştur. Grafiğin mevcut durumunu öğrenmek için getState() numaralı telefonu arayın. Yok

Veri Politikası

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

Notlar

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