Kontroller ve Gösterge Tabloları

Bu sayfada, birden fazla grafiği nasıl gösterge tablolarında birleştireceğinizi ve kullanıcılara gösterilecekleri verileri değiştirebilmeleri için nasıl kontrol sunacağınızı öğreneceksiniz.

Genel bakış

Gösterge tabloları, aynı temel verileri paylaşan birden fazla grafiği birlikte düzenlemenin ve yönetmenin basit bir yoludur. Bu sayfada açıklanan API'leri kullanarak, tüm kabloları birlikte gösterme ve kontrol panelinin parçası olan tüm grafikleri koordine etme zahmetinden kurtulabilirsiniz.

Kontrol panelleri, google.visualization.Dashboard sınıfları kullanılarak tanımlanır. Dashboard örnekleri, görselleştirmek ve verileri çizmek ve kontrol panelinin parçası olan tüm grafiklere dağıtmak için kullanılacak verileri içeren bir DataTable alır.

Kontroller, bir kontrol paneli tarafından yönetilen verileri ve bunların parçası olan grafikleri yönetmek için etkileşimde bulunduğunuz kullanıcı arayüzü widget'larıdır (kategori seçiciler, aralık kaydırma çubukları, otomatik tamamlayanlar gibi).

Kontroller, google.visualization.ControlWrapper sınıfları kullanılarak tanımlanır. Kontrol paneline ControlWrapper örnekleri ekleyebilirsiniz. Bu örnekler, tesisat sistemindeki borular ve vanalar gibi davranır. Kullanıcı girdilerini toplar ve kontrol panelinin yönettiği verilerin hangilerinin, içinde yer alan grafiklere sunulacağına karar vermek için bu bilgilerden yararlanır.

Pasta grafikte görselleştirilen verileri yürütmek için kategori seçicinin ve aralık kaydırma çubuğunun kullanıldığı aşağıdaki örneğe göz atın.

Not: Kontrol paneli etkileşimlidir. Kontrolleri kullanmayı deneyin ve grafik değişimini gerçek zamanlı olarak görün.

Denetimleri ve Kontrol Panellerini Kullanma

Bir gösterge tablosu oluşturmaya ve bunu sayfanıza yerleştirmeye ilişkin temel adımları burada bulabilirsiniz. Aşağıda tüm bu adımları gösteren bir kod snippet'i ve ardından her adımla ilgili ayrıntılı bilgiler bulacaksınız.

  1. Kontrol paneliniz için bir HTML iskeleti oluşturun. Sayfanızda, kontrol panelinin her bir üyesini barındıracak gereken sayıda HTML öğesi olmalıdır. Buna hem kontrol panelinin kendisi hem de kontrol panelinin parçası olan tüm denetimler dahildir. Genellikle her biri için bir <div> kullanırsınız.
  2. Kitaplıklarınızı yükleyin. Bir kontrol paneli, sayfada yalnızca iki kitaplığın eklenmesini veya yüklenmesini gerektirir: Google AJAX API'sı ve Google Görselleştirme controls paketi.
  3. Verilerinizi hazırlayın. Görselleştirilecek verileri hazırlamanız gerekir. Bu, verileri kodda kendiniz belirtmeniz veya veriler için uzak bir siteyi sorgulamanız anlamına gelir.
  4. Kontrol paneli örneği oluşturun. Kurucusunu çağırıp barındıracak <div> öğesine referans vererek kontrol panelinizi örneklendirin.
  5. İhtiyaç duyduğunuz sayıda kontrol ve grafik örneği oluşturun. Her grafiği açıklamak ve kontrol panelinin yönettiği kontrolü artırmak için google.visualization.ChartWrapper ve google.visualization.ControlWrapper örnekleri oluşturun.
  6. Bağımlılıkları belirleyin. Kontrol panelinizde bind() öğesini çağırıp kontrol ve grafik örneklerini ileterek kontrol panelinin nelerin yönetileceğini bilmesini sağlayın. Kontrol ve grafik birbirine bağlandığında kontrol paneli, grafiği kontrolün veriler üzerinde uyguladığı kısıtlamalara uyacak şekilde günceller.
  7. Kontrol panelinizi çizin. Kontrol panelinizde draw() işlevini çağırın ve tüm kontrol panelini sayfaya çizmek için verilerinizi iletin.
  8. Çizim sonrası programatik değişiklikler. İsteğe bağlı olarak, ilk çizimden sonra kontrol panelinin parçası olan kontrolleri programatik olarak çalıştırabilir ve buna yanıt olarak kontrol panelinin grafikleri güncellemesini sağlayabilirsiniz.

Pasta grafik gösteren bir aralık kaydırma çubuğunun yer aldığı basit bir kontrol paneli oluşturan basit bir sayfa örneğini burada bulabilirsiniz. Elde edilen kontrol paneli snippet'in altında gösterilir. 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the controls package.
      google.charts.load('current', {'packages':['corechart', 'controls']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawDashboard);

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {

        // Create our data table.
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten'
          }
        });

        // Create a pie chart, passing some options
        var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'pieSliceText': 'value',
            'legend': 'right'
          }
        });

        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.
        dashboard.bind(donutRangeSlider, pieChart);

        // Draw the dashboard.
        dashboard.draw(data);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>
  </body>
</html>

Bu kodun oluşturduğu kontrol panelini burada bulabilirsiniz.

1. Kontrol Paneliniz İçin Bir HTML İskeleti Oluşturun

Sayfanızda, hem kontrol panelinin hem de kontrol panelindeki tüm kontroller ve grafiklerin bulunabilmesi için mümkün olduğunca çok sayıda HTML öğesi (genellikle <div>s) bulunmalıdır. Kontrol paneli, kontrol ve grafik örneklerini örneklendirirken bunların öğelerine bir referans iletmeniz gerekir. Bu nedenle her HTML öğesine bir kimlik atayın. 

    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>

Her bir HTML öğesini kontrol panelinizin görünmesini istediğiniz şekilde konumlandırabilirsiniz.

2. Kitaplıklarınızı Yükleme

Bir kontrol paneli, sayfada yalnızca iki kitaplığın eklenmesini veya yüklenmesini gerektirir: Google AJAX API'sı ve Google Görselleştirme controls paketi. API (özellikle google.visualization.ChartWrapper), gereken diğer paketleri (örneğin, Gösterge grafiği kullanıyorsanız gauge) otomatik olarak belirler ve sizin başka bir şey yapmanıza gerek kalmadan bunları anında yükler.

Kontrol kitaplığını getirmek için google.charts.load() kullanmanız gerekir.

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

  // Load the Visualization API and the controls package.
  // Packages for all the other charts you need will be loaded
  // automatically by the system.
  google.charts.load('current', {'packages':['corechart', 'controls']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawDashboard);

  function drawDashboard() {
    // Everything is loaded. Assemble your dashboard...
  }
</script>

3. Verilerinizi Hazırlama

Görselleştirme API'si yüklendiğinde google.charts.setOnLoadCallback(), işleyici işlevinizi çağırır. Böylece, verilerinizi hazırlamaya başlamak için gerekli tüm yardımcı yöntem ve sınıfların hazır olacağını bilirsiniz.

Gösterge tabloları, grafiklerde olduğu gibi DataTable'da da veri kabul eder.

4. Kontrol Paneli Örneği Oluşturma

Verilerinizi oluşturduktan sonra kontrol paneli nesnenizi örneklendirebilirsiniz. Kontrol paneli oluşturucu bir parametre alır: Kontrol panelinin içinde çizileceği DOM öğesine referans. 

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

Kontrol panelleri JavaScript sınıfı olarak gösterilir. Kontrol panelinizi örneklendirdikten sonra etkinlik işleyiciler eklemek (ör. kontrol paneli "hazır olduğunda" bildirim almak için) gibi isteğe bağlı birkaç adımı gerçekleştirebilirsiniz. Kontrol panelleri, etkinlikleri grafiklerin yaptığı gibi işler. Bu nedenle, daha fazla bilgi için grafik bölümündeki Görselleştirme Etkinliklerini Yönetme veya Hataları Düzgün Şekilde Görüntüleme konularına bakın.

5. Kontrol ve Grafik Örnekleri Oluşturma

Kontrol panelinin bir parçası olacak her kontrol ve grafik için ihtiyacınız olan sayıda örnek tanımlayın. Grafikleri ve kontrolleri tanımlamak için sırasıyla google.visualization.ChartWrapper ve google.visualization.ControlWrapper kullanın. 

  // Create a range slider, passing some options
  var donutRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Donuts eaten'
    }
  });

  // Create a pie chart, passing some options
  var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart_div',
    'options': {
      'width': 300,
      'height': 300,
      'pieSliceText': 'label'
    }
  });

ChartWrapper ve ControlWrapper örneklerini oluştururken dataTable veya dataSourceUrl parametresini belirtmeyin. Kontrol paneli, her bir birimin uygun verilerle beslenmesini sağlar. Ancak gerekli parametreleri belirttiğinizden emin olun: grafikler için chartType ve containerId, kontroller için controlType ve containerId.

Kontrolleri ve grafikleri yapılandırmayla ilgili birkaç ipucu:

  • Kontrolün google.visualization.DataTable öğenizin hangi sütununda çalışacağını belirtmek için tüm kontrollere bir filterColumnIndex (veya filterColumnLabel) vermeniz gerekir (yukarıdaki örnekte, kontrol Donuts denen etiketli sütun üzerinde çalışır).

  • İlk çizildiklerinde açık bir durumla başlatmak için kontrollerde state yapılandırma seçeneğini kullanın. Örneğin, aralık kaydırma çubuğu kontrolünün baş parmaklarının ilk konumlarını düzeltmek için bu ayarı kullanın. 

      var donutRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Donuts eaten',
      'minValue': 1,
      'maxValue': 10
    },
    // Explicitly positions the thumbs at position 3 and 8,
    // out of the possible range of 1 to 10.
    'state': {'lowValue': 3, 'highValue': 8}
  });

  • Bir kontrol panelinin parçası olan tüm grafikler, Verilerinizi Hazırlayın adımında hazırladığınız temel dataTable'ı paylaşır. Ancak grafiklerin doğru şekilde gösterilmesi için genellikle belirli bir sütun düzenlemesi gerekir. Örneğin, bir pasta grafiğinde etiket için bir dize sütunu, ardından değer için bir sayı sütunu gerekir.

    Aşağıdaki örnekte olduğu gibi, her bir ChartWrapper örneğini yapılandırırken view seçeneğini kullanarak grafikle alakalı olan sütunları bildirin. 

      var data = google.visualization.arrayToDataTable([
    ['Name', 'Gender', 'Age', 'Donuts eaten'],
    ['Michael' , 'Male', 12, 5],
    ['Elisa', 'Female', 20, 7],
    ['Robert', 'Male', 7, 3],
    ['John', 'Male', 54, 2],
    ['Jessica', 'Female', 22, 6],
    ['Aaron', 'Male', 3, 1],
    ['Margareth', 'Female', 42, 8]
  ]);

  var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart_div',
    'options': {
      'width': 300,
      'height': 300,
      'title': 'Donuts eaten per person'
    },
    // The pie chart will use the columns 'Name' and 'Donuts eaten'
    // out of all the available ones.
    'view': {'columns': [0, 3]}
  });

  // The rest of dashboard configuration follows
  // ...

6. Bağımlılıkları Belirleme

Hem kontrol panelini hem de onu parçası olacak tüm kontrolleri ve grafikleri örneklendirmenizin ardından, kontroller ve grafikler arasında var olan bağımlılıkları kontrol paneline bildirmek için bind() yöntemini kullanın.

Kontrol ve grafik birbirine bağlandığında kontrol paneli, grafiği kontrolün veriler üzerinde uyguladığı kısıtlamalara uyacak şekilde günceller. Oluşturduğunuz örnek kontrol panelinde, aralık kaydırma çubuğu ve pasta grafik birbirine bağlıdır. Bu nedenle, ilkiyle her etkileşimde bulunduğunuzda, sonraki grafik yalnızca seçilen aralıkla eşleşen verileri görüntüleyecek şekilde güncellenir. 

  // 'pieChart' will update whenever you interact with 'donutRangeSlider'
  // to match the selected range.
  dashboard.bind(donutRangeSlider, pieChart);

Denetimleri ve grafikleri birçok farklı yapılandırmada bağlayabilirsiniz: bire bir, bire çok, çoka bir ve çoka-çok. Bir grafiğe birden fazla kontrol bağlandığında kontrol paneli, grafiği tüm sınır kontrollerin zorunlu kıldığı birleşik kısıtlamalara uyacak şekilde günceller. Aynı anda, bir kontrol aynı anda birden fazla grafik oluşturabilir. Aynı anda birden fazla bağlama belirtmek için tekli örnekler yerine dizileri bind() yöntemine geçirin. Ayrıca, birden fazla bind() çağrısını zincir halinde de oluşturabilirsiniz. Aşağıda birkaç örnek verilmiştir. 

  // Many-to-one binding where 'ageSelector' and 'salarySelector' concurrently
  // participate in selecting which data 'ageVsSalaryScatterPlot' visualizes.
  dashboard.bind([agePicker, salaryPicker], ageVsSalaryScatterPlot);

  // One-to-many binding where 'ageSelector' drives two charts.
  dashboard.bind(agePicker, [ageVsSalaryScatterPlot, ageBarChart]);

  // bind() chaining where each control drives its own chart.
  dashboard.bind(agePicker, ageBarChart).bind(salaryRangePicker, salaryPieChart);

İleri düzey kullanımlarda bağımlılık zincirleri oluşturmak için denetimleri diğer denetimlere de bağlayabilirsiniz . 

  dashboard.bind(countryPicker, regionPicker).bind(regionPicker, cityPicker);

7. Kontrol Panelinizi Çizin

Kontrol panelinin tamamını oluşturmak için kontrol paneli örneğinde draw() yöntemini çağırın. draw() yöntemi yalnızca bir parametre alır: kontrol panelini çalıştıran DataTable (veya DataView).

Kontrol panelinin yapısını her değiştirdiğinizde (örneğin, ona yeni denetimler veya grafikler ekleyerek) ya da onu destekleyen genel DataTable değerini değiştirdiğinizde draw() öğesini çağırmalısınız.

Kontrol paneli örneği, draw() ürününün parçası olan tüm kontrolleri ve grafikleri çizmeyi sonlandırdığında bir ready etkinliği tetikler. Yönetilen denetimlerden veya grafiklerden herhangi biri çizilemezse error etkinliği tetiklenir. Etkinlikleri işleme hakkında daha fazla bilgi için Etkinlikleri Yönetme bölümüne bakın.

Not: Kontrol paneli bileşimini değiştirmeyi veya tekrar çizmeyi denemeden önce ready etkinliğini dinlemeniz gerekir.

8. Çizimden Sonra Programatik Değişiklikler

Kontrol paneli ilk draw() bölümünü tamamladıktan sonra yayınlanır ve üzerinde yaptığınız tüm işlemlere (kontrol panelinin parçası olan kontrol kaydırma çubuğunun seçili aralığını değiştirmek gibi) otomatik olarak yanıt verir.

Kontrol paneli durumunu programatik olarak değiştirmeniz gerekiyorsa bunu doğrudan parçası olan ControlWrapper ve ChartWrapper örneklerinde çalışarak yapabilirsiniz. Genel kural, ihtiyacınız olan herhangi bir değişikliği doğrudan belirli ControlWrapper (veya ChartWrapper) örneğinde yapmaktır: Örneğin, bir kontrol seçeneğini veya durumu sırasıyla setOption() ve setState() aracılığıyla değiştirin ve draw() yöntemini daha sonra çağırın. Kontrol paneli, istenen değişikliklere uyacak şekilde güncellenir.

Aşağıdaki örnekte böyle bir durum gösterilmektedir.
Tam Web Sayfası
<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', 'controls']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));

        // We omit "var" so that programmaticSlider is visible to changeRange.
        var programmaticSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'programmatic_control_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten',
            'ui': {'labelStacking': 'vertical'}
          }
        });

        var programmaticChart  = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'programmatic_chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
            'pieSliceText': 'value'
          }
        });

        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        dashboard.bind(programmaticSlider, programmaticChart);
        dashboard.draw(data);

        changeRange = function() {
          programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
          programmaticSlider.draw();
        };

        changeOptions = function() {
          programmaticChart.setOption('is3D', true);
          programmaticChart.draw();
        };
      }

    </script>
  </head>
  <body>
    <div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
      <table class="columns">
        <tr>
          <td>
            <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
            <div>
              <button style="margin: 1em 1em 1em 2em" onclick="changeRange();">
                Select range [2, 5]
              </button><br />
              <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();">
                Make the pie chart 3D
              </button>
            </div>
          </td>
          <td>
            <div id="programmatic_chart_div"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

API Referansı

Bu bölümde, Controls ve Dashboards API tarafından açığa çıkarılan nesneler ve tüm kontroller tarafından sunulan standart yöntemler listelenmektedir.

Kontrol paneli

Aynı temel verileri paylaşan ortak çalışma denetimleri ve grafikler koleksiyonunu temsil eder.

Marka

Dashboard(containerRef)
containerRef
Sayfada kontrol paneli içeriklerini barındıracak geçerli bir kapsayıcı öğesine verilen referans.

Yöntemler

Kontrol Paneli'nde aşağıdaki yöntemler gösterilir:

Yöntem Dönüş Türü Açıklama
bind(controls, charts) google.visualization.Dashboard

Bir veya daha fazla Kontrolü bir veya daha fazla kontrol paneli katılımcısına (grafikler veya diğer kontroller) bağlar. Böylece kontrol paneli tarafından yönetilen verileri etkileyen bir programatik veya kullanıcı etkileşimi topladığında kontrollerin tümü yeniden çizilir. Birden çok bind() çağrısını birbirine bağlamak için kontrol paneli örneğini döndürür.

  • controls: Bağlanacak denetimleri tanımlayan tek bir veya google.visualization.ControlWrapper örneği dizisi.
  • Grafikler - Kontrollerin yönlendirdiği grafikleri tanımlayan tek bir veya google.visualization.ChartWrapper örnekleri dizisi.
draw(dataTable) Yok

Kontrol panelini çizer.
getSelection() Nesne dizisi

Kontrol panelindeki grafiklerin seçilen görsel varlıklarından oluşan bir dizi döndürür. getSelection() yöntemi kontrol panelinde çağrıldığında, içindeki tüm grafiklerde yapılan seçimlerin toplamını döndürür. Böylece, grafik seçimleriyle çalışırken tek bir referansın kullanılması mümkün olur.

Not: Seçilen etkinliğin etkinlik işleyicilerin yine de dinlemek istediğiniz her grafiğe eklenmesi gerekir.

Genişletilmiş açıklama

Etkinlikler

Kontrol Paneli nesnesi aşağıdaki etkinlikleri bildirir. Herhangi bir etkinliğin atılması için Dashboard.draw() çağrısı yapmanız gerektiğini unutmayın.

Ad Açıklama Özellikler
error Kontrol paneli oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir. Kontrol panelinin parçası olan bir veya daha fazla kontrol ve grafik oluşturulamadı. kimlik, ileti
ready

Kontrol panelinin çizimi tamamlandı ve değişiklikler kabul edilmeye hazır. Kontrol panelinin parçası olan tüm kontroller ve grafikler, harici yöntem çağrısı ve kullanıcı etkileşimi için hazırdır. Kontrol panelini (veya gösterdiği verileri) çizdikten sonra değiştirmek isterseniz draw yöntemini çağırmadan önce bu etkinlik için bir işleyici oluşturmanız ve ardından değişikliklerinizi yalnızca etkinlik tetiklendikten sonra uygulamanız gerekir.

ready etkinliği de tetiklenecek:

  • Kullanıcı veya kontrollerden biriyle programatik etkileşimin tetiklediği bir gösterge tablosu yenilendikten sonra,
  • kontrol panelinin herhangi bir grafik bölümündeki draw() yöntemine yapılan programatik çağrıdan sonra.
Yok

ControlWrapper

ControlWrapper nesnesi, yapılandırılmış bir kontrol örneğinin JSON gösteriminin etrafındaki bir sarmalayıcıdır. Bu sınıf, kontrol paneli denetimi tanımlamak, çizmek ve durumunu programlı bir şekilde değiştirmek için pratik yöntemler sunar.

Marka

ControlWrapper(opt_spec)
opt_spec
[İsteğe bağlı] - Kontrolü tanımlayan bir JSON nesnesi veya bu nesnenin serileştirilmiş dize sürümü. JSON nesnesinin desteklenen özellikleri aşağıdaki tabloda gösterilmiştir. Belirtilmezse ControlWrapper tarafından sunulan set... yöntemlerini kullanarak uygun tüm özellikleri ayarlamanız gerekir.
Özellik Tür Gerekli Varsayılan Açıklama
controlType Dize Gerekli yok Kontrolün sınıf adı. google.visualization paket adı, Google denetimlerinde atlanabilir. Örnekler: CategoryFilter, NumberRangeFilter.
containerId Dize Gerekli yok Sayfanızda kontrolü barındıracak olan DOM öğesinin kimliği.
seçenekler Nesne İsteğe bağlı yok Denetim seçeneklerini açıklayan bir nesne. JavaScript değişmez değer gösterimini kullanabilir veya nesneye bir herkese açık kullanıcı adı sağlayabilirsiniz. Örnek: "options": {"filterColumnLabel": "Age", "minValue": 10, "maxValue": 80}
state Nesne İsteğe bağlı yok Kontrolün durumunu açıklayan bir nesne. Durum, kontrolü çalıştıran kullanıcının etkileyebileceği tüm değişkenleri toplar. Örneğin, aralık kaydırma çubuğu durumu, kaydırma çubuğunun alt ve üst başparmağının kapladığı konumlar ile açıklanabilir. JavaScript düz gösterimini kullanabilir veya nesneye bir herkese açık kullanıcı adı sağlayabilirsiniz.Örnek: "state": {"lowValue": 20, "highValue": 50}

Yöntemler

ControlWrapper, aşağıdaki ek yöntemleri sunar:

Yöntem Dönüş Türü Açıklama
draw() Yok

Kontrolü çizer. Normalde, kontrolün bulunduğu kontrol paneli çizimi halleder. Seçenekler veya durum gibi diğer ayarlarından herhangi birini değiştirdikten sonra kontrolün programatik olarak yeniden çekilmesini zorunlu kılmak için draw() öğesini çağırmanız gerekir.

toJSON() Dize Kontrolün JSON gösteriminin dize sürümünü döndürür.
clone() ControlWrapper Kontrol sarmalayıcının derin kopyasını döndürür.
getControlType() Dize Kontrolün sınıf adı. Bu bir Google denetimiyse ad google.visualization ile nitelendirilmez. Yani örneğin, bu bir CategoryFilter kontrolü olsaydı "google.Visualization.CategoryFilter" yerine "CategoryFilter" değerini döndürürdü.
getControlName() Dize setControlName() tarafından atanan kontrol adını döndürür.
getControl() Denetim nesnesi referansı Bu ControlWrapper tarafından oluşturulan denetime bir başvuru döndürür. Bu, siz ControlWrapper nesnesinde draw() öğesini (veya bunu tutan kontrol panelinde) çağırana ve hazır bir etkinlik gönderene kadar null değerini döndürür. Döndürülen nesne yalnızca bir yöntemi kullanıma sunar: resetControl(). Bu yöntem, kontrol durumunu ilk kullanıma hazırlandığı duruma sıfırlar (bir HTML form öğesini sıfırlamak gibi).
getContainerId() Dize Kontrole ait DOM kapsayıcı öğesinin kimliği.
getOption(key, opt_default_val) Tüm türler

Belirtilen kontrol seçeneği değerini döndürür

  • anahtar: Alınacak seçeneğin adı. 'vAxis.title' gibi nitelikli bir ad olabilir.
  • opt_default_value [İsteğe bağlı] - Belirtilen değer tanımsız veya null ise bu değer döndürülür.
getOptions() Nesne Bu denetimle ilgili seçenekler nesnesini döndürür.
getState() Nesne Kontrol durumunu döndürür.
setControlType(type) Yok Kontrol türünü ayarlar. Örneklendirmek için kontrolün sınıf adını iletin. Bu bir Google denetimiyse bunu google.visualization ile tanımlamayın. Örneğin, sayısal bir sütunun üzerindeki aralık kaydırma çubuğu için "NumberRangeFilter" değerini geçirin.
setControlName(name) Yok Kontrol için rastgele bir ad ayarlar. Bu, kontrol bölümünün hiçbir yerinde gösterilmez ancak yalnızca referans amaçlıdır.
setContainerId(id) Yok Kontrol için kapsayıcı DOM öğesinin kimliğini ayarlar.
setOption(key, value) Yok Tek bir kontrol seçeneği değeri ayarlar. Burada anahtar seçenek adı, değer ise değerdir. Bir seçeneğin ayarını kaldırmak isterseniz değer için null yazın. key değerinin 'vAxis.title' gibi nitelikli bir ad olabileceğini unutmayın.
setOptions(options_obj) Yok Bir kontrol için tam seçenekler nesnesi ayarlar.
setState(state_obj) Yok Kontrol durumunu ayarlar. Durum, kontrolü çalıştıran kullanıcının etkileyebileceği tüm değişkenleri toplar. Örneğin, aralık kaydırma çubuğu durumu, kaydırma çubuğunun alt ve üst başparmağının kapladığı konumlar ile açıklanabilir.

Etkinlikler

ControlWrapper nesnesi aşağıdaki etkinlikleri bildirir. Herhangi bir etkinliğin tetiklenmesi için ControlWrapper.draw() yöntemini çağırmanız (veya kontrolü içeren kontrol panelini çizmeniz) gerektiğini unutmayın.

Ad Açıklama Özellikler
error Denetim oluşturulmaya çalışılırken hata oluştuğunda tetiklenir. kimlik, ileti
ready Denetim, kullanıcı etkileşimini kabul etmeye ve harici yöntem çağrıları için hazırdır. Kontrolle etkileşim kurmak ve yöntemi ç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. Alternatif olarak, kontrol ve çağrı kontrol yöntemlerini yalnızca etkinlik tetiklendikten sonra tutan ready etkinliğini kontrol panelinde dinleyebilirsiniz. Yok
statechange Kullanıcı, denetimle etkileşimde bulunduğunda ve işlemin durumunu etkileyen bir işlem olduğunda tetiklenir. Örneğin, aralık kaydırma çubuğu kontrolünün başparmağını her hareket ettirdiğinizde bir statechange etkinliği tetiklenir. Etkinlik tetiklendikten sonra güncellenmiş kontrol durumunu almak için ControlWrapper.getState() komutunu çağırın. Yok

ChartWrapper

Görselleştirmelerin API referansı bölümündeki google.visualization.ChartWrapper belgelerine bakın.

ChartWrapper, kontrol panelinin bir parçası olarak kullanılırken aşağıdaki notlar geçerlidir:

  • dataTable, query, dataSourceUrl ve refreshInterval özelliklerini açıkça ayarlamayın. Grafiği tutan kontrol paneli, ihtiyacı olan verileri sağlar.
  • Kontrol ve Grafik Örnekleri Oluşturma bölümünde gösterildiği gibi, kontrol paneline verilen dataTable içinde bulunan tüm sütunlar arasından hangi sütunların grafikle alakalı olduğunu bildirmek için view özelliğini ayarlayın.

Filtreler, kullanıcıların grafiğinizde hangi verilerin gösterileceğini etkileşimli olarak seçmek için kullanabileceği grafik öğeleridir. Bu bölümde şu Google Grafik filtreleri açıklanmaktadır: CategoryFilter, ChartRangeFilter, DateRangeFilter, NumberRangeFilter ve StringFilter.

Bunlardan herhangi birini, ControlWrapper.setControlType() parametresi olarak kullanabilirsiniz.

Not: Seçeneklerin açıklanmasında nokta gösterimi, iç içe yerleştirilmiş nesne özelliklerini tanımlamak için kullanılır. Örneğin, 'ui.label' adlı bir seçenek, seçenekler nesnesinde var options = {"ui": {"label": "someLabelValue"} }; olarak tanımlanmalıdır

CategoryFilter

Tanımlanmış bir değer grubu arasından bir veya daha fazla seçim yapmayı sağlayan bir seçici.

Eyalet

Ad Tür Varsayılan Açıklama
selectedValues Nesneler veya temel türler dizisi yok Seçili olan değer grubu. Seçilen değerler, values seçeneği ile tanımlanan seçilebilir genel değerlerden oluşan bir grup olmalıdır (gereksiz değerler yoksayılır). CategoryFilter çoktan seçmelilere izin vermiyorsa dizinin yalnızca ilk değeri korunur.

Seçenekler

Ad Tür Varsayılan Açıklama
filterColumnIndex sayı yok Filtrenin çalışması gereken veri tablosu sütunu. Bu seçeneği veya filterColumnLabel seçeneğini sağlamanız zorunludur. Her ikisi de mevcutsa bu seçenek öncelikli olur.
filterColumnLabel dize yok Filtrenin çalışması gereken sütunun etiketi. Bu seçeneği veya filterColumnIndex seçeneğini sağlamanız zorunludur. Her ikisi de mevcutsa filterColumnIndex öncelikli olur.
values Dizi otomatik Aralarından seçim yapabileceğiniz değerlerin listesi. Bir Nesne dizisi kullanılırsa bunların kullanıcıya gösterilmesi için uygun bir toString() temsili olmalıdır. Null veya tanımlanmamışsa değer listesi, bu kontrolün üzerinde çalıştığı DataTable sütununda bulunan değerlerden otomatik olarak hesaplanır.
useFormattedValue boolean false Seçilebilir değerler listesi, bu filtrenin çalıştığı DataTable sütunundan otomatik olarak doldurulurken gerçek hücre değerleri veya biçimlendirilmiş değerleri kullanılsın.
ui Nesne null Kontrolün kullanıcı arayüzünün çeşitli özelliklerini yapılandıran ü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: 
{label: 'Metric', labelSeparator: ':'}
ui.caption dize 'Değer seçin...' Hiçbir öğe seçilmediğinde değer seçici widget'ında gösterilecek başlık.
ui.sortValues boolean true Aralarından seçim yapılacak değerlerin sıralanıp sıralanmayacağı.
ui.selectedValuesLayout dize " kenara" Çoklu seçime izin verildiğinde seçili değerler nasıl gösterilir? Olası değerler:
  • 'aside': Seçilen değerler, değer seçici widget'ının yanında tek bir metin satırında görüntülenir.
  • 'below': Seçilen değerler widget'ın altında tek bir metin satırında görüntülenir.
  • 'belowWrapping': below etiketine benzer, ancak seçiciye sığmayan girişler yeni bir satıra kaydırılır.
  • 'belowStacked': Seçilen değerler widget'ın altındaki bir sütunda görüntülenir.
ui.allowNone boolean true Kullanıcının herhangi bir değer seçmesine izin verilip verilmediği. false ise kullanıcının mevcut değerler arasından en az bir değer seçmesi gerekir. Kontrol başlatma sırasında seçenek false olarak ayarlanırsa ve selectedValues durumu belirtilmemişse mevcut olanların ilk değeri otomatik olarak seçilir.
ui.allowMultiple boolean true Tek bir değer yerine birden fazla değerin seçilip seçilmeyeceği.
ui.allowTyping boolean true Kullanıcının olası seçenekler listesini daraltmak için (otomatik tamamlayıcı aracılığıyla) bir metin alanına yazmasına izin verilip verilmediği.
ui.label dize otomatik Kategori seçicinin yanında gösterilecek etiket. Belirtilmemişse kontrolün üzerinde çalıştığı sütunun etiketi kullanılır.
ui.labelSeparator dize yok Etiketi kategori seçiciden görsel olarak ayırmak için etikete eklenen bir ayırıcı dizedir.
ui.labelStacking dize "Yatay" Etiketin, kategori seçicinin üzerinde mi (dikey yığma) yoksa yanında mı (yatay yığma) görüntüleneceği. 'vertical' veya 'horizontal' kullanın.
ui.cssClass dize 'google-visualization-controls-categoryfilter' Özel stil için kontrole atanacak CSS sınıfı.

ChartRangeFilter

Grafiğin sürekli ekseninden bir değer aralığı seçmek için grafiğin üzerine iki başparmak yerleştirilmiş bir kaydırma çubuğu.

Eyalet

Ad Tür Varsayılan Açıklama
range.start sayı, tarih, tarih, saat veya günün saati Aralık başlangıç değeri Seçilen aralığın başlangıcı (bu değerler dahil).
range.end sayı, tarih, tarih, saat veya günün saati Aralık bitiş değeri Seçilen aralığın sonu (bu değerler dahil).

Seçenekler

Ad Tür Varsayılan Açıklama
filterColumnIndex sayı yok Filtrenin çalıştığı veri tablosundaki sütunun dizini. Bu seçeneğin veya filterColumnLabel seçeneğinin sunulması zorunludur. Her ikisi de mevcutsa bu seçenek öncelikli olur.

Yalnızca, kontrolün içine çizilen grafiğin sürekli ekseninde yer alan bir domain sütunu dizinini belirtmenin anlamlı olduğunu unutmayın.

filterColumnLabel dize yok Filtrenin çalıştığı veri tablosu sütununun etiketi. Bu seçeneğin veya filterColumnIndex seçeneğinin sağlanması zorunludur. Her ikisi de mevcutsa filterColumnIndex öncelikli olur.

Yalnızca, kontrolün içine çizilen grafiğin sürekli ekseninde yer alan bir alan sütunu etiketini belirtmenin anlamlı olduğunu unutmayın.

ui Nesne null Kontrolün kullanıcı arayüzünün çeşitli özelliklerini yapılandıran ü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: 
{chartType: 'ScatterChart', chartOptions: {pointSize: 10}}
ui.chartType dize "ComboChart" Kontrol içinde çizilen grafiğin türü.
Şunlardan biri olabilir: "AreaChart", "LineChart", "ComboChart" veya "ScatterChart".
ui.chartOptions Nesne 
{
 'enableInteractivity': false,
 'chartArea': {'height': '100%'},
 'legend': {'position': 'none'},
 'hAxis': {'textPosition': 'in'},
 'vAxis': {
  'textPosition': 'none',
  'gridlines': {'color': 'none'}
 }
}
Denetim içinde çizilen grafiğin yapılandırma seçenekleri. Kontrol panelindeki herhangi bir grafikle aynı yapılandırma düzeyine izin verir ve ChartWrapper.setOptions() tarafından kabul edilen biçimle aynı biçime sahiptir.

Ek seçenekler belirtebilir veya varsayılan seçenekleri geçersiz kılabilirsiniz (yine de en iyi görünüm için varsayılanların dikkatle seçildiğini unutmayın).

ui.chartView Nesne veya dize (serileştirilmiş Nesne) null Kontrolün içinde grafiği çizmek için kullanılan veri tablosuna uygulanacak görünümün spesifikasyonu. Kontrol panelindeki herhangi bir grafikle aynı düzeyde yapılandırmaya izin verir ve ChartWrapper.setView() tarafından kabul edilen biçimle aynı biçime sahiptir. Belirtilmezse grafiği çizmek için veri tablosunun kendisi kullanılır.

Çizilen grafiğin yatay ekseninin sürekli olması gerektiğini unutmayın. Bu nedenle, ui.chartView değerini buna göre belirtmeye dikkat edin.

ui.minRangeSize sayı Veri değeri farkı 1 piksel olarak yorumlanır Veri değeri birimlerinde belirtilen minimum seçilebilir aralık boyutu (range.end - range.start). Sayısal bir eksen için bu bir sayıdır (tam sayı olmayabilir). Tarih, tarih, saat veya günün saati ekseni için farkı milisaniye cinsinden belirten bir tam sayıdır.
ui.snapToData boolean false Doğru değerine ayarlanırsa aralık küçük resimleri en yakın veri noktalarına sabitlenir. Bu durumda, getState() tarafından döndürülen aralığın bitiş noktaları, veri tablosundaki değerler olabilir.

Etkinlikler

ControlWrapper etkinliklerine yapılan eklemeler:

Ad Açıklama Özellikler
statechange Her ControlWrapper için belgelendiği gibi yalnızca durumun değiştirilip değiştirilmediğini (küçük resimlerden biri veya aralığın kendisi sürükleniyor) belirten ekstra bir boole özelliği (inProgress) vardır. inProgress

DateRangeFilter

Tarih aralıklarını seçmek için çift değerli kaydırma çubuğu.

Aşağıdaki tabloda gösterilecek satırları değiştirmek için kaydırma çubuğunu hareket ettirmeyi deneyin.

Eyalet

Ad Tür Varsayılan Açıklama
lowValue sayı yok Seçilen aralığın alt kapsamı (bu değerler dahil).
highValue sayı yok Seçilen aralığın daha yüksek kapsamı (bu değerler dahil).
lowThumbAtMinimum boolean yok Kaydırma çubuğunun alt başparmağının izin verilen minimum aralıkta kilitli olup olmadığı. Ayarlanırsa lowValue değerini geçersiz kılar.
highThumbAtMaximum boolean yok Kaydırma çubuğunun üst başparmağının izin verilen maksimum aralıkta kilitli olup olmadığı. Ayarlanırsa highValue değerini geçersiz kılar.

Seçenekler

Ad Tür Varsayılan Açıklama
filterColumnIndex sayı yok Filtrenin çalışması gereken veri tablosu sütunu. Bu seçeneği veya filterColumnLabel seçeneğini sağlamanız zorunludur. Her ikisi de mevcutsa bu seçenek öncelikli olur. number türünde bir sütuna işaretlenmelidir.
filterColumnLabel dize yok Filtrenin çalışması gereken sütunun etiketi. Bu seçeneği veya filterColumnIndex seçeneğini sağlamanız zorunludur. Her ikisi de mevcutsa filterColumnIndex öncelikli olur. number türünde bir sütuna işaretlenmelidir.
minValue Tarih otomatik Daha düşük düzeyde aralık için izin verilen minimum değer. Tanımlanmamışsa değer, kontrol tarafından yönetilen DataTable'ın içeriğinden tahmin edilir.
maxValue Tarih otomatik Daha yüksek düzeyde aralık için izin verilen maksimum değer. Tanımlanmamışsa değer, kontrol tarafından yönetilen DataTable'ın içeriğinden tahmin edilir.
ui Nesne null Kontrolün kullanıcı arayüzünün çeşitli özelliklerini yapılandıran ü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: 
{label: 'Age', labelSeparator: ':'}
ui.format Nesne yok Tarih, dize olarak nasıl gösterilir? Geçerli tüm tarih biçimlerini kabul eder.
ui.step dize gün Kaydırma çubuğu küçük resimleri sürüklenirken mümkün olan minimum değişiklik: "gün"e kadar herhangi bir zaman birimi olabilir. ("ay" ve "yıl" henüz desteklenmemektedir.)
ui.ticks sayı otomatik Kaydırma çubuğu başparmaklarının kapladığı işaret sayısı (aralık çubuğunda sabit konumlar).
ui.unitIncrement dize "1" Aralık kapsamlarının birim artışları için artırılacak tutar. Birim artış, kaydırma çubuğunu hareket ettirmek için ok tuşlarını kullanmaya eşdeğerdir.
ui.blockIncrement sayı 10 Aralık kapsamlarının blok artışları için artırılacak tutar. Blok artışı, kaydırma çubuğu başparmaklarını hareket ettirmek için pgUp ve pgDown tuşlarını kullanmaya eşdeğerdir.
ui.showRangeValues boolean true Kaydırma çubuğunun yanında, seçilen aralığın uzantılarını görüntüleyen etiketlerin olup olmayacağı.
ui.orientation dize "Yatay" Kaydırma çubuğu yönü. 'horizontal' veya 'vertical'.
ui.label dize otomatik Kaydırma çubuğunun yanında gösterilecek etiket. Belirtilmemişse kontrolün üzerinde çalıştığı sütunun etiketi kullanılır.
ui.labelSeparator dize yok Etiketi kaydırma çubuğundan görsel olarak ayırmak için etikete eklenen bir ayırıcı dize.
ui.labelStacking dize "Yatay" Etiketin kaydırma çubuğunun üzerinde mi (dikey yığma) yoksa yanında mı (yatay yığma) gösterileceği. 'vertical' veya 'horizontal' kullanın.
ui.cssClass dize 'google-visualization-controls-rangefilter' Özel stil için kontrole atanacak CSS sınıfı.

NumberRangeFilter

Sayısal değer aralıklarını seçmek için çift değerli kaydırma çubuğu.

Eyalet

Ad Tür Varsayılan Açıklama
lowValue sayı yok Seçilen aralığın alt kapsamı (bu değerler dahil).
highValue sayı yok Seçilen aralığın daha yüksek kapsamı (bu değerler dahil).
lowThumbAtMinimum boolean yok Kaydırma çubuğunun alt başparmağının izin verilen minimum aralıkta kilitli olup olmadığı. Ayarlanırsa lowValue değerini geçersiz kılar.
highThumbAtMaximum boolean yok Kaydırma çubuğunun üst başparmağının izin verilen maksimum aralıkta kilitli olup olmadığı. Ayarlanırsa highValue değerini geçersiz kılar.

Seçenekler

Ad Tür Varsayılan Açıklama
filterColumnIndex sayı yok Filtrenin çalışması gereken veri tablosu sütunu. Bu seçeneği veya filterColumnLabel seçeneğini sağlamanız zorunludur. Her ikisi de mevcutsa bu seçenek öncelikli olur. number türünde bir sütuna işaretlenmelidir.
filterColumnLabel dize yok Filtrenin çalışması gereken sütunun etiketi. Bu seçeneği veya filterColumnIndex seçeneğini sağlamanız zorunludur. Her ikisi de mevcutsa filterColumnIndex öncelikli olur. number türünde bir sütuna işaretlenmelidir.
minValue sayı otomatik Daha düşük düzeyde aralık için izin verilen minimum değer. Tanımlanmamışsa değer, kontrol tarafından yönetilen DataTable'ın içeriğinden tahmin edilir.
maxValue sayı otomatik Daha yüksek düzeyde aralık için izin verilen maksimum değer. Tanımlanmamışsa değer, kontrol tarafından yönetilen DataTable'ın içeriğinden tahmin edilir.
ui Nesne null Kontrolün kullanıcı arayüzünün çeşitli özelliklerini yapılandıran ü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: 
{label: 'Age', labelSeparator: ':'}
ui.format Nesne yok Sayı, dize olarak nasıl gösterilir? Geçerli tüm sayı biçimlerini kabul eder.
ui.step sayı 1 veya tanımlanmışsa ticks üzerinden hesaplanmıştır Kaydırma çubuğu başparmakları sürüklenirken mümkün olan en küçük değişiklik.
ui.ticks sayı otomatik Kaydırma çubuğu başparmaklarının kapladığı işaret sayısı (aralık çubuğunda sabit konumlar).
ui.unitIncrement sayı 1 Aralık kapsamlarının birim artışları için artırılacak tutar. Birim artış, kaydırma çubuğunu hareket ettirmek için ok tuşlarını kullanmaya eşdeğerdir.
ui.blockIncrement sayı 10 Aralık kapsamlarının blok artışları için artırılacak tutar. Blok artışı, kaydırma çubuğu başparmaklarını hareket ettirmek için pgUp ve pgDown tuşlarını kullanmaya eşdeğerdir.
ui.showRangeValues boolean true Kaydırma çubuğunun yanında, seçilen aralığın uzantılarını görüntüleyen etiketlerin olup olmayacağı.
ui.orientation dize "Yatay" Kaydırma çubuğu yönü. 'horizontal' veya 'vertical'.
ui.label dize otomatik Kaydırma çubuğunun yanında gösterilecek etiket. Belirtilmemişse kontrolün üzerinde çalıştığı sütunun etiketi kullanılır.
ui.labelSeparator dize yok Etiketi kaydırma çubuğundan görsel olarak ayırmak için etikete eklenen bir ayırıcı dize.
ui.labelStacking dize "Yatay" Etiketin kaydırma çubuğunun üzerinde mi (dikey yığma) yoksa yanında mı (yatay yığma) gösterileceği. 'vertical' veya 'horizontal' kullanın.
ui.cssClass dize 'google-visualization-controls-rangefilter' Özel stil için kontrole atanacak CSS sınıfı.

StringFilter

Dize eşleştirme yoluyla verileri filtrelemenize olanak tanıyan basit bir metin giriş alanı. Her tuşa basıldıktan sonra güncellenir: Aşağıdaki tabloyu Can ve Jessica'yı gösterecek şekilde daraltmak için j yazmayı deneyin.

Eyalet

Ad Tür Varsayılan Açıklama
value dize veya nesne yok Kontrol giriş alanına girilen metin.

Seçenekler

Ad Tür Varsayılan Açıklama
filterColumnIndex sayı yok Filtrenin çalışması gereken veri tablosu sütunu. Bu seçeneği veya filterColumnLabel seçeneğini sağlamanız zorunludur. Her ikisi de mevcutsa bu seçenek öncelikli olur.
filterColumnLabel dize yok Filtrenin çalışması gereken sütunun etiketi. Bu seçeneği veya filterColumnIndex seçeneğini sağlamanız zorunludur. Her ikisi de mevcutsa filterColumnIndex öncelikli olur.
matchType dize "ön ek" Kontrolün yalnızca tam değerlerle ('exact'), değerin başından başlayarak ön eklerle ('prefix') veya herhangi bir alt dizeyle ('any') eşleşip eşleşmeyeceğini belirtir.
caseSensitive boolean false Eşleşmenin büyük/küçük harfe duyarlı olup olmayacağı.
useFormattedValue boolean false Kontrolün hücre biçimlendirilmiş değerlerle mi yoksa tekrar gerçek değerlerle mi eşleşmesi gerektiği.
ui Nesne null Kontrolün kullanıcı arayüzünün çeşitli özelliklerini yapılandıran ü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: 
{label: 'Name', labelSeparator: ':'}
ui.realtimeTrigger boolean true Kontrolün bir tuşa her basıldığında mı yoksa yalnızca giriş alanı "değiştiğinde" mi (odak kaybı veya Enter tuşuna basma) eşleşmesi gerektiği.
ui.label dize otomatik Giriş alanının yanında gösterilecek etiket. Belirtilmemişse kontrolün üzerinde çalıştığı sütunun etiketi kullanılır.
ui.labelSeparator dize yok Etiketi giriş alanından görsel olarak ayırmak için etikete eklenen bir ayırıcı dize.
ui.labelStacking dize "Yatay" Etiketin, giriş alanının üzerinde mi (dikey yığma) yoksa yanında mı (yatay yığma) görüntüleneceğini belirtir. 'vertical' veya 'horizontal' kullanın.
ui.cssClass dize 'google-visualization-controls-stringfilter' Özel stil için kontrole atanacak CSS sınıfı.