این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

کنترل ها و داشبوردها

در این صفحه، نحوه ترکیب نمودارهای متعدد در داشبورد را مشاهده خواهید کرد و به کاربران کنترل هایی را برای دستکاری داده هایی که نشان می دهند، می دهید.

بررسی اجمالی

داشبوردها روشی ساده برای سازماندهی و مدیریت نمودارهای متعددی هستند که داده های اساسی یکسانی را به اشتراک می گذارند. با استفاده از API های توضیح داده شده در این صفحه، می توانید خود را از بار سیم کشی با هم و هماهنگ کردن تمام نمودارهایی که بخشی از داشبورد هستند رها کنید.

داشبوردها با استفاده از کلاس های google.visualization.Dashboard تعریف می شوند. نمونه های Dashboard یک DataTable حاوی داده ها را برای تجسم و مراقبت از ترسیم و توزیع داده ها در تمام نمودارهایی که بخشی از داشبورد هستند دریافت می کنند.

کنترل ها ویجت های رابط کاربری هستند (مانند انتخابگر دسته، لغزنده محدوده، تکمیل کننده خودکار...) که شما با آنها تعامل دارید تا داده های مدیریت شده توسط داشبورد و نمودارهایی را که بخشی از آن هستند هدایت کنید.

کنترل ها با استفاده از کلاس های google.visualization.ControlWrapper تعریف می شوند. می‌توانید نمونه‌های ControlWrapper را به داشبورد اضافه کنید، جایی که آنها مانند لوله‌ها و شیرهای یک سیستم لوله‌کشی عمل می‌کنند. آنها ورودی های کاربر را جمع آوری می کنند و از اطلاعات استفاده می کنند تا تصمیم بگیرند که کدام یک از داده هایی که داشبورد مدیریت می کند باید در اختیار نمودارهایی قرار گیرد که بخشی از آن هستند.

به مثال زیر نگاهی بیندازید که در آن از یک انتخابگر دسته و یک لغزنده محدوده برای هدایت داده های تجسم شده توسط نمودار دایره ای استفاده می شود.

توجه: داشبورد تعاملی است. کنترل ها را اجرا کنید و تغییرات نمودار را در زمان واقعی مشاهده کنید.

استفاده از کنترل ها و داشبوردها

در اینجا مراحل کلیدی برای ایجاد داشبورد و جاسازی آن در صفحه شما آمده است. در زیر یک قطعه کد را خواهید دید که تمام این مراحل را نشان می دهد و به دنبال آن اطلاعات دقیقی در مورد هر مرحله ارائه می شود.

یک اسکلت HTML برای داشبورد خود ایجاد کنید . صفحه شما باید به تعداد عناصر HTML مورد نیاز برای نگه داشتن هر عضو داشبورد داشته باشد. این شامل خود داشبورد و تمام کنترل ها و نمودارهایی است که بخشی از آن هستند. معمولاً برای هر یک از <div> استفاده می کنید.
کتابخانه های خود را بارگیری کنید . یک داشبورد فقط به دو کتابخانه نیاز دارد که در صفحه گنجانده یا بارگذاری شود: Google AJAX API و بسته controls Google Visualization.
داده های خود را آماده کنید . شما باید داده ها را برای تجسم آماده کنید. این به این معنی است که یا خودتان داده ها را در کد مشخص کنید، یا از یک سایت راه دور برای داده پرس و جو کنید.
یک نمونه داشبورد ایجاد کنید . داشبورد خود را با فراخوانی سازنده آن و ارسال یک مرجع به عنصر <div> که آن را نگه می دارد، نمونه سازی کنید.
هر تعداد کنترل و نمونه نمودار را که نیاز دارید ایجاد کنید. google.visualization.ChartWrapper و google.visualization.ControlWrapper را برای توصیف هر نمودار و کنترلی که داشبورد مدیریت می‌کند ایجاد کنید.
وابستگی ایجاد کنید. bind() را روی داشبورد خود فراخوانی کنید و نمونه‌های کنترل و نمودار را ارسال کنید تا به داشبورد اطلاع دهید که چه چیزی را باید مدیریت کند. هنگامی که یک کنترل و نمودار به یکدیگر متصل می شوند، داشبورد نمودار را به روز می کند تا با محدودیت هایی که کنترل بر داده ها اعمال می کند مطابقت داشته باشد.
داشبورد خود را بکشید . draw() را روی داشبورد خود فراخوانی کنید و داده های خود را ارسال کنید تا کل داشبورد روی صفحه ترسیم شود.
تغییرات برنامه ای پس از قرعه کشی در صورت تمایل، پس از قرعه کشی اولیه، می توانید کنترل هایی را که بخشی از داشبورد هستند، به صورت برنامه نویسی هدایت کنید و از داشبورد بخواهید نمودارها را در پاسخ به آن به روز کند.

در اینجا یک مثال ساده از صفحه ای است که یک داشبورد ساده با یک نوار لغزنده فاصله ایجاد می کند که نمودار دایره ای را هدایت می کند. داشبورد حاصل در زیر قطعه نشان داده شده است.

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

در اینجا داشبوردی است که این کد ایجاد می کند.

1. یک اسکلت HTML برای داشبورد خود ایجاد کنید

صفحه شما باید به تعداد عناصر HTML (معمولا <div>s) داشته باشد تا هم خود داشبورد و هم تمام کنترل‌ها و بخش‌های نمودار آن را در خود جای دهد. هنگام نمونه سازی داشبورد، کنترل و نمونه نمودار، باید یک مرجع به عنصر آنها ارسال کنید، بنابراین به هر عنصر HTML یک شناسه اختصاص دهید.

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

شما آزاد هستید که هر عنصر HTML را هر طور که می خواهید داشبورد شما به نظر برسد، قرار دهید.

2. کتابخانه های خود را بارگیری کنید

یک داشبورد فقط به دو کتابخانه نیاز دارد که در صفحه گنجانده یا بارگذاری شود: Google AJAX API و بسته controls Google Visualization. API (به ویژه google.visualization.ChartWrapper ) به طور خودکار سایر بسته‌های مورد نیاز را شناسایی می‌کند (به عنوان مثال، اگر از نمودار Gauge استفاده می‌کنید، gauge کنید) و آنها را بدون دخالت بیشتر شما بارگیری می‌کند.

برای واکشی کتابخانه کنترل باید از google.charts.load() استفاده کنید.

<!--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. داده های خود را آماده کنید

هنگامی که Visualization API بارگیری شد، google.charts.setOnLoadCallback() تابع handler شما را فراخوانی می کند، بنابراین می دانید که تمام متدها و کلاس های کمکی مورد نیاز برای شروع آماده سازی داده های خود آماده خواهند بود.

داشبوردها مانند نمودارها، داده‌ها را در DataTable می‌پذیرد.

4. یک نمونه داشبورد ایجاد کنید

پس از ایجاد داده های خود، می توانید شی داشبورد خود را نمونه سازی کنید. سازنده داشبورد یک پارامتر می گیرد: ارجاع به عنصر DOM که در آن داشبورد را ترسیم می کند.

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

داشبوردها به عنوان یک کلاس جاوا اسکریپت نمایش داده می شوند. پس از نمونه سازی داشبورد خود، می توانید چند مرحله اختیاری مانند افزودن شنوندگان رویداد را انجام دهید (به عنوان مثال، هنگامی که داشبورد "آماده" شد به شما اطلاع داده شود). داشبوردها رویدادها را به همان شیوه نمودارها مدیریت می کنند، بنابراین برای اطلاعات بیشتر به Handling Visualization Events یا Display Errors Nicely در بخش نمودار مراجعه کنید.

5. نمونه های کنترل و نمودار ایجاد کنید

برای هر کنترل و نموداری که بخشی از داشبورد خواهد بود، به تعداد مورد نیاز خود تعریف کنید. برای تعریف نمودارها و کنترل ها به ترتیب از google.visualization.ChartWrapper و google.visualization.ControlWrapper استفاده کنید.

  // 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 و ControlWrapper ، پارامتر dataSourceUrl dataTable مشخص نکنید. داشبورد از تغذیه هر یک با داده های مناسب مراقبت می کند. با این حال، مطمئن شوید که پارامترهای مورد نیاز را مشخص کنید: chartType و containerId برای نمودارها، controlType و containerId برای کنترل ها.

چند نکته در مورد پیکربندی کنترل ها و نمودارها:

باید به همه کنترل‌ها یک filterColumnIndex (یا filterColumnLabel ) بدهید تا مشخص کنید کنترل روی کدام ستون از google.visualization.DataTable شما کار می‌کند (در مثال بالا، کنترل روی ستونی با برچسب Donuts eaten عمل می‌کند)،

از گزینه پیکربندی state بر روی کنترل ها استفاده کنید تا زمانی که برای اولین بار ترسیم می شوند، آنها را با یک وضعیت صریح مقداردهی کنید. به عنوان مثال، از این تنظیم برای ثابت کردن موقعیت های اولیه انگشتان یک کنترل لغزنده محدوده استفاده کنید.

  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}
  });

همه نمودارهایی که بخشی از یک داشبورد هستند، از همان جدول داده‌ای که در مرحله آماده کردن داده‌های خود آماده کرده‌اید، استفاده می‌کنند. با این حال، نمودارها اغلب به ترتیب خاصی از ستون‌ها نیاز دارند تا درست نمایش داده شوند: برای مثال، نمودار دایره‌ای به یک ستون رشته برای برچسب و به دنبال آن یک ستون عددی برای مقدار نیاز دارد.
از گزینه view هنگام پیکربندی هر نمونه ChartWrapper استفاده کنید تا مشخص کنید کدام ستون ها مربوط به نمودار هستند، مانند مثال زیر.
```
  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. وابستگی ها را ایجاد کنید

هنگامی که هم داشبورد و هم همه کنترل‌ها و نمودارهایی را که بخشی از آن خواهند بود، نمونه‌سازی کردید، از متد bind() برای اطلاع دادن به داشبورد در مورد وابستگی‌هایی که بین کنترل‌ها و نمودارها وجود دارد، استفاده کنید.

هنگامی که یک کنترل و نمودار به یکدیگر متصل می شوند، داشبورد نمودار را به روز می کند تا با محدودیت هایی که کنترل بر داده ها اعمال می کند مطابقت داشته باشد. در داشبورد مثالی که می‌سازید، نوار لغزنده محدوده و نمودار دایره‌ای به هم متصل شده‌اند، بنابراین هر زمان که با اولی تعامل داشته باشید، دومی به‌روزرسانی می‌شود تا فقط داده‌هایی را نمایش دهد که با محدوده انتخابی مطابقت دارد.

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

می‌توانید کنترل‌ها و نمودارها را در پیکربندی‌های مختلف پیوند دهید: یک به یک، یک به چند، چند به یک و چند به چند. هر زمان که چندین کنترل به یک نمودار متصل می شوند، داشبورد نمودار را به روز می کند تا با محدودیت های ترکیبی اعمال شده توسط همه کنترل های محدود مطابقت داشته باشد. در همان زمان، یک کنترل می تواند چندین نمودار را به طور همزمان هدایت کند. برای تعیین چند اتصال به طور همزمان، به جای نمونه های منفرد، آرایه ها را به متد bind() ارسال کنید. همچنین می‌توانید چندین تماس bind() را با هم زنجیره بزنید. در اینجا چند نمونه آورده شده است.

  // 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);

برای استفاده های پیشرفته، همچنین می توانید کنترل ها را به سایر کنترل ها متصل کنید تا زنجیره ای از وابستگی ها ایجاد شود .

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

7. داشبورد خود را بکشید

متد draw() را در نمونه داشبورد فراخوانی کنید تا کل داشبورد رندر شود. متد draw() تنها یک پارامتر را می گیرد: DataTable (یا DataView ) که داشبورد را تغذیه می کند.

هر بار که ترکیب داشبورد را تغییر می‌دهید (برای مثال با اضافه کردن کنترل‌ها یا نمودارهای جدید به آن) یا کل DataTable را که آن را قدرت می‌دهد تغییر دهید، باید draw() را فراخوانی کنید.

نمونه داشبورد هر زمان که draw() به رسم تمام کنترل‌ها و نمودارهایی که بخشی از آن هستند، یک رویداد ready را اجرا می‌کند. در صورتی که هر یک از کنترل ها یا نمودارهای مدیریت شده رسم نشود، یک رویداد error فعال می شود. برای کسب اطلاعات بیشتر درباره مدیریت رویدادها، به مدیریت رویدادها مراجعه کنید.

توجه: قبل از اینکه بخواهید ترکیب داشبورد را تغییر دهید یا دوباره آن را بکشید، باید به رویداد ready گوش دهید.

8. تغییرات برنامه ای پس از قرعه کشی

هنگامی که داشبورد draw() را کامل کرد، فعال خواهد شد و به طور خودکار به هر عملی که روی آن انجام می‌دهید پاسخ می‌دهد (مانند تغییر محدوده انتخابی یک نوار لغزنده کنترلی که بخشی از داشبورد است).

اگر نیاز به تغییر برنامه‌نویسی حالت داشبورد دارید، می‌توانید این کار را با کار مستقیم روی ControlWrapper و ChartWrapper که بخشی از آن هستند انجام دهید. قانون سرانگشتی این است که هر تغییری را که نیاز دارید مستقیماً در نمونه خاص ControlWrapper (یا ChartWrapper ) انجام دهید: به عنوان مثال، یک گزینه یا حالت کنترل را به ترتیب از طریق setOption() و setState() () تغییر دهید و متد draw() آن را پس از آن فراخوانی کنید. سپس داشبورد برای مطابقت با تغییرات درخواستی به روز می شود.

مثال زیر چنین موردی را نشان می دهد.

<span class="notranslate"><input type='submit' value="خودتان آن را در JSFiddle کد کنید" class='button'/><input type='hidden' name='title' value='Controls Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <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> 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(); }; }<input type='hidden' name='css' value=''/> <input type='hidden' name='description' value='An example of controlling a Google Chart post draw.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span>

صفحه وب کامل

<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

در این بخش، اشیایی که توسط Controls and Dashboards API در معرض دید قرار می‌گیرند، و روش‌های استانداردی که توسط همه کنترل‌ها در معرض دید قرار می‌گیرند، فهرست می‌شود.

داشبورد

مجموعه‌ای از کنترل‌ها و نمودارهای مشارکتی را نشان می‌دهد که داده‌های اساسی یکسانی را به اشتراک می‌گذارند.

سازنده

Dashboard(containerRef)

containerRef
: ارجاع به یک عنصر کانتینر معتبر در صفحه که محتویات داشبورد را نگه می‌دارد.

مواد و روش ها

داشبورد روش های زیر را نشان می دهد:

روش نوع برگشت شرح

روش	نوع برگشت	شرح
`bind( controls , charts )`	google.visualization.Dashboard	یک یا چند کنترل را به یک یا چند شرکت‌کننده دیگر داشبورد (اعم از نمودارها یا سایر کنترل‌ها) متصل می‌کند، به‌طوری‌که هر زمان که هر یک از کنترل‌ها تعامل برنامه‌ای یا کاربر را جمع‌آوری کرد که بر داده‌های مدیریت شده توسط داشبورد تأثیر می‌گذارد، همه کنترل‌ها دوباره ترسیم می‌شوند. خود نمونه داشبورد را برای زنجیر کردن چند فراخوانی `bind()` با هم برمی‌گرداند. کنترل‌ها - یک یا آرایه‌ای از نمونه‌های `google.visualization.ControlWrapper` که کنترل‌هایی را برای اتصال تعریف می‌کنند. نمودارها - یک یا آرایه‌ای از نمونه‌های `google.visualization.ChartWrapper` که نمودارهایی را تعریف می‌کنند که توسط کنترل‌ها هدایت می‌شوند.
`draw( dataTable )`	هیچ یک	داشبورد را ترسیم می کند. dataTable - هر یک از موارد زیر: یک شی `DataTable` . یک شی `DataView` ؛ یک نمایش JSON از یک DataTable. یا آرایه ای که از نحو google.visualization.arrayToDataTable() پیروی می کند.
`getSelection()`	آرایه از اشیاء	آرایه ای از موجودیت های بصری انتخاب شده نمودارها را در داشبورد برمی گرداند. متد `getSelection()` وقتی روی داشبورد فراخوانی می‌شود، مجموعه‌ای از تمام انتخاب‌های انجام‌شده در همه نمودارهای درون آن را برمی‌گرداند و امکان استفاده از یک مرجع واحد را هنگام کار با انتخاب‌های نمودار فراهم می‌کند. توجه: شنوندگان رویداد برای رویداد انتخابی همچنان باید به هر نموداری که می‌خواهید به آن گوش دهید متصل شوند. توضیحات گسترده

bind( controls , charts )

google.visualization.Dashboard

یک یا چند کنترل را به یک یا چند شرکت‌کننده دیگر داشبورد (اعم از نمودارها یا سایر کنترل‌ها) متصل می‌کند، به‌طوری‌که هر زمان که هر یک از کنترل‌ها تعامل برنامه‌ای یا کاربر را جمع‌آوری کرد که بر داده‌های مدیریت شده توسط داشبورد تأثیر می‌گذارد، همه کنترل‌ها دوباره ترسیم می‌شوند. خود نمونه داشبورد را برای زنجیر کردن چند فراخوانی bind() با هم برمی‌گرداند.

کنترل‌ها - یک یا آرایه‌ای از نمونه‌های google.visualization.ControlWrapper که کنترل‌هایی را برای اتصال تعریف می‌کنند.
نمودارها - یک یا آرایه‌ای از نمونه‌های google.visualization.ChartWrapper که نمودارهایی را تعریف می‌کنند که توسط کنترل‌ها هدایت می‌شوند.

draw( dataTable )

هیچ یک

داشبورد را ترسیم می کند.

dataTable - هر یک از موارد زیر: یک شی DataTable . یک شی DataView ؛ یک نمایش JSON از یک DataTable. یا آرایه ای که از نحو google.visualization.arrayToDataTable() پیروی می کند.

getSelection()

آرایه از اشیاء

آرایه ای از موجودیت های بصری انتخاب شده نمودارها را در داشبورد برمی گرداند. متد getSelection() وقتی روی داشبورد فراخوانی می‌شود، مجموعه‌ای از تمام انتخاب‌های انجام‌شده در همه نمودارهای درون آن را برمی‌گرداند و امکان استفاده از یک مرجع واحد را هنگام کار با انتخاب‌های نمودار فراهم می‌کند.

توجه: شنوندگان رویداد برای رویداد انتخابی همچنان باید به هر نموداری که می‌خواهید به آن گوش دهید متصل شوند.

توضیحات گسترده

مناسبت ها

شی داشبورد رویدادهای زیر را پرتاب می کند. توجه داشته باشید که قبل از پرتاب هر رویداد باید Dashboard.draw() را فراخوانی کنید.

نام شرح خواص

error هنگامی که هنگام تلاش برای رندر داشبورد خطایی رخ می دهد فعال می شود. ممکن است یک یا چند مورد از کنترل‌ها و نمودارهایی که بخشی از داشبورد هستند رندر نشده باشند. شناسه، پیام

نام	شرح	خواص
`error`	هنگامی که هنگام تلاش برای رندر داشبورد خطایی رخ می دهد فعال می شود. ممکن است یک یا چند مورد از کنترل‌ها و نمودارهایی که بخشی از داشبورد هستند رندر نشده باشند.	شناسه، پیام
`ready`	داشبورد نقشه کشی را تکمیل کرده است و آماده پذیرش تغییرات است. تمام کنترل ها و نمودارهایی که بخشی از داشبورد هستند، برای فراخوانی روش خارجی و تعامل با کاربر آماده هستند. اگر می‌خواهید داشبورد (یا داده‌هایی را که نمایش می‌دهد) بعد از کشیدن آن تغییر دهید، باید قبل از فراخوانی روش `draw` ، شنونده‌ای برای این رویداد تنظیم کنید و سپس تغییرات خود را فقط پس از فعال شدن رویداد اعمال کنید. رویداد `ready` نیز فعال خواهد شد: پس از تکمیل به‌روزرسانی داشبورد که توسط کاربر یا تعامل برنامه‌ای با یکی از کنترل‌ها ایجاد شده است، پس از فراخوانی برنامه‌ریزی شده به متد `draw()` هر قسمت نمودار داشبورد.	هیچ یک

ready

داشبورد نقشه کشی را تکمیل کرده است و آماده پذیرش تغییرات است. تمام کنترل ها و نمودارهایی که بخشی از داشبورد هستند، برای فراخوانی روش خارجی و تعامل با کاربر آماده هستند. اگر می‌خواهید داشبورد (یا داده‌هایی را که نمایش می‌دهد) بعد از کشیدن آن تغییر دهید، باید قبل از فراخوانی روش draw ، شنونده‌ای برای این رویداد تنظیم کنید و سپس تغییرات خود را فقط پس از فعال شدن رویداد اعمال کنید.

رویداد ready نیز فعال خواهد شد:

پس از تکمیل به‌روزرسانی داشبورد که توسط کاربر یا تعامل برنامه‌ای با یکی از کنترل‌ها ایجاد شده است،
پس از فراخوانی برنامه‌ریزی شده به متد draw() هر قسمت نمودار داشبورد.

هیچ یک

ControlWrapper

یک شی ControlWrapper یک پوشش در اطراف یک نمایش JSON از یک نمونه کنترل پیکربندی شده است. کلاس روش‌های راحتی را برای تعریف یک کنترل داشبورد، ترسیم آن و تغییر برنامه‌ای وضعیت آن را نشان می‌دهد.

سازنده

ControlWrapper(opt_spec)

opt_spec: [ اختیاری ] - یا یک شی JSON که کنترل را تعریف می کند، یا یک نسخه رشته ای سریالی از آن شی. ویژگی های پشتیبانی شده از شی JSON در جدول زیر نشان داده شده است. اگر مشخص نشده است، باید تمام ویژگی های مناسب را با استفاده از متدهای set... که توسط ControlWrapper در معرض دید قرار می گیرند، تنظیم کنید.

ویژگی	تایپ کنید	ضروری	پیش فرض	شرح
نوع کنترل	رشته	ضروری	هیچ یک	نام کلاس کنترل نام بسته `google.visualization` را می توان برای کنترل های Google حذف کرد. مثال‌ها: `CategoryFilter` ، `NumberRangeFilter` .
شناسه کانتینر	رشته	ضروری	هیچ یک	شناسه عنصر DOM در صفحه شما که میزبان کنترل خواهد بود.
گزینه ها	هدف - شی	اختیاری	هیچ یک	یک شی که گزینه های کنترل را توصیف می کند. می‌توانید از علامت‌گذاری تحت اللفظی جاوا اسکریپت استفاده کنید یا یک دسته برای شی فراهم کنید. مثال: `"options": {"filterColumnLabel": "Age", "minValue": 10, "maxValue": 80}`
حالت	هدف - شی	اختیاری	هیچ یک	یک شی که وضعیت کنترل را توصیف می کند. حالت تمام متغیرهایی را جمع آوری می کند که کاربر کنترل کننده می تواند بر آنها تأثیر بگذارد. به عنوان مثال، وضعیت لغزنده محدوده را می توان بر حسب موقعیت هایی که انگشت شست پایین و بالای لغزنده اشغال می کند توصیف کرد. شما می توانید از نمادهای تحت اللفظی جاوا اسکریپت استفاده کنید یا یک دسته برای شیء ارائه دهید. مثال: `"state": {"lowValue": 20, "highValue": 50}`

مواد و روش ها

ControlWrapper روش های اضافی زیر را در معرض نمایش قرار می دهد:

روش	نوع برگشت	شرح
`draw()`	هیچ یک	کنترل را ترسیم می کند. به طور معمول داشبوردی که کنترل را نگه می دارد ترسیم آن را بر عهده می گیرد. شما باید `draw()` را فراخوانی کنید تا پس از تغییر هر یک از تنظیمات دیگر کنترل مانند گزینه ها یا وضعیت، بازنویسی برنامه ریزی شده کنترل را مجبور کنید.
`toJSON()`	رشته	یک نسخه رشته ای از نمایش JSON کنترل را برمی گرداند.
`clone()`	ControlWrapper	یک کپی عمیق از پوشش کنترل را برمی گرداند.
`getControlType()`	رشته	نام کلاس کنترل اگر این یک کنترل Google باشد، نام با `google.visualization` واجد شرایط نخواهد بود. بنابراین، برای مثال، اگر این یک کنترل CategoryFilter بود، به جای «google.visualization.CategoryFilter»، «CategoryFilter» را برمی‌گرداند.
`getControlName()`	رشته	نام کنترل اختصاص داده شده توسط `setControlName()` را برمی گرداند.
`getControl()`	مرجع شیء کنترلی	یک مرجع به کنترل ایجاد شده توسط این ControlWrapper برمی گرداند. تا زمانی که `draw()` را روی شی ControlWrapper (یا روی داشبوردی که آن را نگه می‌دارد) فراخوانی کردید، null برمی‌گرداند و یک رویداد آماده را ارسال می‌کند. شیء برگشتی فقط یک متد را نشان می دهد: `resetControl()` که حالت کنترل را به حالت اولیه بازنشانی می کند (مانند تنظیم مجدد یک عنصر فرم HTML).
`getContainerId()`	رشته	شناسه عنصر ظرف DOM کنترل.
`getOption( key , opt_default_val )`	هر نوعی	مقدار گزینه کنترل مشخص شده را برمی گرداند کلید - نام گزینه برای بازیابی. ممکن است یک نام واجد شرایط، مانند `'vAxis.title'` باشد. opt_default_value [ اختیاری ] - اگر مقدار مشخص شده تعریف نشده یا تهی باشد، این مقدار برگردانده می شود.
`getOptions()`	هدف - شی	شی گزینه های این کنترل را برمی گرداند.
`getState()`	هدف - شی	حالت کنترل را برمی گرداند.
`setControlType( type )`	هیچ یک	نوع کنترل را تنظیم می کند. برای نمونه سازی، نام کلاس کنترل را پاس کنید. اگر این یک کنترل Google است، آن را واجد شرایط `google.visualization` . بنابراین، برای مثال، برای یک نوار لغزنده روی یک ستون عددی، از "NumberRangeFilter" عبور کنید.
`setControlName( name )`	هیچ یک	یک نام دلخواه برای کنترل تنظیم می کند. این در هیچ کجای کنترل نشان داده نمی شود، بلکه فقط برای مرجع شما است.
`setContainerId( id )`	هیچ یک	شناسه عنصر DOM حاوی کنترل را تنظیم می کند.
`setOption( key , value )`	هیچ یک	یک مقدار گزینه کنترلی را تنظیم می کند، که در آن کلید ، نام گزینه و مقدار ، مقدار است. برای تنظیم یک گزینه، مقدار را null ارسال کنید. توجه داشته باشید که کلید ممکن است یک نام واجد شرایط، مانند `'vAxis.title'` باشد.
`setOptions( options_obj )`	هیچ یک	یک شی گزینه کامل را برای یک کنترل تنظیم می کند.
`setState(state_obj)`	هیچ یک	حالت کنترل را تنظیم می کند. حالت تمام متغیرهایی را جمع آوری می کند که کاربر کنترل کننده می تواند بر آنها تأثیر بگذارد. به عنوان مثال، وضعیت لغزنده محدوده را می توان بر حسب موقعیت هایی که انگشت شست پایین و بالای لغزنده اشغال می کند توصیف کرد.

مناسبت ها

شی ControlWrapper رویدادهای زیر را پرتاب می کند. توجه داشته باشید که باید ControlWrapper.draw() را فراخوانی کنید (یا داشبورد نگهدارنده کنترل را بکشید) قبل از اینکه هر رویدادی پرتاب شود.

نام	شرح	خواص
`error`	هنگامی که هنگام تلاش برای ارائه کنترل، خطایی رخ می دهد، فعال می شود.	شناسه، پیام
`ready`	کنترل آماده پذیرش تعامل کاربر و تماس های متد خارجی است. اگر می‌خواهید با کنترل تعامل داشته باشید و پس از ترسیم متدهای آن را فراخوانی کنید، باید قبل از فراخوانی متد `draw` ، شنونده‌ای برای این رویداد تنظیم کنید و تنها پس از فعال شدن رویداد، آنها را فراخوانی کنید. از طرف دیگر، می‌توانید رویداد `ready` را در داشبورد که روش‌های کنترل و کنترل تماس را نگه می‌دارد، تنها پس از فعال شدن رویداد گوش دهید.	هیچ یک
`statechange`	زمانی فعال می شود که کاربر با کنترل تعامل داشته باشد و بر وضعیت آن تأثیر بگذارد. به عنوان مثال، هر زمان که انگشت شست یک کنترل لغزنده محدوده را حرکت دهید، یک رویداد تغییر `statechange` می شود. برای بازیابی وضعیت کنترل به روز شده پس از اجرا شدن رویداد، `ControlWrapper.getState()` را فراخوانی کنید.	هیچ یک

ChartWrapper

در بخش مرجع Visualizations API به مستندات google.visualization.ChartWrapper مراجعه کنید.

نکات زیر هنگام استفاده از ChartWrapper به عنوان بخشی از داشبورد اعمال می شود:

ویژگی های dataSourceUrl ، query ، dataTable و refreshInterval را به صراحت تنظیم نکنید. داشبوردی که نمودار را نگه می دارد از داده های مورد نیاز آن تغذیه می کند.
مشخصه view آن را طوری تنظیم کنید که مشخص کند کدام ستون ها، از بین تمام ستون های موجود در dataTable داده شده به داشبورد، برای نمودار مرتبط هستند، همانطور که در ایجاد کنترل و نمونه نمودار نشان داده شده است.

گالری را کنترل می کند

فیلترها عناصر گرافیکی هستند که افراد می توانند برای انتخاب تعاملی داده هایی که در نمودار شما نمایش داده می شود استفاده کنند. این بخش فیلترهای نمودار Google را شرح می دهد: CategoryFilter ، ChartRangeFilter ، DateRangeFilter ، NumberRangeFilter ، و StringFilter .

می توانید از هر یک از آنها به عنوان پارامتری برای ControlWrapper.setControlType() استفاده کنید.

نکته: در توصیف گزینه‌ها، از علامت نقطه برای توصیف ویژگی‌های شی تودرتو استفاده می‌شود. به عنوان مثال گزینه ای به نام 'ui.label' باید در یک شی گزینه به صورت var options = {"ui": {"label": "someLabelValue"} };

انتخابگر برای انتخاب یک یا چند مورد از بین مجموعه ای از مقادیر تعریف شده.

دولت

نام	تایپ کنید	پیش فرض	شرح
مقادیر انتخاب شده	آرایه ای از اشیاء یا انواع اولیه	هیچ یک	مجموعه مقادیر در حال حاضر انتخاب شده است. مقادیر انتخاب شده باید مجموعه ای از مقادیر کلی قابل انتخاب باشد که توسط گزینه `values` تعریف شده است (هر یک از موارد اضافی نادیده گرفته می شود). اگر `CategoryFilter` اجازه انتخاب چندگانه را نمی دهد، فقط اولین مقدار آرایه حفظ می شود.

گزینه ها

نام	تایپ کنید	پیش فرض	شرح
filterColumnIndex	عدد	هیچ یک	ستونی از جدول داده که فیلتر باید روی آن کار کند. ارائه این گزینه یا `filterColumnLabel` است. اگر هر دو وجود داشته باشند، این گزینه اولویت دارد.
filterColumnLabel	رشته	هیچ یک	برچسب ستونی که فیلتر باید روی آن کار کند. ارائه این گزینه یا `filterColumnIndex` است. اگر هر دو وجود داشته باشند، `filterColumnIndex` اولویت دارد.
ارزش های	آرایه	خودکار	فهرستی از مقادیر برای انتخاب اگر آرایه ای از اشیاء استفاده می شود، آنها باید یک نمایش `toString()` مناسب برای نمایش به کاربر داشته باشند. اگر تهی یا تعریف نشده باشد، لیست مقادیر به طور خودکار از مقادیر موجود در ستون DataTable که این کنترل روی آن کار می کند، محاسبه می شود.
useFormattedValue	بولی	نادرست	وقتی لیست مقادیر قابل انتخاب را به صورت خودکار از ستون DataTable پر می کند، این فیلتر روی آن کار می کند، چه از مقادیر واقعی سلول یا مقادیر قالب بندی شده آنها استفاده شود.
رابط کاربری	هدف - شی	خالی	یک شی با اعضا برای پیکربندی جنبه های مختلف رابط کاربری کنترل. برای مشخص کردن ویژگی‌های این شی، می‌توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: {label: 'Metric', labelSeparator: ':'}
ui.caption	رشته	"یک مقدار را انتخاب کنید..."	عنوانی که در داخل ویجت انتخابگر ارزش نمایش داده می‌شود، وقتی هیچ موردی انتخاب نشده باشد.
ui.sortValues	بولی	درست است، واقعی	اینکه آیا مقادیری که باید انتخاب کنید باید مرتب شوند یا خیر.
ui.selectedValuesLayout	رشته	'گذشته از'	نحوه نمایش مقادیر انتخاب شده، زمانی که انتخاب چندگانه مجاز است. مقادیر ممکن عبارتند از: `'aside'` : مقادیر انتخاب شده در یک خط متنی در کنار ویجت انتخابگر ارزش نمایش داده می شوند. `'below'` : مقادیر انتخاب شده در یک خط متنی در زیر ویجت نمایش داده می شود، `'belowWrapping'` : شبیه به `below` ، اما ورودی‌هایی که نمی‌توانند در انتخابگر قرار بگیرند به یک خط جدید می‌پیوندند، `'belowStacked'` : مقادیر انتخاب شده در ستونی در زیر ویجت نمایش داده می شود.
ui.allowNone	بولی	درست است، واقعی	اینکه آیا کاربر مجاز است هیچ مقداری را انتخاب نکند. اگر `false` ، کاربر باید حداقل یک مقدار از مقادیر موجود را انتخاب کند. در حین مقداردهی اولیه کنترل، اگر گزینه روی `false` تنظیم شود و حالت `selectedValues` داده نشود، اولین مقدار از مقادیر موجود به طور خودکار انتخاب می شود.
ui.allowMultiple	بولی	درست است، واقعی	آیا می توان چندین مقدار را انتخاب کرد، نه فقط یک.
ui.allowTyping	بولی	درست است، واقعی	این که آیا کاربر مجاز است در یک فیلد متنی برای محدود کردن لیست انتخاب های ممکن (از طریق تکمیل کننده خودکار) تایپ کند یا خیر.
ui.label	رشته	خودکار	برچسبی که در کنار انتخابگر دسته نمایش داده می شود. اگر مشخص نشده باشد، از برچسب ستونی که کنترل روی آن کار می کند استفاده می شود.
ui.labelSeparator	رشته	هیچ یک	یک رشته جداکننده به برچسب اضافه شده است تا به صورت بصری برچسب را از انتخابگر دسته جدا کند.
ui.labelStacking	رشته	"افقی"	آیا برچسب باید در بالا (انباشته شدن عمودی) یا در کنار (انباشته شدن افقی) انتخابگر دسته نمایش داده شود. از `'vertical'` یا `'horizontal'` استفاده کنید.
ui.cssClass	رشته	'google-visualization-controls-categoryfilter'	کلاس CSS برای تخصیص به کنترل، برای یک ظاهر طراحی سفارشی.

ChartRangeFilter

یک نوار لغزنده با دو انگشت شست که بر روی نمودار قرار گرفته اند تا محدوده ای از مقادیر را از محور پیوسته نمودار انتخاب کنید.

دولت

نام	تایپ کنید	پیش فرض	شرح
محدوده.شروع	شماره، تاریخ، تاریخ یا ساعت روز	مقدار شروع محدوده	شروع محدوده انتخاب شده، شامل.
محدوده.پایان	شماره، تاریخ، تاریخ یا ساعت روز	مقدار پایانی محدوده	انتهای محدوده انتخاب شده، شامل.

گزینه ها

نام	تایپ کنید	پیش فرض	شرح
filterColumnIndex	عدد	هیچ یک	نمایه ستون در جدول داده ای که فیلتر روی آن کار می کند. ارائه این گزینه یا `filterColumnLabel` است. در صورت وجود هر دو، این گزینه اولویت دارد. توجه داشته باشید که صرفاً منطقی است که یک شاخص از یک ستون دامنه را مشخص کنید که در محور پیوسته نمودار ترسیم شده در داخل کنترل گنجانده شده است.
filterColumnLabel	رشته	هیچ یک	برچسب ستون جدول داده ای که فیلتر روی آن کار می کند. ارائه این گزینه یا `filterColumnIndex` است. اگر هر دو وجود داشته باشند، `filterColumnIndex` اولویت دارد. توجه داشته باشید که صرفاً منطقی است که یک برچسب از یک ستون دامنه را مشخص کنید که در محور پیوسته نمودار ترسیم شده در داخل کنترل گنجانده شده است.
رابط کاربری	هدف - شی	خالی	یک شی با اعضا برای پیکربندی جنبه های مختلف رابط کاربری کنترل. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: {chartType: 'ScatterChart', chartOptions: {pointSize: 10}}
ui.chartType	رشته	'ComboChart'	نوع نمودار ترسیم شده در داخل کنترل. می تواند یکی از این موارد باشد: «AreaChart»، «LineChart»، «ComboChart» یا «ScatterChart».
ui.chartOptions	هدف - شی	{ 'enableInteractivity': false, 'chartArea': {'height': '100%'}, 'legend': {'position': 'none'}, 'hAxis': {'textPosition': 'in'}, 'vAxis': { 'textPosition': 'none', 'gridlines': {'color': 'none'} } }	گزینه های پیکربندی نمودار ترسیم شده در داخل کنترل. به همان سطح پیکربندی مانند هر نموداری در داشبورد اجازه می‌دهد و با همان قالبی مطابقت دارد که توسط ChartWrapper.setOptions() پذیرفته شده است. می‌توانید گزینه‌های اضافی را مشخص کنید یا گزینه‌های پیش‌فرض را لغو کنید (توجه داشته باشید که پیش‌فرض‌ها با دقت برای ظاهر بهینه انتخاب شده‌اند).
ui.chartView	شی یا رشته (شیء سریالی شده)	خالی	مشخصات نمای برای اعمال به جدول داده های مورد استفاده برای ترسیم نمودار در داخل کنترل. به همان سطح پیکربندی مانند هر نموداری در داشبورد اجازه می‌دهد، و با همان قالبی مطابقت دارد که توسط ChartWrapper.setView() پذیرفته شده است. اگر مشخص نشده باشد، خود جدول داده ها برای رسم نمودار استفاده می شود. لطفاً توجه داشته باشید که محور افقی نمودار ترسیم شده باید پیوسته باشد، بنابراین مراقب باشید که `ui.chartView` را متناسب با آن مشخص کنید.
ui.minRangeSize	عدد	تفاوت مقدار داده به عنوان 1 پیکسل تفسیر می شود	حداقل اندازه محدوده قابل انتخاب ( `range.end - range.start` ) که در واحدهای ارزش داده مشخص شده است. برای یک محور عددی، یک عدد (نه لزوما یک عدد صحیح) است. برای محور تاریخ، تاریخ یا ساعت روز، یک عدد صحیح است که تفاوت را در میلی ثانیه مشخص می کند.
ui.snapToData	بولی	نادرست	اگر درست باشد، شست‌های محدوده به نزدیک‌ترین نقاط داده می‌چسبند. در این حالت، نقاط انتهایی محدوده بازگردانده شده توسط `getState()` لزوماً مقادیری در جدول داده هستند.

مناسبت ها

موارد اضافه شده به رویدادهای ControlWrapper :

نام	شرح	خواص
`statechange`	همان چیزی که برای هر ControlWrapper مستند شده است، فقط دارای یک خاصیت بولی اضافی، `inProgress` است که مشخص می کند آیا وضعیت در حال تغییر است (یا یکی از انگشتان شست یا خود محدوده در حال کشیدن است).	در حال پیش رفت

DateRangeFilter

یک نوار لغزنده با ارزش دوگانه برای انتخاب محدوده تاریخ.

سعی کنید نوار لغزنده را حرکت دهید تا ردیف هایی که در جدول زیر نشان داده شده اند را تغییر دهید.

دولت

نام	تایپ کنید	پیش فرض	شرح
کم ارزش	عدد	هیچ یک	وسعت پایین‌تر محدوده انتخاب‌شده، شامل.
با ارزش بالا	عدد	هیچ یک	گستره بالاتر محدوده انتخاب شده، شامل.
lowThumbAtMinimum	بولی	هیچ یک	آیا انگشت شست پایین لغزنده در حداقل محدوده مجاز قفل شده است یا خیر. اگر تنظیم شود، `lowValue` را لغو می‌کند.
highThumbAtMaximum	بولی	هیچ یک	اینکه آیا انگشت شست بالاتر از نوار لغزنده در حداکثر محدوده مجاز قفل شده است. اگر تنظیم شود، `highValue` را لغو می‌کند.

گزینه ها

نام	تایپ کنید	پیش فرض	شرح
filterColumnIndex	عدد	هیچ یک	ستونی از جدول داده که فیلتر باید روی آن کار کند. ارائه این گزینه یا `filterColumnLabel` است. اگر هر دو وجود داشته باشند، این گزینه اولویت دارد. باید به ستونی با نوع `number` اشاره کند.
filterColumnLabel	رشته	هیچ یک	برچسب ستونی که فیلتر باید روی آن کار کند. ارائه این گزینه یا `filterColumnIndex` است. اگر هر دو وجود داشته باشند، `filterColumnIndex` اولویت دارد. باید به ستونی با نوع `number` اشاره کند.
minValue	تاریخ	خودکار	حداقل مقدار مجاز برای محدوده کمتر. اگر تعریف نشده باشد، مقدار از محتویات DataTable مدیریت شده توسط کنترل استنتاج می شود.
maxValue	تاریخ	خودکار	حداکثر مقدار مجاز برای محدوده بالاتر. اگر تعریف نشده باشد، مقدار از محتویات DataTable مدیریت شده توسط کنترل استنتاج می شود.
رابط کاربری	هدف - شی	خالی	یک شی با اعضا برای پیکربندی جنبه های مختلف رابط کاربری کنترل. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: {label: 'Age', labelSeparator: ':'}
فرمت ui	هدف - شی	هیچ یک	نحوه نمایش تاریخ به عنوان یک رشته هر قالب تاریخ معتبر را می پذیرد.
ui.step	رشته	روز	حداقل تغییر ممکن هنگام کشیدن انگشت شست لغزنده: می تواند هر واحد زمانی تا "روز" باشد. ("ماه" و "سال" هنوز پشتیبانی نمی شوند.)
تیک های ui	عدد	خودکار	تعداد تیک هایی (موقعیت های ثابت در نوار محدوده) که شست های لغزنده می توانند اشغال کنند.
ui.unitIncrement	رشته	'1'	مقدار افزایش برای افزایش واحدهای دامنه گسترش می یابد. افزایش واحد معادل استفاده از کلیدهای جهت دار برای حرکت دادن انگشت شست لغزنده است.
ui.blockIncrement	عدد	10	مقدار افزایش برای افزایش بلوک دامنه گسترش می یابد. افزایش بلوک معادل استفاده از کلیدهای pgUp و pgDown برای حرکت دادن شست های لغزنده است.
ui.showRangeValues	بولی	درست است، واقعی	آیا باید برچسب‌هایی در کنار نوار لغزنده وجود داشته باشد که گستره محدوده انتخابی را نشان می‌دهد.
UI.orientation	رشته	"افقی"	جهت لغزنده. یا `'horizontal'` یا `'vertical'` .
ui.label	رشته	خودکار	برچسبی که در کنار نوار لغزنده نمایش داده می شود. اگر مشخص نشده باشد، از برچسب ستونی که کنترل روی آن کار می کند استفاده می شود.
ui.labelSeparator	رشته	هیچ یک	یک رشته جداکننده به برچسب اضافه شده است تا به صورت بصری برچسب را از نوار لغزنده جدا کند.
ui.labelStacking	رشته	"افقی"	آیا برچسب باید در بالا (انباشته شدن عمودی) یا در کنار (انباشته شدن افقی) لغزنده نمایش داده شود. از `'vertical'` یا `'horizontal'` استفاده کنید.
ui.cssClass	رشته	'google-visualization-controls-rangefilter'	کلاس CSS برای تخصیص به کنترل، برای یک ظاهر طراحی سفارشی.

NumberRangeFilter

یک نوار لغزنده با ارزش دوگانه برای انتخاب محدوده مقادیر عددی.

دولت

نام	تایپ کنید	پیش فرض	شرح
کم ارزش	عدد	هیچ یک	وسعت پایین‌تر محدوده انتخاب‌شده، شامل.
با ارزش بالا	عدد	هیچ یک	گستره بالاتر محدوده انتخاب شده، شامل.
lowThumbAtMinimum	بولی	هیچ یک	آیا انگشت شست پایین لغزنده در حداقل محدوده مجاز قفل شده است یا خیر. اگر تنظیم شود، `lowValue` را لغو می‌کند.
highThumbAtMaximum	بولی	هیچ یک	اینکه آیا انگشت شست بالاتر از نوار لغزنده در حداکثر محدوده مجاز قفل شده است. اگر تنظیم شود، `highValue` را لغو می‌کند.

گزینه ها

نام	تایپ کنید	پیش فرض	شرح
filterColumnIndex	عدد	هیچ یک	ستونی از جدول داده که فیلتر باید روی آن کار کند. ارائه این گزینه یا `filterColumnLabel` است. اگر هر دو وجود داشته باشند، این گزینه اولویت دارد. باید به ستونی با نوع `number` اشاره کند.
filterColumnLabel	رشته	هیچ یک	برچسب ستونی که فیلتر باید روی آن کار کند. ارائه این گزینه یا `filterColumnIndex` است. اگر هر دو وجود داشته باشند، `filterColumnIndex` اولویت دارد. باید به ستونی با نوع `number` اشاره کند.
minValue	عدد	خودکار	حداقل مقدار مجاز برای محدوده کمتر. اگر تعریف نشده باشد، مقدار از محتویات DataTable مدیریت شده توسط کنترل استنتاج می شود.
maxValue	عدد	خودکار	حداکثر مقدار مجاز برای محدوده بالاتر. اگر تعریف نشده باشد، مقدار از محتویات DataTable مدیریت شده توسط کنترل استنتاج می شود.
رابط کاربری	هدف - شی	خالی	یک شی با اعضا برای پیکربندی جنبه های مختلف رابط کاربری کنترل. برای مشخص کردن ویژگی‌های این شی، می‌توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: {label: 'Age', labelSeparator: ':'}
فرمت ui	هدف - شی	هیچ یک	نحوه نمایش عدد به صورت رشته هر قالب شماره معتبری را می پذیرد.
ui.step	عدد	1، یا در صورت تعریف از `ticks` محاسبه می شود	حداقل تغییر ممکن هنگام کشیدن انگشت شست لغزنده.
تیک های ui	عدد	خودکار	تعداد تیک هایی (موقعیت های ثابت در نوار محدوده) که شست های لغزنده می توانند اشغال کنند.
ui.unitIncrement	عدد	1	مقدار افزایش برای افزایش واحدهای دامنه گسترش می یابد. افزایش واحد معادل استفاده از کلیدهای جهت دار برای حرکت دادن انگشت شست لغزنده است.
ui.blockIncrement	عدد	10	مقدار افزایش برای افزایش بلوک دامنه گسترش می یابد. افزایش بلوک معادل استفاده از کلیدهای pgUp و pgDown برای حرکت دادن شست های لغزنده است.
ui.showRangeValues	بولی	درست است، واقعی	آیا باید برچسب‌هایی در کنار نوار لغزنده وجود داشته باشد که گستره محدوده انتخابی را نشان می‌دهد.
UI.orientation	رشته	"افقی"	جهت لغزنده. یا `'horizontal'` یا `'vertical'` .
ui.label	رشته	خودکار	برچسبی که در کنار نوار لغزنده نمایش داده می شود. اگر مشخص نشده باشد، از برچسب ستونی که کنترل روی آن کار می کند استفاده می شود.
ui.labelSeparator	رشته	هیچ یک	یک رشته جداکننده به برچسب اضافه شده است تا به صورت بصری برچسب را از نوار لغزنده جدا کند.
ui.labelStacking	رشته	"افقی"	آیا برچسب باید در بالا (انباشته شدن عمودی) یا در کنار (انباشته شدن افقی) لغزنده نمایش داده شود. از `'vertical'` یا `'horizontal'` استفاده کنید.
ui.cssClass	رشته	'google-visualization-controls-rangefilter'	کلاس CSS برای تخصیص به کنترل، برای یک ظاهر طراحی سفارشی.

StringFilter

یک فیلد ورودی متن ساده که به شما امکان می دهد داده ها را از طریق تطبیق رشته فیلتر کنید. بعد از هر فشار کلید به‌روزرسانی می‌شود: j را تایپ کنید تا جدول زیر را به جان و جسیکا محدود کنید.

دولت

نام	تایپ کنید	پیش فرض	شرح
ارزش	رشته یا شی	هیچ یک	متنی که در حال حاضر در قسمت ورودی کنترل وارد شده است.

گزینه ها

نام	تایپ کنید	پیش فرض	شرح
filterColumnIndex	عدد	هیچ یک	ستونی از جدول داده که فیلتر باید روی آن کار کند. ارائه این گزینه یا `filterColumnLabel` است. اگر هر دو وجود داشته باشند، این گزینه اولویت دارد.
filterColumnLabel	رشته	هیچ یک	برچسب ستونی که فیلتر باید روی آن کار کند. ارائه این گزینه یا `filterColumnIndex` است. اگر هر دو وجود داشته باشند، `filterColumnIndex` اولویت دارد.
matchType	رشته	"پیشوند"	اینکه آیا کنترل باید فقط با مقادیر دقیق مطابقت داشته باشد ( `'exact'` )، پیشوندهایی که از ابتدای مقدار شروع می شوند ( `'prefix'` ) یا هر رشته فرعی ( `'any'` ).
حساس به حروف کوچک	بولی	نادرست	اینکه تطبیق باید به حروف کوچک و بزرگ حساس باشد یا خیر.
useFormattedValue	بولی	نادرست	اینکه آیا کنترل باید با مقادیر قالب‌بندی شده سلول مطابقت داشته باشد یا با مقادیر واقعی.
رابط کاربری	هدف - شی	خالی	یک شی با اعضا برای پیکربندی جنبه های مختلف رابط کاربری کنترل. To specify properties of this object, you can use object literal notation, as shown here: {label: 'Name', labelSeparator: ':'}
ui.realtimeTrigger	بولی	درست است، واقعی	Whether the control should match any time a key is pressed or only when the input field 'changes' (loss of focus or pressing the Enter key).
ui.label	رشته	خودکار	The label to display next to the input field. If unspecified, the label of the column the control operates on will be used.
ui.labelSeparator	رشته	هیچ یک	A separator string appended to the label, to visually separate the label from the input field.
ui.labelStacking	رشته	'horizontal'	Whether the label should display above (vertical stacking) or beside (horizontal stacking) the input field. Use either `'vertical'` or `'horizontal'` .
ui.cssClass	رشته	'google-visualization-controls-stringfilter'	The CSS class to assign to the control, for custom styling.

کنترل ها و داشبوردها

بررسی اجمالی

استفاده از کنترل ها و داشبوردها

1. یک اسکلت HTML برای داشبورد خود ایجاد کنید

2. کتابخانه های خود را بارگیری کنید

3. داده های خود را آماده کنید

4. یک نمونه داشبورد ایجاد کنید

5. نمونه های کنترل و نمودار ایجاد کنید

6. وابستگی ها را ایجاد کنید

7. داشبورد خود را بکشید

8. تغییرات برنامه ای پس از قرعه کشی

مرجع API

داشبورد

سازنده

مواد و روش ها

مناسبت ها

ControlWrapper

سازنده

مواد و روش ها

مناسبت ها

ChartWrapper

گالری را کنترل می کند

دسته بندی فیلتر

دولت

گزینه ها

ChartRangeFilter

دولت

گزینه ها

مناسبت ها

DateRangeFilter

دولت

گزینه ها

NumberRangeFilter

دولت

گزینه ها

StringFilter

دولت

گزینه ها