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ış

Her düğümün sıfır veya daha fazla alt ve bir üst öğesi (üst öğesi olmayan kök hariç) olabileceği bir veri ağacının görsel temsili. Her düğüm, atadığınız değerlere göre boyutlandırılmış ve renklendirilmiş bir dikdörtgen olarak gösterilir. Boyutlar ve renkler, grafikteki diğer tüm düğümlere göre belirlenir. Aynı anda kaç seviyenin gösterileceğini belirtebilir ve isteğe bağlı olarak ipucu kullanarak daha derin seviyeler görüntüleyebilirsiniz. Düğüm yaprak düğümse boyut ve renk belirtebilirsiniz. Yaprak değilse yaprak düğümleri için sınırlayıcı kutu olarak gösterilir. Varsayılan davranış, kullanıcı bir düğümü sol tıkladığında ağaçta aşağı, grafiği sağ tıkladığında ağaçta tekrar yukarı gitmektir.

Grafiğin toplam boyutu, sayfanıza eklediğiniz kapsayıcı öğenin boyutuna göre belirlenir. Adları gösterilemeyecek kadar uzun olan 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 belirli öğeler için böyle bir durum söz konusu olduğunda kullanılacak belirli renkler ayarlayabilirsiniz. Vurgulamayı etkinleştirmek için highlightOnMouseOver:true (v49 veya önceki sürümler için) veya enableHighlight: true (v50 ve sonraki sürümler için) olarak ayarlayın. Ardından, çeşitli HighlightColor seçeneklerini kullanarak öğeleri vurgulamak için kullanılacak 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ı

Varsayılan olarak, ağaç eşleme hücresinin etiketini gösteren ağaç ipuçları temel düzeydedir. Hücreler etiketleri içeremeyecek kadar küçük olduğunda bu yöntem faydalıdır, ancak bunları bu bölümde açıklandığı gibi daha ayrıntılı şekilde özelleştirebilirsiniz.

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

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

  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 herhangi bir JavaScript olabilir. Genellikle, veri değerlerine göre değişiklik gösteren ipuçları istersiniz. Aşağıdaki örnekte, veri tablosundaki her alana nasıl erişileceği gösterilmektedir.

Fareyle yukarıdaki ağaç haritada bulunan hücrelerin üzerine gelirseniz her hücre için farklı bir ipucu görürsünüz. Treemap ipucu işlevlerinin tümü üç değer alır: row, size ve value.

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

showFullTooltip'de döndürdüğümüz dize, beş satırlık bir HTML kutusudur:

  • 1. satır, veri tablosundaki uygun satırı göstererek data.getValue kullanımının kolay olmasını sağlar.
  • 2. satır, yalnızca row parametresi olan satırın hangisi olduğunu gösterir.
  • 3. satır, veri tablosunun 3. sütunundaki bilgileri verir: Bu satırdaki 3. sütunun değerinin toplamı ve alt öğelerden gelen değerler.
  • 4. satır, veri tablosunun 4. sütunundan bilgi verir. Bu değer, 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 paketinin 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 satır bir düğümü (grafikteki bir dikdörtgen) açıklar. Her bir düğümün (kök düğüm hariç) bir üst düğümü vardır. Her düğüm, şu 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 bulunmalıdır:

  • Sütun 0 - [dize] Bu düğümün kimliği. Boşluklar dahil olmak üzere geçerli bir JavaScript dizesi ve bir dizenin barındırabileceği herhangi bir uzunluk olabilir. Bu değer, düğüm başlığı olarak gösterilir.
  • Sütun 1 - [dize] - Üst düğümün kimliği. Bu bir kök düğümse bu alanı boş bırakın. Treemap başına yalnızca bir köke izin verilir.
  • 2. Sütun - [sayı] - Düğümün boyutu. Tüm pozitif değerlere izin verilir. Bu değer, şu anda gösterilen diğer tüm düğümlere göre hesaplanan, düğümün boyutunu belirler. Yaprak olmayan düğümler için bu değer yok sayılır ve tüm alt öğelerinin boyutundan hesaplanır.
  • 3. Sütun - [isteğe bağlı, sayı] - Bu düğümün rengini hesaplamak için kullanılan isteğe bağlı bir değer. Pozitif veya negatif tüm değerlere izin verilir. Renk değeri ilk olarak minColorValue ile maxColorValue arasındaki bir ölçekte yeniden hesaplanır. Daha sonra düğüme minColor ile maxColor arasındaki gradyan üzerinden bir renk atanır.

Yapılandırma Seçenekleri

Ad
etkinleştirVurgula (v50 ve sonraki sürümler için)

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

Tür: boole
Varsayılan: false
eventsConfig (v50 ve sonraki sürümler için)

Ağaç harita etkileşimlerini tetikleyecek etkinlik yapılandırması. Etkileşimleri yapılandırmak için biçimlendirin:

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, isteğe bağlı en fazla dört tuş değiştirici kullanabilirsiniz.
Desteklenen etkileşimler:
vurgulama, vurgulamayı kaldırma, birleştirme, ayrıntılı inceleme.
Desteklenen fare etkinlikleri:
"click", "contextmenu", "dblclick", "mouseout", "mouseover". 'contextmenu' ile sağ tıklamaya karşılık gelir.
Desteklenen etkinlik değiştirici tuşları:
'altKey', 'ctrlKey', 'metaKey', 'shiftKey'.
Geçerli yapılandırmayı alın:
Çağrı yöntemi getEventsConfig().
Ağaçta yukarı çıkmak için Control+Üst Karakter+Right_Click kullanımına örnek:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
Tür: nesne
Varsayılan: 
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
fontColor

Metin rengi. Bir HTML renk değeri belirtin.

Tür: dize
Varsayılan: #DCB
fontFamily

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

Tür: dize
Varsayılan: auto
fontSize

Tüm metin için punto cinsinden yazı tipi boyutu.

Tür: numara
Varsayılan: 12
forceIFrame

Grafiği bir satır içi çerçevenin içine çizer. (IE8'de bu seçeneğin yoksayıldığını unutmayın. Tüm IE8 grafikleri, iç çerçeveler kullanılarak çizilir.)

Tür: boole
Varsayılan: false
headerColor

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

Tür: dize
Varsayılan: #988f86
headerHeight

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

Numarayı tür
Varsayılan: 0
headerHighlightColor

Üzerine gelinen düğümün başlığının rengi. Bir HTML renk değeri veya null belirtin. Boş bırakılırsa bu değer, headerColor %35 aydınlatılır.

Tür: dize
Varsayılan: null
vurgulamaOnMouseOver (v50 ve sonraki sürümler için kullanımdan kaldırıldı)

v50 ve sonraki sürümler için desteği sonlandırıldı. v50 ve sonrası için lütfen enableHighlight kullanın. Fareyle üzerine gelindiğinde öğelerin vurgulanan efektleri gösterip göstermeyeceğini belirler. true olarak ayarlanırsa farklı öğeler için vurgulama, çeşitli highlightColor seçenekleriyle belirtilebilir.

Tür: boole
Varsayılan: false
hintOpacity

maxPostDepth, 1'den büyük olduğunda ve mevcut derinliğin altındaki düğümlerin gösterilmesine neden olduğunda hintOpacity, ne kadar şeffaf olması gerektiğini belirtir. 0 ile 1 arasında olmalıdır. Değer ne kadar yüksekse düğüm o kadar soluklaşır.

Tür: numara
Varsayılan: 0,0
maxColor

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

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

Geçerli görünümde gösterilecek maksimum düğüm düzeyi sayısı. Seviyeler mevcut düzlemde hizalanır. Ağacınızda bundan daha fazla seviye varsa bunları görmek için yukarı veya aşağı gitmeniz gerekir. Ayrıca, bu düğümlerin içinde gölgeli dikdörtgenler olarak bunun altındaki maxPostDepth düzeylerini görebilirsiniz.

Tür: numara
Varsayılan: 1
maxHighlightColor

3. sütundaki en büyük değere sahip düğüm için kullanılacak vurgu rengi. Bir HTML renk değeri veya null belirtin. Boş ise bu değer, %35 aydınlatılmış maxColor değeri olacaktır

Tür: dize
Varsayılan: null
maxPostDepth

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

Tür: numara
Varsayılan: 0
maxColorValue

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

Tür: numara
Varsayılan: null
midColor

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

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

minColorValue ve maxColorValue ortanca değerine yakın bir sütun 3 değerine sahip düğüm için kullanılacak vurgu rengi. Bir HTML renk değeri veya null belirtin. Boşsa bu değer, %35 aydınlatılmış midColor değeri olacaktır.

Tür: dize
Varsayılan: null
minColor

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

Tür: dize
Varsayılan: #dd0000
minHighlightColor

minColorValue değerine en yakın olan 3. sütun değerine sahip düğüm için kullanılacak vurgu rengi. Bir HTML renk değeri veya null belirtin; boşsa bu değer, %35 aydınlatılmış minColor değeri olacaktır

Tür: dize
Varsayılan: null
minColorValue

3. sütunda izin verilen minimum değerdir. Bundan küçük tüm değerler, bu değere göre kırpılır. Null değerine ayarlanırsa sütundaki minimum değer olarak hesaplanır.

Tür: numara
Varsayılan: null
noColor

3. sütunda değer yoksa ve bu düğüm yapraksa (veya yalnızca yapraklar içeriyorsa) dikdörtgen için kullanılacak renk. Bir HTML renk değeri belirtin.

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

Vurgulandığında "hayır" renkli bir dikdörtgen için kullanılacak renk. Bir HTML renk değeri veya boş değer belirtin. Boşsa bu değer, %35 aydınlatılmış noColor değeri olacaktır.

Tür: dize
Varsayılan: null
showScale

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

Tür: boole
Varsayılan: false
showTooltips

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

Tür: boole
Varsayılan: true
textStyle

Ağaç harita 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'. Ayrıca bkz. fontName ve fontSize.

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

Grafiğin üzerinde gösterilecek metin.

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

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'. Ayrıca bkz. fontName ve fontSize.

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

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

Tür: boole
Varsayılan: false

Yöntemler

Yöntem
draw(data, options)

Grafiği çizer.

Return Type (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

Return Type (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üğüm. 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üğüm. Tek seferde yalnızca bir düğüm seçilebilir.

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

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

Return Type (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.

Return Type (Dönüş Türü): yok

Etkinlikler

Yapılandırılabilir etkinlik tetikleyicileri için lütfen eventsConfig sayfasına bakın.
Ad
onmouseover

Kullanıcı faresini bir düğümün üzerine getirdiğinde tetiklenir. Etkinlik işleyici, veri tablosundaki ilgili girişin satır dizinini aktarır.

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

Kullanıcı bir düğümü vurguladığında tetiklenir. Varsayılan tetikleyici fareyle üzerine gelme şeklindedir. v50 ve sonraki sürümler için eventsConfig ile yapılandırılabilir. Etkinlik işleyici, veri tablosundaki ilgili girişin satır dizinini aktarır.

Özellikler: satır
onmouseout

Kullanıcı faresini bir düğümden çektiğinde tetiklenir. Etkinlik işleyici, veri tablosundaki ilgili girişin satır dizinini aktarır.

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

Kullanıcı bir düğümü vurguladığında tetiklenir. Varsayılan tetikleyici farenin çekilmesidir. v50 ve sonraki sürümler için eventsConfig ile yapılandırılabilir. Etkinlik işleyici, veri tablosundaki ilgili girişin satır dizinini aktarır.

Özellikler: satır
ready

Grafik, harici yöntem çağrıları için hazır olduğunda tetiklenir. Grafikle etkileşim kurmak ve çizdikten sonra yöntemleri çağırmak isterseniz draw 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.

Özellikler: Yok
rollup

Kullanıcı, ağaçta tekrar yukarı gittiğinde tetiklenir. Varsayılan tetikleyici sağ tıklamadır. v50+ için eventsConfig ile yapılandırılabilir. Etkinlik işleyiciye iletilen satır özelliği, kullanıcının gittiği kaynak değil, kullanıcının gittiği düğümün satırıdır.

Özellikler: satır
select

Kullanıcı bir düğümü ayrıntılı olarak incelediğinde veya yukarı çektiğinde tetiklenir. setSelection() veya goUpAndDraw() yöntemi çağrıldığında da tetiklenir. Hangi düğümün seçildiğini öğrenmek için getSelection() numaralı telefonu arayın.

Özellikler: yok
drilldown (for v50+)

Kullanıcı ağacın daha derinlerine gittiğinde tetiklenir. Varsayılan tetikleyici tıklamadır. v50 ve sonraki sürümler için eventsConfig ile 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şlenip oluşturulur. Herhangi bir sunucuya veri gönderilmez.