Kontroller ve Gösterge Tabloları

Bu sayfada, birden çok grafiğin kontrol panellerinde nasıl birleştirileceğini ve kullanıcılara hangi verilerin gösterileceğini değiştirme kontrolü verebilirsiniz.

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 kendinizi bir yandan kablolama yükünden kurtarıp bir kontrol panelinin parçası olan tüm grafikleri koordine edebilirsiniz.

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

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

Kontroller, google.visualization.ControlWrapper sınıfları kullanılarak tanımlanır. Tesisat sistemindeki borular ve vanalar gibi davrandıkları ControlWrapper örneği kontrol paneline ekleyebilirsiniz. Bu girişler, kullanıcı girişlerini toplar ve bilgileri kullanarak kontrol panelinin hangi verilerin bir parçası olduğu grafiklerde kullanılabilir olacağını belirler.

Pasta grafik tarafından görselleştirilen verileri yönlendirmek için kategori seçici ve aralık kaydırma çubuğunun kullanıldığı aşağıdaki örneğe göz atın.

Not: Kontrol paneli etkileşimlidir. Kontrolleri çalıştırmayı deneyin ve grafikteki değişikliği gerçek zamanlı olarak görün.

Kontrolleri ve Kontrol Panellerini Kullanma

Bir kontrol paneli oluşturup sayfanıza yerleştirmenin temel adımlarını burada bulabilirsiniz. Aşağıdaki tüm adımların açıklandığı, her adımla ilgili ayrıntılı bilgilerin yer aldığı bir kod snippet'i göreceksiniz.

  1. Kontrol paneliniz için bir HTML iskelesi oluşturun. Sayfanızda, bir kontrol panelinin her üyesini tutmak için gereken sayıda HTML öğesi bulunmalıdır. Buna gösterge tablosunun ve bir parçası olan tüm denetimler ve grafikler dahildir. Her biri için genellikle <div> kullanırsınız.
  2. Kitaplıklarınızı yükleyin. Bir kontrol panelinde sayfaya yalnızca iki kitaplığın eklenmesi veya yüklenmesi gerekir: Google AJAX API'si ve Google Görselleştirme controls paketi.
  3. Verilerinizi hazırlayın. Verileri görselleştirmek için hazırlamanız gerekir. Bu, verileri kodda kendiniz belirtmeniz veya uzak bir siteyi veriler için sorgulamanız gerektiği anlamına gelir.
  4. Kontrol paneli örneği oluşturun. Kontrol panelini oluşturmak için oluşturucuyu çağırın ve kontrol panelinde yer alan <div> öğesine bir referans iletin.
  5. İhtiyaç duyduğunuz sayıda kontrol ve grafik örneği oluşturun. Kontrol panelinin yönettiği her bir grafiği ve denetimi açıklamak için google.visualization.ChartWrapper ve google.visualization.ControlWrapper örnekleri oluşturun.
  6. Bağımlılıklar oluşturun. Kontrol panelinizde bind() numaralı telefonu kontrol edip kontrol ve grafik örneklerini iletmeye başlayın. Böylece kontrol panelinde neyin yönetileceğini bilirsiniz. Bir denetim ve grafik birbirine bağlandıktan sonra kontrol paneli, grafiği, denetimin veriler üzerinde uyguladığı kısıtlamalarla eşleşecek şekilde günceller.
  7. Kontrol panelinizi çizin. Kontrol panelinizin tamamını sayfada çizmek için kontrol panelinizde draw() numaralı telefonu arayıp verilerinizi iletin.
  8. Çizimden sonra programatik değişiklikler. İsteğe bağlı olarak, ilk çizimden sonra kontrol panelinin parçası olan kontrolleri programlı olarak çalıştırabilir ve kontrol panelinin grafiklere göre güncellenmesini sağlayabilirsiniz.

Aşağıda, pasta grafiğin gösterildiği aralık kaydırma çubuğunun yer aldığı basit bir kontrol paneli oluşturan basit bir sayfa örneği verilmiştir. Açılan 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 paneli aşağıda verilmiştir.

1. Kontrol Paneliniz için HTML İskelet Oluşturma

Sayfanızda hem kontrol panelinin kendisi hem de tüm kontroller ve grafiklerin bir parçasını tutacak kadar HTML öğesi (genellikle <div>s) bulunmalıdır. Kontrol paneli, kontrol ve grafik örneklerini örneklendirirken öğelerine referans vermeniz gerektiğinden 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ükleyin

Bir kontrol panelinde sayfaya yalnızca iki kitaplığın dahil edilmesi veya yüklenmesi gerekir: Google AJAX API'si 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 tanımlar ve bunları, başka bir işlem yapmanıza gerek kalmadan 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, gerekli tüm yardımcı yöntemlerinin ve sınıflarının verilerinizi hazırlamaya hazır olabileceğini görebilirsiniz.

Kontrol panelleri, grafiklerle aynı şekilde bir DataTable'daki verileri kabul eder.

4. Kontrol Paneli Örneği Oluşturma

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

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

Kontrol panelleri JavaScript sınıfı olarak gösterilir. Kontrol panelinizi örnekledikten sonra etkinlik dinleyicileri ekleme gibi isteğe bağlı birkaç adım gerçekleştirebilirsiniz (örneğin, kontrol paneli "hazır olduğunda" bildirim gönderilir). Kontrol panelleri, etkinlikleri grafiklerle aynı şekilde işler. Bu nedenle, daha fazla bilgi için grafik bölümündeki Görselleştirme Etkinliklerini Kullanma veya Hataları İyi Gösterme konularına bakın.

5. Kontrol ve Grafik Örnekleri Oluşturma

Kontrol panelinin parçası olacak her bir kontrol ve grafik için ihtiyaç duyduğunuz 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 örnekleri oluştururken dataTable veya dataSourceUrl parametresini belirtmeyin. Kontrol paneli her birini uygun verilerle beslemeyi üstlenir. Bununla birlikte, 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 sütununun hangi sütununda çalışacağını belirtmek için tüm kontrollere filterColumnIndex (veya filterColumnLabel) vermeniz gerekir (yukarıdaki örnekte, Donuts yedi etiketli sütunda çalışır).

  • İlk çizildiklerinde bunları açık bir şekilde başlatmak için denetimlerdeki state yapılandırma seçeneğini kullanın. Örneğin, bir aralık kaydırma çubuğunun kontrolündeki başlangıç noktaları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ırlama adımında hazırladığınız temel veri tablosunu paylaşır. Bununla birlikte, grafiklerin doğru şekilde görüntülenmesi için genellikle belirli bir sütun düzeni gerekir: Örneğin, bir pasta grafik, etiket için bir dize sütunu ve ardından değer için bir sayı sütunu gerektirir.

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

      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ık Oluşturun

Hem kontrol panelini hem de bu denetime dahil olacak tüm kontroller ve grafikleri örneklendirdikten sonra kontrol paneline kontroller ve grafikler arasındaki mevcut durumu bildirmek için bind() yöntemini kullanın.

Bir kontrol ve grafik birbirine bağlandıktan sonra kontrol paneli, grafiği, kontrolün veriler üzerinde uyguladığı kısıtlamalarla eşleşecek şekilde günceller. Derlediğiniz örnek kontrol panelinde aralık kaydırma çubuğu ve pasta grafik birbirine bağlanır. Bu nedenle, ilkiyle etkileşimde bulunduğunuzda önceki tablo yalnızca seçilen aralıkla eşleşen verileri gösterecek şekilde güncellenir. 

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

Bire bir, bire-çok, çoka-çok ve çoka-çok farklı yapılandırmalarda kontrolleri ve grafikleri bağlayabilirsiniz. Bir grafiğe birden fazla denetim bağlandığında kontrol paneli, grafiği tüm bağlı denetimlerin zorunlu kıldığı birleştirilmiş kısıtlamalarla eşleşecek şekilde günceller. Aynı zamanda, bir kontrol aynı anda birden fazla grafiği de artırabilir. Aynı anda birden çok bağlamayı belirtmek için dizileri tek örnek yerine bind() yöntemine iletin. Ayrıca birden fazla bind() çağrısını birlikte zincirleyebilirsiniz. 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);

Gelişmiş kullanımlarda, bağımlı zincirlerini oluşturmak için kontrolleri diğer kontrollere de bağlayabilirsiniz. 

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

7. Kontrol Panelinizi Çiz

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 destekleyen DataTable (veya DataView).

Kontrol panelinin yapısını her değiştirdiğinizde (örneğin, ona yeni kontroller veya grafikler ekleyerek) ya da kontrol panelini destekleyen genel DataTable değerini değiştirdiğinizde draw() işlevini çağırmanız gerekir.

Kontrol paneli örneği, draw() parçasının parçası olan tüm kontrollerin ve grafiklerin çizimini sonlandırdığında ready etkinliğini tetikler. Yönetilen kontrollerden veya grafikten herhangi birinin çizilememesi durumunda error etkinliği tetiklenir. Etkinlikleri yönetme hakkında daha fazla bilgi edinmek için Etkinlikleri Kullanma bölümüne bakın.

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

8. Çizimden Sonra Programlı Değişiklikler

İlk draw() kontrol paneli tamamlandıktan sonra yayınlanır ve üzerinde gerçekleştirdiğiniz tüm işlemlere otomatik olarak yanıt verir (ör. kontrol panelinin parçası olan bir kontrol kaydırma çubuğu aralığını değiştirmek).

Kontrol paneli durumunu programatik olarak değiştirmeniz gerekiyorsa doğrudan bağlı olan ControlWrapper ve ChartWrapper örneklerinde bu işlemi yapabilirsiniz. Genel kural, ihtiyaç duyduğunuz değişiklikleri doğrudan belirli ControlWrapper (veya ChartWrapper) örneğinde gerçekleştirmektir: Örneğin, sırasıyla setOption() ve setState() aracılığıyla bir kontrol seçeneğini veya durumunu değiştirip draw() yöntemini çağırın. Kontrol paneli, istenen değişikliklerle eşleşecek şekilde güncellenir.

Aşağıdaki örnekte bu tür bir örnek 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 and Controls API'sinde açığa çıkan nesneler ve tüm kontrollerde gösterilen standart yöntemler listelenir.

Kontrol paneli

Aynı temel verileri paylaşan ortak çalışmaya dayalı denetimler ve grafiklerden oluşan bir koleksiyonu temsil eder.

Marka

Dashboard(containerRef)
containerRef
Sayfadaki kontrol paneli içeriğini barındıracak geçerli bir kapsayıcı öğeye yapılan referans.

Yöntemler

Kontrol Paneli aşağıdaki yöntemleri gösterir:

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

Bir veya daha fazla Gösterge Tablosunu bir veya daha fazla kontrol paneli katılımcısına bağlar (grafikler veya diğer kontroller). Bu çözümlerden biri kontrol paneli tarafından yönetilen verileri etkileyen bir programatik veya kullanıcı etkileşimi topladığında diğerinin yeniden çizilmesini sağlar. Birden fazla bind() çağrısını zincir halinde birbirine bağlamak için kontrol paneli örneğini döndürür.

  • controls: Bağlanacak kontrolleri tanımlayan tek bir örnek veya bir google.visualization.ControlWrapper örneği dizisi.
  • grafikler: Kontroller tarafından sağlanan grafikleri tanımlayan tek bir örnek veya bir google.visualization.ChartWrapper örneği dizisi.
draw(dataTable) Yok

Kontrol panelini çizer.
getSelection() Nesne dizisi

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

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

Genişletilmiş açıklama

Etkinlikler

Kontrol Paneli nesnesi aşağıdaki etkinlikleri atar. Herhangi bir etkinlik atılmadan önce Dashboard.draw() numarasını aramanı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 kontrollerden ve grafiklerden birinin veya daha fazlasının oluşturulması başarısız olabilir. kimlik, mesaj
ready

Kontrol paneli çizimi tamamladı ve değişiklikleri kabul etmeye 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. Çizdikten sonra kontrol panelini (veya görüntülenen verileri) değiştirmek isterseniz draw yöntemini çağırmadan önce bu etkinlik için bir dinleyici oluşturmanız ve değişikliklerinizi yalnızca etkinlik tetiklendikten sonra uygulamanız gerekir.

ready etkinliği aynı zamanda şunları da tetikler:

  • Kontrollerden biriyle kullanıcı veya programatik etkileşim tarafından tetiklenen bir kontrol paneli yenilemesi tamamlandıktan sonra
  • Kontrol panelinin herhangi bir grafik bölümündeki draw() yöntemine yapılan programatik çağrıdan sonra.
Yok

Kontrol Sarmalayıcı

ControlWrapper nesnesi, yapılandırılmış bir kontrol örneğinin JSON gösteriminin sarmalayıcısıdır. Sınıf, bir kontrol paneli denetimi tanımlamak, çizimini yapmak ve durumunu programatik olarak değiştirmek için kolaylık yöntemleri sunar.

Marka

ControlWrapper(opt_spec)
opt_spec
[İsteğe bağlı] - Denetimi tanımlayan bir JSON nesnesi veya bu nesnenin serileştirilmiş bir sürümü. JSON nesnesinin desteklenen özellikleri aşağıdaki tabloda gösterilmektedir. Belirtilmezse ControlWrapper tarafından gösterilen set... yöntemlerini kullanarak tüm uygun özellikleri ayarlamanız gerekir.
Özellik Tür Zorunlu Varsayılan Açıklama
kontrol türü Dize Zorunlu yok Kontrolün sınıf adı. Google paketleri için google.visualization paket adı atlanabilir. Örnekler: CategoryFilter, NumberRangeFilter.
kapsayıcı kimliği Dize Zorunlu yok Sayfanızdaki kontrolü barındıracak DOM öğesinin kimliği.
seçenekler İtiraz et İsteğe bağlı yok Denetim seçeneklerini açıklayan bir nesne. JavaScript değişmez gösterimini kullanabilir veya nesneye tutma yeri sağlayabilirsiniz. Örnek: "options": {"filterColumnLabel": "Age", "minValue": 10, "maxValue": 80}
state İtiraz et İsteğe bağlı yok Denetimin durumunu açıklayan bir nesne. Durum, denetimi çalıştıran kullanıcının etkileyebileceği tüm değişkenleri toplar. Örneğin, aralık kaydırma çubuğu, kaydırma çubuğunun alt ve üst parmaklarının kapladığı konumlarla açıklanabilir. JavaScript değişmez gösterimini kullanabilir veya nesneye tutma yeri 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ü çeker. Normalde kontrolün bulunduğu kontrol panelinde çizim yapılır. Seçenekler veya durum gibi diğer ayarları değiştirdikten sonra kontrolün programatik olarak yeniden çizilmesini zorunlu kılmak için draw() yöntemini çağırmanız gerekir.

toJSON() Dize Denetimin JSON temsilinin dize sürümünü döndürür.
clone() Sarmalayıcı Kontrol sarmalayıcının derin bir kopyasını döndürür.
getControlType() Dize Kontrolün sınıf adı. Bu bir Google kontrolüyse ad, google.visualization için uygun değildir. Örneğin, bu bir CategoryFiltre kontrolü olsaydı "google.visualization.CategoryFiltre" yerine "KategoriFiltresi" döndürür.
getControlName() Dize setControlName() tarafından atanan kontrol adını döndürür.
getControl() Kontrol nesnesi referansı Bu ControlWrapper tarafından oluşturulan denetime bir başvuru döndürür. ControlWrapper nesnesinde draw() çağrısı yapana kadar (veya bunu kontrol panelinde tutarak) ve hazır bir etkinlik başlatana kadar boş değer döndürür. Döndürülen nesne yalnızca bir yöntemi açığa çıkarır: resetControl(), kontrol durumunu başlatıldığı yönteme (HTML form öğesini sıfırlama gibi) sıfırlar.
getContainerId() Dize Kontrolün DOM kapsayıcı öğesinin kimliği.
getOption(key, opt_default_val) Tüm türler

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

  • anahtar: Alınan seçeneğin adı. 'vAxis.title' gibi uygun bir ad olabilir.
  • opt_default_value [İsteğe bağlı] - Belirtilen değer tanımlanmamış veya boşsa bu değer döndürülür.
getOptions() İtiraz et Bu denetim için seçenekler nesnesini döndürür.
getState() İtiraz et Kontrol durumunu döndürür.
setControlType(type) Yok Kontrol türünü ayarlar. Örnek oluşturmak için denetimin sınıf adını iletin. Bu bir Google kontrolüyse, google.visualization olarak nitelendirmeyin. Örneğin, sayısal bir sütunun üzerindeki aralık kaydırma çubuğu için "NumberRangeFiltre" değerini iletin.
setControlName(name) Yok Kontrol için rastgele bir ad belirler. Bu, kontrolün herhangi bir yerinde gösterilmez ancak yalnızca sizin referansınız içindir.
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 belirler. Burada anahtar seçenek adı, değer ise değerdir. Bir seçeneğin ayarını kaldırmak üzere değer için boş bırakın. Anahtarın, 'vAxis.title' gibi uygun bir ad olabileceğini unutmayın.
setOptions(options_obj) Yok Bir denetim için tam seçenekler nesnesini ayarlar.
setState(state_obj) Yok Kontrol durumunu ayarlar. Durum, denetimi çalıştıran kullanıcının etkileyebileceği tüm değişkenleri toplar. Örneğin, aralık kaydırma çubuğu, kaydırma çubuğunun alt ve üst parmaklarının kapladığı konum olarak açıklanabilir.

Etkinlikler

ControlWrapper nesnesi aşağıdaki etkinlikleri atar. Herhangi bir etkinlik atılmadan önce ControlWrapper.draw() numaralı telefonu çağırmanız (veya kontrolü basılı tutarak kontrol panelini çizmeniz) gerektiğini unutmayın.

Ad Açıklama Özellikler
error Kontrol oluşturmaya çalışılırken bir hata oluştuğunda tetiklenir. kimlik, mesaj
ready Kontrol, kullanıcı etkileşimini ve harici yöntem çağrılarını kabul etmeye hazırdır. Çekme işleminden sonra denetim ve çağrı yöntemleriyle etkileşimde bulunmak isterseniz bu etkinliği için draw yöntemini çağırmadan önce bir işleyici oluşturmanız ve bunları yalnızca etkinlik tetiklendikten sonra çağırmanız gerekir. Alternatif olarak, kontrol panelinde ready ile ilgili etkinliği, kontrol ve arama kontrolü yöntemlerini basılı tutarak, yalnızca etkinlik tetiklendikten sonra dinleyebilirsiniz. Yok
statechange Kullanıcı kontrolle etkileşimde bulunduğunda tetiklenir ve bu işlem durumunu etkiler. Örneğin, bir aralık kaydırma çubuğunun yerini değiştirdiğinizde statechange etkinliği tetiklenir. Etkinlik tetiklendikten sonra güncellenmiş kontrol durumunu almak için ControlWrapper.getState() numaralı telefonu arayın. Yok

Grafik Sarmalayıcı

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

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

  • dataTable, query, dataSourceUrl ve refreshInterval özelliklerini açıkça ayarlamayın. Grafiğin bulunduğu kontrol paneli, grafik için gereken verileri feed'e yerleştirir.
  • Kontrol ve Grafik Örnekleri Oluşturma bölümünde gösterildiği gibi, view özelliğini, kontrol panelinde verilen dataTable sütunundaki tüm sütunlardan hangilerinin grafikle alakalı olduğunu belirtmek üzere ayarlayın.

Filtreler, kullanıcıların grafiğinizde hangi verilerin gösterileceğini etkileşimli olarak seçmek için kullanabileceği grafik öğelerdir. Bu bölümde Google Grafik filtreleri açıklanmıştır: KategoriFiltresi, ChartRangeFiltre, DateRangeFiltre, NumberRangeFiltre ve StringFiltre.

Bunların herhangi birini ControlWrapper.setControlType() parametresi olarak kullanabilirsiniz.

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

KategoriFiltresi

Tanımlanmış değerler kümesinden bir veya daha fazlasını seçmek için kullanılan bir seçici.

Eyalet

Ad Tür Varsayılan Açıklama
seçiliDeğerler Nesne veya temel türler yok Şu anda seçili olan değer grubu. Seçilen değerler, values seçeneği tarafından tanımlanan genel seçilebilir değerlerden oluşan bir grup olmalıdır (konu dışı değerler göz ardı edilir). CategoryFilter birden çok seçeneğe izin vermezse yalnızca dizinin ilk değeri korunur.

Seçenekler

Ad Tür Varsayılan Açıklama
filtreSütunDizini number (sayı) yok Filtrenin üzerinde çalışması gereken veri tablosunun sütunu. Bu seçeneği veya filterColumnLabel özelliğini sağlamanız zorunludur. Her ikisi de mevcutsa bu seçenek önceliklidir.
filtreSütunEtiketi string yok Filtrenin üzerinde çalışması gereken sütunun etiketi. Bu seçeneği veya filterColumnIndex özelliğini sağlamanız zorunludur. İkisi de mevcutsa filterColumnIndex öncelikli olur.
values Dizi otomatik Aralarından seçim yapabileceğiniz değerlerin listesi. Bir Nesne dizisi kullanılırsa, bu nesnelerin kullanıcıya gösterilmesi için uygun bir toString() temsili olmalıdır. Boş veya tanımsızsa değer listesi, bu kontrolün çalıştığı DataTable sütununda bulunan değerlerden otomatik olarak hesaplanır.
BiçimlendirilmişDeğer kullanın boolean yanlış Seçilebilir değerler listesi, bu filtrenin çalıştığı DataTable sütununda otomatik olarak doldurulurken, gerçek hücre değerleri ya da biçimlendirme değerleri kullanılır.
ui İtiraz et boş Denetimin kullanıcı arayüzünü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: 
{label: 'Metric', labelSeparator: ':'}
ui.caption string "Bir değer seçin..." Herhangi bir öğe seçili olmadığında değer seçici widget'ının içinde görüntülenecek başlık.
ui.sortDeğerler boolean true Aralarından seçim yapılacak değerlerin sıralanıp sıralanmayacağı.
ui.SelectedValuesLayout string "bir yana" Birden çok seçime izin verildiğinde seçilen 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österilir.
  • 'below': Seçilen değerler widget'ın altında tek bir metin satırında gösterilir,
  • 'belowWrapping': below parametresine benzerdir 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.allowYok boolean true Kullanıcının hiçbir değer seçmesine izin verilip verilmediği. false öğesi varsa kullanıcının kullanılabilir değerlerden en az bir tanesini seçmesi gerekir. Kontrol başlatılırken seçenek false olarak ayarlanırsa ve selectedValues durumu belirtilmezse kullanılabilir durumdaki ilk değer otomatik olarak seçilir.
ui.allowMultiple boolean true Yalnızca bir değer yerine birden çok değerin seçili olup olamayacağı.
ui.allowTyping boolean true Kullanıcının, olası seçenekler listesini daraltmak için bir metin alanına yazmasına izin verilip verilmediği. (bir otomatik tamamlama aracılığıyla)
ui.label string otomatik Kategori seçicinin yanında görüntülenecek etiket. Belirtilmemesi durumunda denetimin çalıştığı sütunun etiketi kullanılır.
ui.labelAyırıcı string yok Etiketi kategori seçiciden görsel olarak ayırmak için etikete eklenen bir ayırıcı dize.
ui.labelYığını string "yatay" Etiketin, kategori seçicinin üzerinde (dikey yığma) veya yanında (yatay yığma) gösterilip gösterilmeyeceği. 'vertical' veya 'horizontal' kullanın.
ui.cssSınıfı string "google-visualization-controls-categoryfilter" Özel stil için denetime atanacak CSS sınıfı.

Grafik Aralığı Filtresi

Grafiğin sürekli ekseninden bir değer aralığı seçmek için grafiğin üzerinde iki parmakla üste kayan bir kaydırma çubuğu.

Eyalet

Ad Tür Varsayılan Açıklama
aralık.başlangıç sayı, tarih, tarih/saat veya saat Aralık başlangıç değeri Seçilen aralığın başı (dahil).
aralık.bitiş sayı, tarih, tarih/saat veya saat Aralık bitiş değeri Seçilen aralığın sonu (dahil).

Seçenekler

Ad Tür Varsayılan Açıklama
filtreSütunDizini number (sayı) yok Filtrenin çalıştığı veri tablosunda sütunun dizini. Bu seçeneği veya filterColumnLabel özelliğini sağlamanız zorunludur. Her ikisi de mevcutsa bu seçenek önceliklidir.

Yalnızca kontrol için çizilen grafiğin sürekli ekseninde yer alan bir alan sütununun dizinini belirtmenizin mantıklı olacağını unutmayın.

filtreSütunEtiketi string yok Filtrenin çalıştığı veri tablosunun sütununun etiketi. Bu seçeneği veya filterColumnIndex özelliğini sağlamanız zorunludur. İkisi de mevcutsa filterColumnIndex öncelikli olur.

Yalnızca kontrol için çizilen grafiğin sürekli ekseninde yer alan bir alan sütununun etiketini belirtmenin mantıklı olduğunu unutmayın.

ui İtiraz et boş Denetimin kullanıcı arayüzünü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: 
{chartType: 'ScatterChart', chartOptions: {pointSize: 10}}
ui.grafikTürü string "Karma Grafik" Kontrol için çizilen grafiğin türü.
Şunlardan biri olabilir: "AreaChart", "LineChart", "ComboChart" veya "ScatterChart".
ui.grafikSeçenekler İtiraz et 
{
 'enableInteractivity': false,
 'chartArea': {'height': '100%'},
 'legend': {'position': 'none'},
 'hAxis': {'textPosition': 'in'},
 'vAxis': {
  'textPosition': 'none',
  'gridlines': {'color': 'none'}
 }
}
Denetimin içine çizilen grafiğin yapılandırma seçenekleri. Kontrol panelindeki herhangi bir grafik ile aynı yapılandırma düzeyine izin verir ve ChartWrapper.setOptions() tarafından kabul edilen biçimle uyumludur.

Ek seçenekler belirleyebilir veya varsayılan seçenekleri geçersiz kılabilirsiniz (ancak optimum görünüm için varsayılan ayarların dikkatli bir şekilde seçildiğini unutmayın).

ui.graphicView Nesne veya dize (serileştirilmiş Nesne) boş Kontrolün içine grafik çizmek için kullanılan veri tablosuna uygulanacak görünümün spesifikasyonu. Kontrol panelindeki herhangi bir grafik ile aynı yapılandırma düzeyine izin verir ve ChartWrapper.setView() tarafından kabul edilen biçimle uyumludur. Belirtilmezse grafiği çizmek için veri tablosu kullanılır.

Çizilen grafiğin yatay ekseninin sürekli olması gerektiğini, bu nedenle ui.chartView öğesini uygun şekilde belirtmeye dikkat edin.

ui.minAralıkBoyutu number (sayı) Veri değeri farkı 1 piksel olarak yorumlanıyor Veri değeri birimlerinde belirtilen minimum seçilebilir aralık boyutu (range.end - range.start). Sayısal eksen için bu bir sayıdır (tam sayı olması gerekmez). Tarih, tarih, saat veya saat ekseni için farkı milisaniye cinsinden belirten bir tam sayıdır.
ui.snapToVerileri boolean yanlış Doğru değerine ayarlanırsa aralık başparmakları en yakın veri noktalarına tutturulur. Bu durumda, getState() tarafından döndürülen aralığın uç noktaları mutlaka veri tablosundaki değerlerdir.

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 (inProgress Devam ediyor

Tarih AralığıFiltre

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

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

Eyalet

Ad Tür Varsayılan Açıklama
düşükDeğer number (sayı) yok Seçilen aralığın alt kapsamı (dahil).
yüksekDeğer number (sayı) yok Seçilen aralığın daha yüksek düzeyi (dahil).
minimumThumbAtMinimum boolean yok Kaydırma çubuğunun alt kaydırma çubuğunun izin verilen minimum aralıkta kilitli olup olmadığı. Ayarlanırsa lowValue öğesini geçersiz kılar.
en yüksekThumbAtMaksimum boolean yok Kaydırıcının başparmağının izin verilen maksimum aralıkta kilitli olup olmadığı. Ayarlanırsa highValue öğesini geçersiz kılar.

Seçenekler

Ad Tür Varsayılan Açıklama
filtreSütunDizini number (sayı) yok Filtrenin üzerinde çalışması gereken veri tablosunun sütunu. Bu seçeneği veya filterColumnLabel özelliğini sağlamanız zorunludur. Her ikisi de mevcutsa bu seçenek önceliklidir. number türünde bir sütuna işaret etmelidir.
filtreSütunEtiketi string yok Filtrenin üzerinde çalışması gereken sütunun etiketi. Bu seçeneği veya filterColumnIndex özelliğini sağlamanız zorunludur. İkisi de mevcutsa filterColumnIndex öncelikli olur. number türünde bir sütuna işaret etmelidir.
minDeğer Tarih otomatik Aralık için izin verilen minimum değer. Tanımlanmamışsa değer, kontrol tarafından yönetilen DataTable içeriklerinden elde edilir.
maks. değer Tarih otomatik Aralık için izin verilen maksimum değer. Tanımlanmamışsa değer, kontrol tarafından yönetilen DataTable içeriklerinden elde edilir.
ui İtiraz et boş Denetimin kullanıcı arayüzünü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: 
{label: 'Age', labelSeparator: ':'}
ui.biçimi İtiraz et yok Tarihin dize olarak temsil edilmesi. Geçerli tarih biçimini kabul eder.
ui.step string gün Kaydırma çubuğu başparmaklarını sürüklerken mümkün olan en küçük değişiklik: "gün"e kadar herhangi bir zaman birimi olabilir. ("ay" ve "yıl" henüz desteklenmemektedir.)
ui.ticks number (sayı) otomatik Kaydırma çubuklarının kaç kez kaplayabileceği (aralık sabit noktaları) sayısı.
ui.unitIncrement string "1" Aralık kapsamının birim artışları için artırılacak tutar. Birim artışı, kaydırma çubuğunun başparmağınızı hareket ettirmek için ok tuşlarını kullanmaya eşdeğerdir.
ui.blockIncrement number (sayı) 10 Aralık kapsamlarının blok artışları için artırılacak tutar. Blok artışı, kaydırma çubuğunun 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 kapsamını gösteren etiketlerin olup olmayacağı.
ui.orientation string "yatay" Kaydırma çubuğunun yönü. 'horizontal' veya 'vertical'.
ui.label string otomatik Kaydırma çubuğunun yanında görüntülenecek etiket. Belirtilmemesi durumunda denetimin çalıştığı sütunun etiketi kullanılır.
ui.labelAyırıcı string yok Etiketi, kaydırma çubuğundan görsel olarak ayırmak için etikete eklenen bir ayırıcı dize.
ui.labelYığını string "yatay" Etiketin, kaydırma çubuğunun üstünde mi (dikey yığınlama) yoksa yanında mı (yatay yığınlı)? 'vertical' veya 'horizontal' kullanın.
ui.cssSınıfı string "google-visualization-controls-rangefilter" Özel stil için denetime atanacak CSS sınıfı.

NumberRangeFiltre

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

Eyalet

Ad Tür Varsayılan Açıklama
düşükDeğer number (sayı) yok Seçilen aralığın alt kapsamı (dahil).
yüksekDeğer number (sayı) yok Seçilen aralığın daha yüksek düzeyi (dahil).
minimumThumbAtMinimum boolean yok Kaydırma çubuğunun alt kaydırma çubuğunun izin verilen minimum aralıkta kilitli olup olmadığı. Ayarlanırsa lowValue öğesini geçersiz kılar.
en yüksekThumbAtMaksimum boolean yok Kaydırıcının başparmağının izin verilen maksimum aralıkta kilitli olup olmadığı. Ayarlanırsa highValue öğesini geçersiz kılar.

Seçenekler

Ad Tür Varsayılan Açıklama
filtreSütunDizini number (sayı) yok Filtrenin üzerinde çalışması gereken veri tablosunun sütunu. Bu seçeneği veya filterColumnLabel özelliğini sağlamanız zorunludur. Her ikisi de mevcutsa bu seçenek önceliklidir. number türünde bir sütuna işaret etmelidir.
filtreSütunEtiketi string yok Filtrenin üzerinde çalışması gereken sütunun etiketi. Bu seçeneği veya filterColumnIndex özelliğini sağlamanız zorunludur. İkisi de mevcutsa filterColumnIndex öncelikli olur. number türünde bir sütuna işaret etmelidir.
minDeğer number (sayı) otomatik Aralık için izin verilen minimum değer. Tanımlanmamışsa değer, kontrol tarafından yönetilen DataTable içeriklerinden elde edilir.
maks. değer number (sayı) otomatik Aralık için izin verilen maksimum değer. Tanımlanmamışsa değer, kontrol tarafından yönetilen DataTable içeriklerinden elde edilir.
ui İtiraz et boş Denetimin kullanıcı arayüzünü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: 
{label: 'Age', labelSeparator: ':'}
ui.biçimi İtiraz et yok Sayıyı dize olarak ifade etme. Geçerli sayı biçimini kabul eder.
ui.step number (sayı) 1 veya tanımlanmışsa ticks kullanılarak hesaplanır Kaydırma çubuğunun başparmaklarını sürüklerken mümkün olan en küçük değişikliği yapın.
ui.ticks number (sayı) otomatik Kaydırma çubuklarının kaç kez kaplayabileceği (aralık sabit noktaları) sayısı.
ui.unitIncrement number (sayı) 1 Aralık kapsamının birim artışları için artırılacak tutar. Birim artışı, kaydırma çubuğunun başparmağınızı hareket ettirmek için ok tuşlarını kullanmaya eşdeğerdir.
ui.blockIncrement number (sayı) 10 Aralık kapsamlarının blok artışları için artırılacak tutar. Blok artışı, kaydırma çubuğunun 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 kapsamını gösteren etiketlerin olup olmayacağı.
ui.orientation string "yatay" Kaydırma çubuğunun yönü. 'horizontal' veya 'vertical'.
ui.label string otomatik Kaydırma çubuğunun yanında görüntülenecek etiket. Belirtilmemesi durumunda denetimin çalıştığı sütunun etiketi kullanılır.
ui.labelAyırıcı string yok Etiketi, kaydırma çubuğundan görsel olarak ayırmak için etikete eklenen bir ayırıcı dize.
ui.labelYığını string "yatay" Etiketin, kaydırma çubuğunun üstünde mi (dikey yığınlama) yoksa yanında mı (yatay yığınlı)? 'vertical' veya 'horizontal' kullanın.
ui.cssSınıfı string "google-visualization-controls-rangefilter" Özel stil için denetime atanacak CSS sınıfı.

Dize Filtresi

Dize eşleştirme yoluyla verileri filtrelemenizi sağlayan basit bir metin giriş alanı. Her tuş bastıktan sonra güncellenir: Aşağıdaki tabloyu John ve Jessica'ya göre daraltmak için j yazmayı deneyin.

Eyalet

Ad Tür Varsayılan Açıklama
value dize veya nesne yok Şu anda kontrol girişi alanına girilen metin.

Seçenekler

Ad Tür Varsayılan Açıklama
filtreSütunDizini number (sayı) yok Filtrenin üzerinde çalışması gereken veri tablosunun sütunu. Bu seçeneği veya filterColumnLabel özelliğini sağlamanız zorunludur. Her ikisi de mevcutsa bu seçenek önceliklidir.
filtreSütunEtiketi string yok Filtrenin üzerinde çalışması gereken sütunun etiketi. Bu seçeneği veya filterColumnIndex özelliğini sağlamanız zorunludur. İkisi de mevcutsa filterColumnIndex öncelikli olur.
eşleme türü string "önek" Kontrolün yalnızca tam değerlerle ('exact') eşleşmesi, değerin başından ('prefix') veya herhangi bir alt dizeden ('any') başlayan önekler.
büyük/küçük harfe duyarlı boolean yanlış Eşleşmenin büyük/küçük harfe duyarlı olup olmadığı.
BiçimlendirilmişDeğer kullanın boolean yanlış Kontrolün, hücre biçimlendirilmiş değerleriyle mi yoksa gerçek değerlerle yeniden mi eşleşeceği.
ui İtiraz et boş Denetimin kullanıcı arayüzünü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: 
{label: 'Name', labelSeparator: ':'}
ui.actualTetikleyici boolean true Kontrolün bir tuşa her basıldığında mı yoksa yalnızca giriş alanı "değiştiğinde" mi (odak kaybı ya da Enter tuşuna basılması) eşleşmesi gerektiğini belirtir.
ui.label string otomatik Giriş alanının yanında görüntülenecek etiket. Belirtilmemesi durumunda denetimin çalıştığı sütunun etiketi kullanılır.
ui.labelAyırıcı string yok Etiketi giriş alanından görsel olarak ayırmak için etikete eklenen bir ayırıcı dize.
ui.labelYığını string "yatay" Etiketin, giriş alanının üstünde (dikey yığma) veya yanında (yatay yığma) gösterilip gösterilmeyeceği. 'vertical' veya 'horizontal' kullanın.
ui.cssSınıfı string "google-visualization-controls-stringfilter" Özel stil için denetime atanacak CSS sınıfı.