Ağaç grafikler

  1. Genel Bakış
  2. Örnek
  3. Öne Çıkanlar
  4. İpuçları
  5. Yükleniyor
  6. Veri Biçimi
  7. Yapılandırma Seçenekleri
  8. Yöntemler
  9. Etkinlikler
  10. Veri Politikası

Genel bakış

Bir veri ağacının görsel temsili. Bu düğümde her bir düğümün sıfır ya da daha fazla alt öğesi ve bir üst öğesi (üst öğesi olmayan kök hariç) olabilir. Her düğüm, atadığınız değerlere göre boyut ve renkli bir dikdörtgen olarak gösterilir. Boyutlar ve renkler, grafikteki diğer tüm düğümlere göre değerlendirilir. Aynı anda kaç seviye gösterileceğini ve isteğe bağlı olarak daha derin seviyelerin ipucu verecek bir şekilde gösterileceğini belirtebilirsiniz. Düğüm bir yaprak düğümüyse boyutu ve rengi belirtebilirsiniz. Yaprak değilse düğüm, yaprak düğümleri için sınırlayıcı kutu olarak görüntülenir. Varsayılan davranış, kullanıcı bir düğümü sol tıkladığında ağacı aşağı taşımak ve kullanıcı grafiği sağ tıkladığında ağacı tekrar yukarı taşımaktır.

Grafiğin toplam boyutu, sayfanıza eklediğiniz kapsayıcı öğenin boyutuna göre belirlenir. Adları gösterilemeyecek kadar uzun yaprak düğümleriniz varsa ad üç nokta (...) ile kısaltılır.

Örnek

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
          ['Global',    null,                 0,                               0],
          ['America',   'Global',             0,                               0],
          ['Europe',    'Global',             0,                               0],
          ['Asia',      'Global',             0,                               0],
          ['Australia', 'Global',             0,                               0],
          ['Africa',    'Global',             0,                               0],
          ['Brazil',    'America',            11,                              10],
          ['USA',       'America',            52,                              31],
          ['Mexico',    'America',            24,                              12],
          ['Canada',    'America',            16,                              -23],
          ['France',    'Europe',             42,                              -11],
          ['Germany',   'Europe',             31,                              -2],
          ['Sweden',    'Europe',             22,                              -13],
          ['Italy',     'Europe',             17,                              4],
          ['UK',        'Europe',             21,                              -5],
          ['China',     'Asia',               36,                              4],
          ['Japan',     'Asia',               20,                              -12],
          ['India',     'Asia',               40,                              63],
          ['Laos',      'Asia',               4,                               34],
          ['Mongolia',  'Asia',               1,                               -5],
          ['Israel',    'Asia',               12,                              24],
          ['Iran',      'Asia',               18,                              13],
          ['Pakistan',  'Asia',               11,                              -52],
          ['Egypt',     'Africa',             21,                              0],
          ['S. Africa', 'Africa',             30,                              43],
          ['Sudan',     'Africa',             12,                              2],
          ['Congo',     'Africa',             10,                              12],
          ['Zaire',     'Africa',             8,                               10]
        ]);

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Öne Çıkanlar

Öğelerin vurgulanıp vurgulanmayacağını belirtebilir ve bu durumlarda belirli öğeler için belirli renkler ayarlayabilirsiniz. Vurgulamayı etkinleştirmek için highlightOnMouseOver:true (49 veya önceki sürümler için) veya enableHighlight: true (v50+ için) seçeneğini belirleyin. Buradan, çeşitli HighlightColor seçeneklerini kullanarak öğelerin vurgulanması için renklerinizi ayarlayabilirsiniz. 

      var options = { // For v49 or before
        highlightOnMouseOver: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true
      };
      var optionsV50 = { // For v50+
        enableHighlight: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true,
        // Use click to highlight and double-click to drill down.
        eventsConfig: {
          highlight: ['click'],
          unhighlight: ['mouseout'],
          rollup: ['contextmenu'],
          drilldown: ['dblclick'],
        }
      };

İpuçları

Ağaç grafik ipuçları, varsayılan olarak temeldir ve ağaç eşleme hücresinin etiketini gösterir. Hücreler etiketleri içeremeyecek kadar küçükse bu yöntem yararlıdır ancak bunları bu bölümde açıklandığı şekilde daha fazla özelleştirebilirsiniz.

Ağaç grafik ipuçları diğer grafiklerden farklı şekilde özelleştirilir: Bir işlev tanımlar ve ardından generateTooltip seçeneğini bu işleve ayarlarsınız. Aşağıda basit bir örnek verilmiştir:

Yukarıdaki grafikte, kullanıcı bir ağaç grafik hücresinin üzerine geldiğinde gösterilecek HTML'yi içeren bir dize döndüren showStaticTooltip adında bir işlev tanımlarız. Deneyin. Oluşturulacak kod şu şekildedir:

  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showStaticTooltip
  };

  tree.draw(data, options);

  function showStaticTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           'Read more about the <a href="http://en.wikipedia.org/wiki/Kingdom_(biology)">kingdoms of life</a>.</div>';
  }

generateTooltip işlevi, istediğiniz bir JavaScript olabilir. Genellikle veri değerlerine göre değişen ipuçları almak istersiniz. Aşağıdaki örnekte, veri tablosundaki her alana nasıl erişileceği gösterilmektedir.

Fareyle yukarıdaki ağaç haritasındaki hücrelerin üzerine geldiğinizde her hücre için farklı bir ipucu görürsünüz. Ağaç grafik ipucu işlevlerinin tümü şu üç değeri alır: row, size ve value.

  • row: Veri tablosundan hücre satırı
  • size: Bu hücrenin ve tüm alt hücrelerinin değerinin (3. sütun) toplamı
  • value: Hücrenin rengi; 0 ile 1 arasında bir sayı olarak ifade edilir

showFullTooltip bölgesinde, döndürdüğümüz dize beş satırdan oluşan bir HTML kutusu:

  • 1. satır, veri tablosundan uygun satırı göstererek data.getValue öğesini liberal şekilde kullanır.
  • 2. satır, yalnızca row parametresi olan satırı gösterir.
  • 3. satır, veri tablosunun 3. sütunundaki bilgileri sağlar: Bu satırdaki 3. sütunun değerinin toplamı ile alt öğelerin değerleri toplamı.
  • 4. satır, veri tablosunun 4. sütunundan bilgi sağlar. Değerdir, ancak hücrenin rengine karşılık gelen, 0 ile 1 arasında bir sayı olarak ifade edilir.
  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showFullTooltip
  };

  tree.draw(data, options);

  function showFullTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           '<span style="font-family:Courier"><b>' + data.getValue(row, 0) +
           '</b>, ' + data.getValue(row, 1) + ', ' + data.getValue(row, 2) +
           ', ' + data.getValue(row, 3) + '</span><br>' +
           'Datatable row: ' + row + '<br>' +
	   data.getColumnLabel(2) +
           ' (total value of this cell and its children): ' + size + '<br>' +
	   data.getColumnLabel(3) + ': ' + value + ' </div>';
  }

}

Yükleniyor

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

  google.charts.load("current", {packages: ["treemap"]});

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

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

Veri Biçimi

Veri tablosundaki her bir satır bir düğümü (grafikteki bir dikdörtgen) açıklar. Her düğümün (kök düğüm hariç) bir ana düğümü vardır. Her düğüm, o anda gösterilen diğer düğümlere göre değerlerine göre boyutlandırılır ve renklendirilir.

Veri tablosunda aşağıdaki biçimde dört sütun olmalıdır:

  • Sütun 0 - [dize] Bu düğümün kimliği. Bu, boşluklar ve bir dizenin sahip olabileceği uzunluklar da dahil olmak üzere geçerli bir JavaScript dizesi olabilir. Bu değer, düğüm başlığı olarak görüntülenir.
  • Sütun 1 - [dize] - Üst düğümün kimliği. Bu bir kök düğümse bunu boş bırakın. Ağaç eşlemesi başına yalnızca bir köke izin verilir.
  • Sütun 2 - [sayı] - Düğümün boyutu. Tüm pozitif değerlere izin verilir. Bu değer, düğümün boyutunu belirtir. Şu anda gösterilen diğer tüm düğümlere göre hesaplanır. Yaprak olmayan düğümlerde bu değer yoksayılır ve tüm alt öğelerinin boyutundan hesaplanır.
  • Sütun 3 - [isteğe bağlı, sayı] - Bu düğüm için renk hesaplamak üzere kullanılan isteğe bağlı bir değer. Pozitif veya negatif tüm değerlere izin verilir. Renk değeri önce minColorValue ile maxColorValue arasındaki bir ölçekte yeniden hesaplanır ve ardından düğüm, minColor ile maxColor arasındaki gradyandan bir renk atanır.

Yapılandırma Seçenekleri

Ad
Enablehighlight (50 sürümü için)

Öğelerin, vurgulanan efektleri gösterip göstermeyeceğini belirler. Varsayılan tetikleyici fareyle üzerine gelindiğindedir. Tetikleyici, eventsConfig ile yapılandırılabilir. true olarak ayarlanırsa farklı öğeler için vurgulama çeşitli highlightColor seçenekleri kullanılarak belirtilebilir.

Tür: boole
Varsayılan: false
eventsConfig (v50+ için)

Ağaç haritası etkileşimlerini tetiklemek için etkinlik yapılandırması. Etkileşimleri yapılandırmak için biçim:

eventsConfig: {
  interaction1: undefined, // or missing
  interaction2: [], // disable
  interaction3: [
    'mouse_event',
    'optional_key1',
    'optional_key2',
    'optional_key3',
    'optional_key4'
  ],
  ...,
}
Yapılandırma dizisi tanımlanmamışsa veya bir etkileşim için eksikse varsayılan kullanılır.
Yapılandırma boş bir diziyse etkileşim devre dışı bırakılır.
Geçerli bir yapılandırma için mouse_event gereklidir ve desteklenen bir fare etkinliği olmalıdır. Ardından en fazla dört isteğe bağlı tuş değiştirici ekleyebilirsiniz.
Desteklenen etkileşimler:
vurgulama, vurgulamayı kaldırma, kapsamlı görünüm, ayrıntılı inceleme.
Desteklenen fare etkinlikleri:
"click", "contextmenu", "dblclick", "mouseout", "mouseover". 'contextmenu' parametresi sağ tıklamaya karşılık gelir.
Desteklenen fare etkinliği değiştirici tuşları:
"altKey", "ctrlKey", "metaKey", "shiftKey".
Geçerli yapılandırmayı alın:
Arama yöntemi getEventsConfig().
Ağaca tırmanmak için Control+Shift+Right_Click kullanım örneği:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
Tür: nesne
Varsayılan: 
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
yazı tipi rengi

Metin rengi. Bir HTML renk değeri belirtin.

Tür: dize
Varsayılan: #yyyy
yazı tipiAile

Tüm metinler için kullanılacak yazı tipi ailesi.

Tür: dize
Varsayılan: otomatik
yazı tipi boyutu

Tüm metinlerin nokta cinsinden yazı tipi boyutu.

Tür: sayı
Varsayılan: 12
Zorunlu iFrame

Grafiği satır içi bir çerçevenin içine çizer. (IE8'de bu seçeneğin yoksayıldığını unutmayın; tüm IE8 grafikleri i-frame'ler ile çizilmiştir.)

Tür: boole
Varsayılan: false
başlık Rengi

Her bir düğüm için başlık bölümünün rengi. Bir HTML renk değeri belirtin.

Tür: dize
Varsayılan: #988f86
başlık yüksekliği

Her bir düğüm için başlık bölümünün piksel cinsinden yüksekliği (sıfır olabilir).

Tür numarası
Varsayılan: 0
başlıkVurgu Rengi

Üzerine gelinen düğümün başlığının rengi. Bir HTML renk değeri veya boş değeri belirtin. Boşsa bu değer %35 oranında headerColor azaltılır.

Tür: dize
Varsayılan: null
vurgulamaOnFareOver (v50+ için kullanımdan kaldırıldı)

50 ve sonraki sürümler için kullanımdan kaldırıldı. 50 ve sonraki sürümler için lütfen enableHighlight kullanın. Fareyle üzerine gelindiğinde öğelerin vurgulanmış efektler gösterip göstermeyeceğini belirler. true olarak ayarlanırsa farklı öğeler için vurgulama çeşitli highlightColor seçenekleri kullanılarak belirtilebilir.

Tür: boole
Varsayılan: false
ipucu ipucu

maxPostDepth 1'den büyük olduğunda mevcut derinliğin altındaki düğümlerin gösterilmesine neden olan hintOpacity metriğinin ne kadar şeffaf olması gerektiği belirtilir. 0 ile 1 arasında olmalıdır. Değer ne kadar yüksek olursa düğümün derinliklerine iner.

Tür: sayı
Varsayılan: 0,0
maksRenk

Sütun 3 değeri maxColorValue olan bir dikdörtgenin rengi. Bir HTML renk değeri belirtin.

Tür: dize
Varsayılan: #00dd00
maksDepth

Geçerli görünümde gösterilecek maksimum düğüm düzeyi sayısı. Seviyeler geçerli uçağa düzleştirilir. Ağaçta bunun ötesinde seviyeler varsa bunları görmek için yukarı veya aşağı hareket etmeniz gerekir. Ayrıca, altında bu düğümlerin içindeki gölgeli dikdörtgenler olarak maxPostDepth seviye görebilirsiniz.

Tür: sayı
Varsayılan: 1
MaksimumVurgu Rengi

3. sütunda en büyük değere sahip düğüm için kullanılacak vurgu rengi. Bir HTML renk değeri veya null belirtin. Boşsa bu değer, %35 azaltılmış maxColor değeri olur

Tür: dize
Varsayılan: null
maksimumPostDepth

maxDepth dışında "ipuçlu" şekilde gösterilecek düğüm sayısı. İpucu verilen düğümler, maxDepth sınırı içinde bir düğüm içinde bulunan gölgeli dikdörtgenler olarak gösterilir.

Tür: sayı
Varsayılan: 0
Maksimum Renk Değeri

3. sütunda izin verilen maksimum değer. Bundan büyük olan tüm değerler bu değere kırpılır. Boş değerine ayarlanırsa sütundaki maksimum değere ayarlanır.

Tür: sayı
Varsayılan: null
orta renk

maxColorValue ile minColorValue arasında ortasında 3 sütun bulunan bir dikdörtgenin rengi. Bir HTML renk değeri belirtin.

Tür: dize
Varsayılan: #000000
Vurgu Rengi

minColorValue ve maxColorValue ortanca değerinin yakınındaki sütun 3 değerine sahip düğüm için kullanılacak vurgu rengi. Bir HTML renk değeri veya boş değeri belirtin. Boşsa bu değer, %35 hafifletilen midColor olur.

Tür: dize
Varsayılan: null
minrenk

Sütun 3 değeri minColorValue olan bir dikdörtgenin rengi. Bir HTML renk değeri belirtin.

Tür: dize
Varsayılan: #dd0000
minVurgu Rengi

minColorValue için en yakın sütun 3 değerine sahip olan düğüm için vurgu rengi. Bir HTML renk değeri veya boş değeri belirtin. Boşsa bu değer, %35 azaltılmış minColor değeri olur

Tür: dize
Varsayılan: null
minyonRenkDeğeri

3. sütunda izin verilen minimum değer. Bunun altındaki tüm değerler bu değerle kırpılır. Boş değerine ayarlandığında, sütundaki minimum değer olarak hesaplanır.

Tür: sayı
Varsayılan: null
renksiz

Bir düğümün 3. sütun için bir değeri olmadığında ve bir düğüm bir yapraksa (veya yalnızca yapraksa) dikdörtgen için kullanılacak renk. Bir HTML renk değeri belirtin.

Tür: dize
Varsayılan: #000000
renksizVurgulama

Vurgulandığında "hayır" rengi dikdörtgen için kullanılacak renk. Bir HTML renk değeri veya null belirtin. Boşsa bu, %35 azaltılmış noColor değeridir.

Tür: dize
Varsayılan: null
program ölçeği

Grafiğin üst kısmı boyunca minColor ile maxColor arasında renk gradyanı ölçeğinin gösterilip gösterilmeyeceği. Ölçeği göstermek için true değerini belirtin.

Tür: boole
Varsayılan: false
Araç ipuçlarını göster

İpuçlarının gösterilip gösterilmeyeceği.

Tür: boole
Varsayılan: true
metin stili

Ağaç grafik gibi içerik alanında metin içeren belirli grafikler için metin stilini belirten bir nesne. Nesnenin biçimi şu şekildedir: 

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color, herhangi bir HTML renk dizesi olabilir. Örneğin: 'red' veya '#00cc00'. fontName ve fontSize hükümlerine de bakın.

Tür: nesne
Varsayılan: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
başlık

Grafiğin üzerinde görüntülenecek metin.

Tür: dize
Varsayılan: başlık yok
başlıkMetin Stili

Başlık metin stilini belirten bir nesne. Nesnenin biçimi şu şekildedir:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color, herhangi bir HTML renk dizesi olabilir. Örneğin: 'red' veya '#00cc00'. fontName ve fontSize hükümlerine de bakın.

Tür: nesne
Varsayılan: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
AğırlıklıOrtalamaForAggregation

Toplama için ağırlıklı ortalamaların kullanılıp kullanılmayacağını belirtir.

Tür: boole
Varsayılan: false

Yöntemler

Yöntem
draw(data, options)

Grafiği çizer.

Dönüş Türü: yok
getEventsConfig() (for v50+)

Mevcut etkileşim yapılandırmasını döndürür. Bu, eventsConfig yapılandırma seçeneğini doğrulamak için kullanılabilir

Dönüş Türü: Nesne
{ // An empty array (i.e. []) means the interaction is disabled.
  highlight: string[],
  unhighlight: string[],
  rollup: string[],
  drilldown: string[] }
getSelection()

Standart getSelection() uygulaması. Seçilen öğeler düğümdür. Tek seferde yalnızca bir düğüm seçilebilir.

Dönüş Türü: Seçim öğeleri dizisi
setSelection()

Standart setSelection() uygulaması. Seçilen öğeler düğümdür. Tek seferde yalnızca bir düğüm seçilebilir.

Dönüş Türü: yok
goUpAndDraw()

Ağacı bir seviye yukarı taşıyın ve yeniden çizin. Düğüm kök düğümse hata çıkmaz. Kullanıcı bir düğümü sağ tıkladığında bu işlem otomatik olarak tetiklenir.

Dönüş Türü: yok
getMaxPossibleDepth()

Geçerli görünüm için mümkün olan maksimum derinliği döndürür.

İade Türü: numara
clearChart()

Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır.

Dönüş Türü: yok

Etkinlikler

Yapılandırılabilir etkinlik tetikleyicileri için lütfen eventsConfig bölümüne bakın.
Ad
onmouseover

Kullanıcı bir düğümün üzerine geldiğinde tetiklenir. Etkinlik işleyici, veri tablosundaki ilgili girişin satır dizini iletir.

Özellikler: satır
highlight (for v50+)

Kullanıcı bir düğümü vurguladığında tetiklenir. Varsayılan tetikleyici fareyle üzerine gelme işlemidir. v50+ için eventsConfig ile yapılandırılabilir. Etkinlik işleyici, veri tablosunda ilgili girişin satır dizini iletir.

Özellikler: satır
onmouseout

Kullanıcı düğümün dışına çıktığında tetiklenir. Etkinlik işleyici, veri tablosundaki ilgili girişin satır dizini iletir.

Özellikler: satır
unhighlight (for v50+)

Kullanıcı bir düğümü vurguladığında tetiklenir. Varsayılan tetikleyici fareyle üzerine gelme işlemidir. v50+ için eventsConfig ile yapılandırılabilir. Etkinlik işleyici, veri tablosunda ilgili girişin satır dizini iletir.

Özellikler: satır
ready

Grafik, harici yöntem çağrıları için hazır olduğunda tetiklenir. Çizdikten sonra grafikle ve arama yöntemleriyle etkileşimde bulunmak isterseniz draw yöntemini çağırmadan önce bu etkinlik için bir işleyici oluşturmanız ve bunları yalnızca etkinlik tetiklendikten sonra kullanmanız gerekir.

Özellikler: Yok
rollup

Kullanıcı tekrar ağaçta dolaştığında tetiklenir. Varsayılan tetikleyici sağ tıklamaktır. v50+ için eventsConfig ile yapılandırılabilir. Etkinlik işleyiciye iletilen satır özelliği, kullanıcının gezindiği satır değil, kullanıcının arama yaptığı düğüm satırıdır.

Özellikler: satır
select

Kullanıcı ayrıntılı inceleme yaptığında veya bir düğümü yuvarladığında tetiklenir. setSelection() veya goUpAndDraw() yöntemi çağrıldığında da tetiklenir. Hangi düğümün seçildiğini öğrenmek için getSelection() yöntemini çağırın.

Özellikler: yok
drilldown (for v50+)

Kullanıcı ağaçta daha derine ulaştığında tetiklenir. Varsayılan tetikleyici tıklanıyor. eventsConfig ile v50+ için yapılandırılabilir. Hangi düğümün tıklandığını öğrenmek için getSelection() numaralı telefonu arayın.

Özellikler: yok

Veri Politikası

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