Görselleştirme: Pasta Grafik

Genel bakış

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

Ö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 üç boyuta sahip olarak çizilir:

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

<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 Grafiği Oluşturma

Donut grafiği, ortasında delik bulunan bir pasta grafiktir. pieHole seçeneğiyle halka grafikler oluşturabilirsiniz:

pieHole seçeneği, delik ile grafik arasındaki yarıçap sayısına karşılık gelen 0 ile 1 arasında bir sayıya 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 göz ardı edilir ve 0 değeri sırtınızı 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. pieHole, yoksayılır.

Google Listeler'in, etiketi dilim merkezine mümkün olduğunca yakın yerleştirmeye çalıştığını unutmayın. Tek bir dilim bulunan halka çizelgeniz varsa dilimin ortası halka deliğine denk gelebilir. 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ğin Rotasyonu

Varsayılan olarak, pasta grafikler ilk dilimin sol kenarını yukarıyı işaret ederek başlar. Bunu pieStartAngle seçeneğiyle değiştirebilirsiniz:

Burada, pieStartAngle: 100 seçeneğini kullanarak grafiği saat yönünde 100 derece döndürüyoruz. (Söz konusu açı "İtalyan" etiketi dilimin içine sığdığından seçin.)

<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 Patlama

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 0 ile 1 arasında uygun dilim sayısına offset atayın. Aşağıda, 4. (Gujarati), 12 (Marathi), 14 (Oriya) ve 15 (Pencapça) için dilimlere kademeli olarak daha büyük ofsetler atarız:

<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 hariç tutmak için rengi 'transparent' olarak değiştirin:

Ayrıca, grafiği 135 derece döndürmek için pieStartAngle, dilimlerden metin kaldırmak için pieSliceText ve ipuçlarını devre dışı bırakmak için tooltip.trigger seçeneklerini 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 Eşiği

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

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

Bu eşiğin altındaki dilimler, tek bir "Diğer" dilimi altında 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 paket 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ü: string number (sayı) ...
Rol: alan veri ...
İsteğe bağlı sütun rolleri: Yok Yok ...

Yapılandırma Seçenekleri

Ad
arka plan rengi

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

Tür: dize veya nesne
Varsayılan: "white"
arka plan rengi.fırça

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

Tür: dize
Varsayılan: "#666"
arka plan Rengi.strokeGenişliği

Piksel cinsinden kenarlık genişliği.

Tür: sayı
Varsayılan: 0
arka plan Rengi.dolgu

HTML renk dizesi olarak grafik dolgu rengi.

Tür: dize
Varsayılan: "white"
grafikAlanı

Grafik alanının yerleşimini ve boyutunu yapılandırmak için üyeleri olan bir nesne (eksen ve açıklamalar hariç, grafiğin kendisinin çizildiği yer). İki biçim desteklenir: Sayı veya sayı ve ardından %. Örnek: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Tür: nesne
Varsayılan: null
grafikAlanı.Arkaplan Rengi
Grafik alanı arka plan rengi. Bir dize kullanıldığında, onaltılık bir dize olabilir (ör. "#fdc") veya İngilizce renk adını kullanın. Bir nesne kullanıldığında aşağıdaki özellikler sağlanabilir:
  • stroke: On altılık dize veya İngilizce renk adı olarak sağlanan renk.
  • strokeWidth: Varsa, sağlanan genişliğin (ve stroke rengi) grafik alanının etrafına bir kenarlık çizer.
Tür: dize veya nesne
Varsayılan: "white"
grafikAlanı.sol

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

Tür: sayı veya dize
Varsayılan: otomatik
grafikAlanı.top

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

Tür: sayı veya dize
Varsayılan: otomatik
grafikAlanı.genişliği

Grafik alanı genişliği.

Tür: sayı veya dize
Varsayılan: otomatik
grafikAlanı.yükseklik

Grafik alanı yüksekliği.

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

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

Tür: Dize dizisi
Varsayılan: varsayılan renkler
Etkileşimi etkinleştir

Grafiğin kullanıcı tabanlı etkinliklerde bulunup bulunmadığı veya kullanıcı etkileşimine tepki verip vermediği. Yanlış değerine ayarlanırsa grafik, "select" (seç) veya diğer etkileşime dayalı etkinlikleri atlar (ancak hazır veya hata etkinliklerini göndermez) ve fareyle üzerine gelindiğinde gösterilen metni görüntülemez veya kullanıcı girişine bağlı olarak başka şekilde değişiklik yapmaz.

Tür: boole
Varsayılan: true
yazı tipi boyutu

Grafikteki tüm metinlerin piksel cinsinden varsayılan yazı tipi boyutu. Belirli grafik öğelerinin özelliklerini kullanarak bunu geçersiz kılabilirsiniz.

Tür: sayı
Varsayılan: otomatik
yazı tipi adı

Grafikteki tüm metinlerin varsayılan yazı tipi yüzü. Belirli grafik öğelerinin özelliklerini kullanarak bunu geçersiz kılabilirsiniz.

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

Grafiğin piksel cinsinden yüksekliği.

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

Doğru ise üç boyutlu grafik gösterir.

Tür: boole
Varsayılan: false
açıklama

Açıklamaların çeşitli yönlerini yapılandırmak için üyelerden oluşan bir nesne. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tür: nesne
Varsayılan: null
açıklama.hizalama

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

  • "start": Açıklama için ayrılan alanın başlangıcına hizalanır.
  • "center" - Ortasında gösterge için ayrılmış alan.
  • 'end' - Açıklama için ayrılmış alanın sonuna hizalanır.

Başlangıç, orta ve bitiş, açıklamanın stiline (dikey veya yatay) göre belirlenir. Örneğin, "sağ" açıklamasındaki "başlangıç" ve "bitiş" sırasıyla üst ve alt kısımda yer alır. "Üst" açıklama için ise "başlangıç" ve "bitiş", alanın sol ve sağ tarafında sırasıyla yer alır.

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

Tür: dize
Varsayılan: otomatik
açıklama.konumu

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

  • "bottom" - Grafiğin altındaki göstergeyi görüntüler.
  • "labeled" - Dilimleri veri değerlerine bağlayan çizgiler çizer.
  • "left" (sol) - Grafiğin sol tarafında açıklama gösterir.
  • "none" - Açıklamalar gösterilmez.
  • "right" (sağ) - Grafiğin sağ tarafındaki açıklama bölümünü görüntüler.
  • "top" (üst) - Grafiğin üst kısmındaki açıklamayı görüntüler.
Tür: dize
Varsayılan: "sağ"
Legend.maxLines

Açıklamalardaki maksimum satır sayısı. Açıklamalarını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 mantığın devamlılığı değişmedi.

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

Tür: sayı
Varsayılan: 1
Legend.textStil

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

0 ile 1 arasında ise bir halka grafik gösterir. Yarıçapı, grafiğin yarıçapının number katı olan bir delik.

Tür: sayı
Varsayılan: 0
PieSlice

Dilimin kenarlıkları. Yalnızca grafik iki boyutlu olduğunda geçerlidir.

Tür: dize
Varsayılan: "white"
Metin_Metin

Dilimde gösterilen metnin içeriği. Aşağıdakilerden biri olabilir:

  • "percentage" - Dilim boyutunun toplam değere göre yüzdesi.
  • "value" - Dilimin nicel değeri.
  • "label" - Dilimin adı.
  • "none" (hiçbiri) - Metin gösterilmez.
Tür: dize
Varsayılan: "yüzde"
pieSliceMetin Stili

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'. fontName ve fontSize hükümlerine de bakın.

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

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

Tür: sayı
Varsayılan: 0
geri kategoriler

Doğruysa 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
PieResidueSliceRenk

Tüm dilimleri sliceGörünürlükThreshold değerinin altında tutan kombinasyon dilimi.

Tür: dize
Varsayılan: "#ccc"
PieResidueSliceEtiketi

Kombinasyon dilimi için, tüm dilimleri slicceGörünürlükThreshold değerinin altında tutan bir etiket.

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

Her biri, pastadaki ilgili dilimin biçimini açıklayan bir nesne dizisi. Bir dilim için varsayılan değerleri kullanmak üzere boş bir nesne belirtin (ör. {}). Bir dilim veya değer belirtilmezse global 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 - Dilimi pastanın geri kalanından 0,0'dan (hiçbir şekilde değil) 1,0'a (pastanın yarıçapı) ayırmak için.
  • textStyle - Bu dilim için genel pieSliceTextStyle geçersiz kılar.

Bir nesne dizisi belirtebilirsiniz. Bunların her biri, verilen sırada dilim için geçerlidir veya her bir alt öğenin hangi dilim için geçerli olduğunu belirten sayısal bir anahtara sahip olduğu bir nesne belirtebilirsiniz. Örneğin, aşağıdaki iki beyan aynıdır ve ilk dilimi siyah, dördüncüsünü ise kırmızı olarak bildirmelisiniz:

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
      
Tür: Nesne dizisi veya iç içe yerleştirilmiş nesneler içeren nesne
Varsayılan: {}
dilimGörünürlükEşik

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

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

Çeşitli ipucu öğelerini yapılandırmak için üyeleri olan bir nesne. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz:

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

true olarak ayarlandığında, tüm kenarlarda grafiğin sınırlarının dışına ipucu ipucu çizilmesine izin verir.

Not: Bu yalnızca HTML ipuçları için geçerlidir. Bu ayar SVG ipuçlarıyla etkinleştirilirse grafik sınırlarının dışındaki taşma işlemleri 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
ipucu.ishtml

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

Not: HTML araç ipucu içeriğinin ipuçu sütunu veri rolü aracılığıyla özelleştirilmesi, Balon Listesi görselleştirmesi tarafından desteklenmez.

Tür: boole
Varsayılan: false
İpucu.ShowRenkKodu

Doğru değerine ayarlanırsa ipucunda dilim bilgilerinin yanında renkli kareleri gösterir.

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

Kullanıcı bir pasta diliminin üzerine geldiğinde gösterilecek bilgiler. Aşağıdaki değerler desteklenir:

  • "İkisi de" - [Varsayılan] Hem dilimin mutlak değerini hem de bütünün yüzdesini gösterir.
  • "value" (değer) - Dilimin yalnızca mutlak değerini gösterir.
  • "percent" - Yalnızca dilim tarafından temsil edilen bütünün yüzdesini görüntüleyin.
Tür: dize
Varsayılan: "her ikisi"
ipucu.metinStil

İ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'. fontName ve fontSize hükümlerine de bakın.

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

İpucunun gösterilmesine neden olan kullanıcı etkileşimi:

  • "odak" - Kullanıcı, öğenin üzerine geldiğinde ipucu görünür.
  • "hiçbiri" - İpucu gösterilmez.
  • "seçim" - Kullanıcı öğeyi seçtiğinde ipucu gösterilir.
Tür: dize
Varsayılan: "odak"
genişlik

Grafiğin piksel cinsinden genişliği.

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

Yöntemler

Yöntem
draw(data, options)

Grafiği çizer. Grafik, yalnızca readyetkinliği tetiklendikten sonra gerçekleştirilen diğer yöntem çağrılarını kabul eder. Extended description dokunun.

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

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

Dönüş Türü: 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ş (etkinlik işleyicilerin döndürme değerleridir), ancak bazı örnekler aşağıda verilmiştir:

var cli = chart.getChartLayoutInterface();

Grafik alanının yüksekliği
cli.getBoundingBox('chartarea').height
Ç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 takozunun sınırlayıcı kutusu
cli.getBoundingBox('slice#4')
Dikey (ör. sütun) grafiğin grafik verilerindeki sınır kutusu:
cli.getBoundingBox('vAxis#0#gridline')
Yatay (ör. çubuk) grafiğin veri grafiklerinin sınırlayıcı kutusu:
cli.getBoundingBox('hAxis#0#gridline')

Değerler, grafiğin kapsayıcısıyla ilgilidir. Bunu, grafik çizildikten sonra çağırın.

Dönüş Türü: nesne
getChartAreaBoundingBox()

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

var cli = chart.getChartLayoutInterface();

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

Değerler, grafiğin kapsayıcısıyla ilgilidir. Bunu, grafik çizildikten sonra çağırın.

Dönüş Türü: nesne
getChartLayoutInterface()

Grafiğin ve yerleşimin öğelerinin ekran yerleşimi hakkında bilgi içeren bir nesne döndürür.

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

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

Bunu, grafik çizildikten sonra çağırın.

Dönüş Türü: nesne
getHAxisValue(xPosition, optional_axis_index)

xPosition konumundaki yatay veri değerini döndürür. Bu, grafik kapsayıcısının sol kenarından bir piksel ofsetidir. Negatif olabilir.

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

Bunu, grafik çizildikten sonra çağırın.

İade Türü: numara
getImageURI()

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

Bunu, grafik çizildikten sonra çağırın.

PNG Grafiklerini Yazdırma konusuna bakın.

Dönüş Türü: dize
getSelection()

Seçilen grafik varlıklarından oluşan bir diziyi döndürür. Seçilebilir öğeler, dilimler ve açıklama girişidir. Bu grafik için herhangi bir zamanda yalnızca bir varlık 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, grafik kapsayıcısının üst kenarından bir piksel aşağı kaydırmadır. Negatif olabilir.

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

Bunu, grafik çizildikten sonra ç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ı değerini döndürür.

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

Bunu, grafik çizildikten sonra ç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ı döndürür.

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

Bunu, grafik çizildikten sonra çağırın.

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

İstenen actionID ile ilgili 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 belirler.

setAction yöntemi, bir nesneyi işlem parametresi olarak alır. Bu nesnede 3 özellik belirtilmelidir: id - ayarlanan işlemin kimliği, text - işlem için ipucunda görünmesi gereken metin ve action - bir kullanıcı işlem metnini tıkladığında çalışması gereken işlev.

İpucu işlemlerinin tümü, grafiğin draw() yöntemini çağırmadan önce ayarlanmalıdır. Genişletilmiş açıklama.

İade Türü: none
setSelection()

Belirtilen grafik öğelerini seçer. Önceki seçimleri iptal eder. Seçilebilir öğeler, dilimler ve açıklama girişidir. Bu grafik için tek seferde yalnızca bir öğe seçilebilir. Extended description .

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

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

Dönüş Türü: yok

Etkinlikler

Bu etkinliklerin nasıl kullanılacağı hakkında daha fazla bilgi için Temel Etkileşim, Etkinlikleri Kullanma ve Etkinleştirme Etkinlikleri başlıklı makalelere bakın.

Ad
click

Kullanıcı grafiğin içini tıkladığında tetiklenir. Başlık, veri öğeleri, gösterge girişleri, eksenler, kılavuz çizgileri veya etiketlerin ne zaman tıklandığını belirlemek 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ı görsel bir varlığın ü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 boş).

Özellikler: satır, sütun
onmouseout

Kullanıcı görsel varlıktan fareyi 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 boş).

Özellikler: satır, sütun
ready

Grafik, harici yöntem çağrıları için hazır. Grafik ve çizim yöntemlerinden sonra etkileşimde bulunmak isterseniz draw yöntemini çağırmadan önce bu etkinlik için bir dinleyici oluşturmanız ve bunları yalnızca etkinlik tetiklendikten sonra kullanmanız gerekir.

Özellikler: yok
select

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