Görselleştirme: Pasta Grafik

Genel bakış

SVG veya VML kullanılarak tarayıcıda oluşturulan bir pasta grafik. Dilimlerin üzerine geldiğinizde ipuçlarını görüntüler.

Ö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':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

3D Pasta Grafik Oluşturma

is3D seçeneğini true olarak ayarlarsanız pasta grafiğiniz üç boyutu varmış gibi çizilir:

is3D, varsayılan olarak false olduğundan burada açıkça true olarak ayarlandı: 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Donut Grafik Oluşturma

Çark grafik, merkezinde delik olan bir pasta grafiktir. pieHole seçeneğini kullanarak halka grafikler oluşturabilirsiniz:

pieHole seçeneği, delik ve grafik arasındaki yarıçap oranına karşılık gelen 0 ile 1 arasında bir sayı olarak ayarlanmalıdır. 0,4 ile 0,6 arasındaki sayılar çoğu grafikte en iyi sonucu verir. 1'e eşit veya 1'den büyük değerler yok sayılır ve 0 değeri pie deliğinizi tamamen kapatır.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

pieHole ve is3D seçeneklerini birleştiremezsiniz. Bunu yaparsanız pieHole yoksayılır.

Google Grafikler'in, etiketi dilimin ortasına mümkün olduğunca yakın yerleştirmeye çalıştığını unutmayın. Tek bir dilimden oluşan bir donut grafiğiniz varsa dilimin ortası donut deliğine girebilir. Bu durumda, etiketin rengini değiştirin:
Seçenekler
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
Tam HTML
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donut_single" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Pasta Grafiği Döndürme

Varsayılan olarak pasta grafikler, ilk dilimin sol kenarıyla başlar ve yukarıyı gösterir. Bu ayarı pieStartAngle seçeneğiyle değiştirebilirsiniz:

Burada, pieStartAngle: 100 seçeneği ile grafiği saat yönünde 100 derece döndürürüz. (Bu nedenle, söz konusu açı "İtalyanca" etiketini dilime sığdırdığı için seçilmiştir.)

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Bir Dilimi Patlatma

slices seçeneğinin offset özelliğini kullanarak pasta dilimlerini grafiğin geri kalanından ayırabilirsiniz:

Bir dilimi ayırmak için slices nesnesi oluşturun ve uygun dilim sayısına 0 ile 1 arasında bir offset atayın. Aşağıda, 4 (Gceratça), 12 (Marathice), 14 (Oriya) ve 15 (Pencapça) dilimlere giderek daha büyük ofsetler atıyoruz: 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Dilimleri Kaldırma

Bir dilimi çıkarmak için rengi 'transparent' olarak değiştirin:

Ayrıca, grafiği 135 derece döndürmek için pieStartAngle, metni dilimlerden kaldırmak için pieSliceText ve ipuçlarını devre dışı bırakmak için tooltip.trigger kullandık:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="pacman" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Dilim Görünürlük Eşiği

Bir pasta diliminin tek tek oluşturulması için eşik olarak bir değer ayarlayabilirsiniz. Bu değer, grafiğin bir kısmına karşılık gelir (tüm grafiğin değeri 1'dir). Bu eşiği bütünün bir yüzdesi olarak ayarlamak için istenen yüzdeyi 100'e bölün (%20'lik bir eşik için değer 0,2 olur). 

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

Bu eşikten küçük tüm dilimler, tek bir "Diğer" diliminde birleştirilir ve eşiğin altındaki tüm dilimlerin birleşik değerine sahip olur. 

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Yükleniyor

google.charts.load paketinin adı: "corechart".

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

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

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

Veri Biçimi

Satırlar: Tablodaki her satır bir dilimi temsil eder.

Sütunlar:

  Sütun 0 1. Sütun ... Sütun N (isteğe bağlı)
Amaç: Dilim etiketleri Dilim değerleri ... İsteğe bağlı roller
Veri Türü: dize sayı ...
Rol: alan veri ...
İsteğe bağlı sütun rolleri: Yok Yok ...

Yapılandırma Seçenekleri

Ad
backgroundColor

Grafiğin ana alanı için arka plan rengi. Basit bir HTML renk dizesi (ör. 'red' veya '#00cc00') veya aşağıdaki özelliklere sahip bir nesne olabilir.

Tür: dize veya nesne
Varsayılan: 'white'
backgroundColor.stroke

HTML renk dizesi olarak grafik kenarlığının rengi.

Tür: dize
Varsayılan: '#666'
backgroundColor.strokeWidth

Piksel cinsinden kenarlık genişliği.

Tür: numara
Varsayılan: 0
backgroundColor.fill

HTML renk dizesi olarak grafik dolgu rengi.

Tür: dize
Varsayılan: 'white'
chartArea

Grafik alanının yerleşimini ve boyutunu yapılandırmak için üyelere sahip bir nesne (eksen ve göstergeler hariç, grafiğin kendisinin çizildiği yer). İki biçim desteklenir: bir sayı veya ardından % gelen sayı. Basit bir sayı, piksel cinsinden bir değerdir, ardından % gelen sayının ardından gelen bir yüzdedir. Örnek: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Tür: nesne
Varsayılan: null
chartArea.backgroundColor
Grafik alanının arka plan rengi. Kullanılan dizeler onaltılık dize (ör. "#fdc") veya İngilizce renk adı. Bir nesne kullanıldığında aşağıdaki özellikler sağlanabilir:
  • stroke: Onaltılık dize veya İngilizce renk adı olarak sağlanan renk.
  • strokeWidth: Varsa belirtilen genişlikteki (ve stroke rengiyle) grafik alanının etrafına bir kenarlık çizer.
Tür: dize veya nesne
Varsayılan: 'white'
chartArea.left

Grafiğin sol kenarlıktan ne kadar uzağa çizileceği.

Tür: sayı veya dize
Varsayılan: auto
chartArea.top

Grafiğin üst kenarlıktan ne kadar uzakta çizileceği.

Tür: sayı veya dize
Varsayılan: auto
chartArea.width

Grafik alanı genişliği.

Tür: sayı veya dize
Varsayılan: auto
chartArea.height

Grafik alanı yüksekliği.

Tür: sayı veya dize
Varsayılan: auto
renkler

Grafik öğeleri için kullanılacak renkler. Her öğenin bir HTML renk dizesi olduğu bir dize dizisi. Örneğin: colors:['red','#004411'].

Tür: Dize dizisi
Varsayılan: varsayılan renkler
enableInteractivity

Grafiğin kullanıcı tabanlı etkinlikler yayınlaması veya kullanıcı etkileşimine tepki verip vermemesi. False (yanlış) değerine ayarlanırsa grafik, "select" ya da diğer etkileşime dayalı etkinlikleri bildirmez (ancak "hazır" veya hata etkinlikleri ayarlamaz) ve fareyle üzerine gelindiğinde görüntülenen metni görüntülemez veya kullanıcı girişine bağlı olarak başka bir şekilde değişmez.

Tür: boole
Varsayılan: true
fontSize

Grafikteki tüm metnin piksel cinsinden varsayılan yazı tipi boyutu. Belirli grafik öğelerine ait özellikleri kullanarak bunu geçersiz kılabilirsiniz.

Tür: numara
Varsayılan: auto
fontName

Grafikteki tüm metinler için varsayılan yazı tipi yüzü. Belirli grafik öğelerine ait özellikleri kullanarak bunu geçersiz kılabilirsiniz.

Tür: dize
Varsayılan: "SFTP"
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
yükseklik

Grafiğin piksel cinsinden yüksekliği.

Tür: numara
Varsayılan: kapsayıcı öğenin yüksekliği
3D

True (doğru) ise üç boyutlu bir grafik görüntüler.

Tür: boole
Varsayılan: false
harita açıklamaları

Açıklamanın çeşitli yönlerini yapılandıran üyeleri içeren bir nesne. Bu nesnenin özelliklerini belirtmek için burada gösterildiği gibi nesne değişmez değer gösterimini kullanabilirsiniz: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tür: nesne
Varsayılan: null
legend.alignment

Açıklamaların hizalanması. Aşağıdakilerden biri olabilir:

  • 'start' - Açıklama için ayrılan alanın başlangıcına hizalanır.
  • "center": Açıklama için ayrılan alanın ortasındadır.
  • 'end' - Açıklama için ayrılan alanın sonuna hizalanır.

Başlangıcı, ortası ve bitişi, göstergenin stiline (dikey veya yatay) bağlıdır. Örneğin, "sağ" açıklamalarda "start" ve "end" öğeleri sırasıyla üst ve aşağıda yer alır. "Üst" gösterge için "start" ve "end" sırasıyla alanın sol ve sağında yer alır.

Varsayılan değer, göstergenin konumuna bağlıdır. "Alt" göstergeler için varsayılan değer "center", diğer açıklamalar ise "start"tır.

Tür: dize
Varsayılan: auto
legend.position

Açıklamanın konumu. Aşağıdakilerden biri olabilir:

  • 'bottom' - Göstergeyi grafiğin altında gösterir.
  • "labeled" (etiketli) - Dilimleri veri değerlerine bağlayan çizgiler çizer.
  • 'left' - Grafiğin sol tarafındaki göstergeyi görüntüler.
  • "none" (hiçbiri): Açıklama görüntülemez.
  • 'right' - Grafiğin sağ tarafındaki göstergeyi görüntüler.
  • 'top' (üstte): Grafiğin üzerindeki göstergeyi görüntüler.
Tür: dize
Varsayılan: 'right'
legend.maxLines

Göstergedeki maksimum satır sayısı. Açıklamanıza satır eklemek için bunu birden büyük bir sayıya ayarlayın. Not: Oluşturulan gerçek satır sayısını belirlemek için kullanılan kesin mantık hâlâ değişkendir.

Bu seçenek şu anda yalnızca efsane.position "top" olduğunda çalışır.

Tür: numara
Varsayılan: 1
legend.textStyle

Açıklama 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>}
pieHole

0 ile 1 arasında ise halka grafik görüntüler. Yarıçapı grafiğin yarıçapının number ile çarpımına eşit olan delik.

Tür: numara
Varsayılan: 0
pieSliceBorderColor

Dilim kenarlıklarının rengi. Yalnızca grafik iki boyutlu olduğunda geçerlidir.

Tür: dize
Varsayılan: 'white'
pieSliceText

Dilimde görüntülenen metnin içeriği. Aşağıdakilerden biri olabilir:

  • "percentage" (Yüzde) - Dilim boyutunun toplam içindeki yüzdesi.
  • "değer" - Dilimin nicel değeri.
  • "label" - Dilimin adı.
  • "none" (hiçbiri) - Metin gösterilmez.
Tür: dize
Varsayılan: 'percentage'
pieSliceTextStyle

Dilim metin stilini belirten bir nesne. Nesnenin biçimi şu şekildedir:

{color: <string>, fontName: <string>, fontSize: <number>}

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>}
pieStartAngle

Grafiğin döndürüleceği açı (derece cinsinden). 0 varsayılanı, ilk dilimin en sol kenarını doğrudan yukarı yönlendirir.

Tür: numara
Varsayılan: 0
reverseCategories

True (doğru) ise, dilimleri saat yönünün tersine çizer. Varsayılan olarak saat yönünde çizim yapılır.

Tür: boole
Varsayılan: false
pieResidueSliceColor

sliceGörünürlükThreshold'un altındaki tüm dilimleri içeren kombinasyon diliminin rengi.

Tür: dize
Varsayılan: '#ccc'
pieResidueSliceLabel

sliceVisibilityThreshold'un altındaki tüm dilimleri içeren kombinasyon dilimi için etiket.

Tür: dize
Varsayılan: "Diğer"
dilimler

Her biri, pastadaki karşılık gelen dilimin biçimini açıklayan bir nesne dizisi. Bir dilim için varsayılan değerleri kullanmak istiyorsanız boş bir nesne (ör. {}). Bir dilim veya değer belirtilmezse genel değer kullanılır. Her nesne aşağıdaki özellikleri destekler:

  • color - Bu dilim için kullanılacak renk. Geçerli bir HTML renk dizesi belirtin.
  • offset: Dilimin, pastanın geri kalanından ne kadar ayrılacağı. 0,0 (hiç değil) ile 1,0 (pastanın yarıçapı) arasındadır.
  • textStyle - Bu dilim için genel pieSliceTextStyle değerini geçersiz kılar.

Her biri, dilime belirtilen sırada uygulanan bir nesne dizisi belirtebilir veya her alt öğenin, hangi dilime uygulanacağını gösteren sayısal bir anahtara sahip olduğu bir nesne belirtebilirsiniz. Örneğin, aşağıdaki iki bildirim aynıdır ve ilk dilimi siyah, dördüncüsü kırmızı olarak bildirebilir: 

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
Tür: Nesne dizisi veya iç içe yerleştirilmiş nesneleri olan nesne
Varsayılan: {}
sliceVisibilityThreshold

Pastanın, altında bir dilimin tek tek gösterilmeyeceği kesirli değeri. Bu eşiği geçmeyen tüm dilimler, boyutları tüm boyutlarının toplamı olan tek bir "Diğer" dilimi olarak birleştirilir. Varsayılan olarak yarım dereceden küçük herhangi bir dilimi tek tek gösterilmez. 

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
Tür: numara
Varsayılan: Yarım derece (0,5/360 veya 1/720 veya 0,0014)
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>}
ipucu

Çeşitli ipucu öğelerini yapılandırmak için üyeler içeren bir nesne. Bu nesnenin özelliklerini belirtmek için burada gösterildiği gibi nesne değişmez değer gösterimini kullanabilirsiniz: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Tür: nesne
Varsayılan: null
tooltip.ignoreBounds

true değerine ayarlanırsa ipucu çizimlerinin her tarafta grafik sınırlarının dışına çıkmasına izin verir.

Not: Bu yalnızca HTML ipuçları için geçerlidir. Bu özellik, SVG ipuçlarıyla etkinleştirilirse grafik sınırlarının dışındaki tüm taşmalar kırpılır. Daha fazla ayrıntı için İpucu İçeriğini Özelleştirme bölümüne bakın.

Tür: boole
Varsayılan: false
tooltip.isHtml

Doğru değerine ayarlanırsa (SVG tarafından oluşturulan yerine) HTML ile oluşturulan ipuçlarını kullanın. Daha fazla ayrıntı için İpucu İçeriğini Özelleştirme bölümüne bakın.

Not: HTML ipucu içeriğinin ipucu sütunu veri rolü aracılığıyla özelleştirilmesi balon grafik görselleştirmesi tarafından desteklenmez.

Tür: boole
Varsayılan: false
tooltip.showColorCode

True (doğru) ise ipucundaki dilim bilgilerinin yanında renkli kareler gösterin.

Tür: boole
Varsayılan: false
tooltip.text

Kullanıcı bir pasta diliminin üzerine geldiğinde hangi bilgilerin görüntüleneceği. Aşağıdaki değerler desteklenir:

  • "her ikisi" - [Varsayılan] Hem dilimin mutlak değerini hem de bütünün yüzdesini görüntüler.
  • "değer" - Dilimin yalnızca mutlak değerini gösterir.
  • "Yüzde" - Yalnızca dilimin temsil ettiği bütün yüzdesini görüntüler.
Tür: dize
Varsayılan: "her ikisi"
tooltip.textStyle

İpucu 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>}
tooltip.trigger

İpucunun görüntülenmesine neden olan kullanıcı etkileşimi:

  • "Odak": Kullanıcı, öğenin üzerine geldiğinde ipucu gösterilir.
  • "none" (hiçbiri): İpucu gösterilmez.
  • "seçim": İpucu, kullanıcı öğeyi seçtiğinde gösterilir.
Tür: dize
Varsayılan: 'focus'
genişlik

Grafiğin piksel cinsinden genişliği.

Tür: numara
Varsayılan: kapsayıcı öğenin genişliği

Yöntemler

Yöntem
draw(data, options)

Grafiği çizer. Grafik, yalnızca ready etkinliği etkinleştikten sonra başka yöntem çağrılarını kabul eder. Extended description.

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

İstenen actionID içeren ipucu işlem nesnesini döndürür.

Return Type: nesne
getBoundingBox(id)

id grafik öğesinin sol, üst, genişlik ve yüksekliğini içeren bir nesne döndürür. id biçimi henüz belgelenmemiştir (bunlar, etkinlik işleyicilerin döndürülen değerleridir). Aşağıda bazı örnekler verilmiştir:

var cli = chart.getChartLayoutInterface();

Grafik alanının yüksekliği
cli.getBoundingBox('chartarea').height
Bir çubuk veya sütun grafiğin ilk serisindeki üçüncü çubuğun genişliği
cli.getBoundingBox('bar#0#2').width
Pasta grafiğin beşinci dilimindeki sınırlayıcı kutu
cli.getBoundingBox('slice#4')
Bir dikey (ör. sütun) grafiğin grafik verileri için sınırlayıcı kutu:
cli.getBoundingBox('vAxis#0#gridline')
Yatay (ör. çubuk) bir grafiğin grafik verileri için sınırlayıcı kutu:
cli.getBoundingBox('hAxis#0#gridline')

Değerler, grafiğin kapsayıcısına bağlıdır. Grafik çizildikten sonra bunu çağırın.

Return Type: nesne
getChartAreaBoundingBox()

Grafik içeriğinin sol, üst, genişlik ve yüksekliğini içeren nesneyi döndürür (ör. etiketler ve açıklamalar hariç):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

Değerler, grafiğin kapsayıcısına bağlıdır. Grafik çizildikten sonra bunu çağırın.

Return Type: nesne
getChartLayoutInterface()

Grafiğin ve öğelerinin ekrandaki yerleşimiyle ilgili bilgileri içeren bir nesneyi döndürür.

Döndürülen nesnede aşağıdaki yöntemler çağrılabilir:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Grafik çizildikten sonra bunu çağırın.

Return Type: nesne
getHAxisValue(xPosition, optional_axis_index)

Grafik kapsayıcısının sol kenarından piksel uzaklığı olan xPosition yatay veri değerini döndürür. Negatif olabilir.

Örnek: chart.getChartLayoutInterface().getHAxisValue(400).

Grafik çizildikten sonra bunu çağırın.

İade Türü: numara
getImageURI()

Grafiği resim URI'si olarak serileştirilmiş şekilde döndürür.

Grafik çizildikten sonra bunu çağırın.

Bkz. PNG Grafiklerini Yazdırma.

Return Type: dize
getSelection()

Seçilen grafik varlıklarından oluşan bir dizi döndürür. Seçilebilir varlıklar, dilimler ve açıklama girişleridir. Bu grafik için aynı anda yalnızca bir öğe seçilebilir. Extended description .

Dönüş Türü: Seçim öğeleri dizisi
getVAxisValue(yPosition, optional_axis_index)

yPosition konumundaki dikey veri değerini döndürür. Bu değer, grafik kapsayıcısının üst kenarından aşağı doğru piksel uzaklığıdır. Negatif olabilir.

Örnek: chart.getChartLayoutInterface().getVAxisValue(300).

Grafik çizildikten sonra bunu çağırın.

İade Türü: numara
getXLocation(dataValue, optional_axis_index)

Grafik kapsayıcısının sol kenarına göre dataValue piksel x koordinatını döndürür.

Örnek: chart.getChartLayoutInterface().getXLocation(400).

Grafik çizildikten sonra bunu çağırın.

İade Türü: numara
getYLocation(dataValue, optional_axis_index)

Grafik kapsayıcısının üst kenarına göre dataValue piksel y koordinatını döndürür.

Örnek: chart.getChartLayoutInterface().getYLocation(300).

Grafik çizildikten sonra bunu çağırın.

İade Türü: numara
removeAction(actionID)

İstenen actionID değerini içeren ipucu işlemini grafikten kaldırır.

İade Türü: none
setAction(action)

Kullanıcı işlem metnini tıkladığında yürütülecek bir ipucu işlemi ayarlar.

setAction yöntemi, bir nesneyi işlem parametresi olarak alır. Bu nesne 3 özellik belirtmelidir: id - ayarlanan işlemin kimliği, text —işleme ilişkin ipucunda görünmesi gereken metin ve action - kullanıcı işlem metnini tıkladığında çalıştırılması gereken işlev.

Tüm ipucu işlemleri, grafiğin draw() yöntemi çağrılmadan önce ayarlanmalıdır. Genişletilmiş açıklama.

İade Türü: none
setSelection()

Belirtilen grafik varlıklarını seçer. Önceki seçimleri iptal eder. Seçilebilir varlıklar, dilimler ve açıklama girişleridir. Bu grafik için aynı anda yalnızca bir öğe seçilebilir. Extended description .

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

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

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

Etkinlikler

Bu etkinliklerin nasıl kullanılacağı hakkında daha fazla bilgi için Temel Etkileşim, Etkinlikleri Yönetme ve Etkinleşme Etkinliklerini inceleyin.

Ad
click

Kullanıcı grafiğin içini tıkladığında tetiklenir. Başlığın, veri öğelerinin, gösterge girişlerinin, eksenlerin, kılavuz çizgilerinin veya etiketlerin ne zaman tıklandığını tanımlamak için kullanılabilir.

Özellikler: targetID
error

Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir.

Özellikler: kimlik, mesaj
onmouseover

Kullanıcı fareyle bir görsel öğenin üzerine geldiğinde tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri verir. Bir dilim veya açıklama girişi, veri tablosundaki bir satırla ilişkilidir (sütun dizini null).

Özellikler: satır, sütun
onmouseout

Kullanıcı faresini görsel bir öğeden uzaklaştırdığında tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri verir. Bir dilim veya açıklama girişi, veri tablosundaki bir satırla ilişkilidir (sütun dizini null).

Özellikler: satır, sütun
ready

Grafik, harici yöntem çağrıları için hazır. 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 ayarlamalı ve bunları yalnızca etkinlik tetiklendikten sonra çağırmalısınız.

Özellikler: yok
select

Kullanıcı bir görsel öğeyi tıkladığında tetiklenir. Neyin seçildiğini öğ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.