نوار ابزار

  1. بررسی اجمالی
  2. مثال
  3. استفاده
    1. انواع خروجی
    2. نحو
  4. سیاست داده

بررسی اجمالی

می‌توانید یک عنصر نوار ابزار را به هر تصویرسازی اضافه کنید تا کاربر را قادر سازد داده‌های اساسی را به یک فایل CSV یا یک جدول HTML صادر کند، یا کدی را برای جاسازی تصویر در یک صفحه وب یا ابزار دلخواه ارائه دهد.

توسط: گوگل

مثال

یکی از گزینه های موجود در نوار ابزار را انتخاب کنید. 

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    var visualization;

    function draw() {
      drawVisualization();
      drawToolbar();
    }

    function drawVisualization() {
      var container = document.getElementById('visualization_div');
      visualization = new google.visualization.PieChart(container);
      new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').
          send(queryCallback);
    }

    function queryCallback(response) {
      visualization.draw(response.getDataTable(), {is3D: true});
    }

    function drawToolbar() {
      var components = [
          {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1}},
          {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1},
           style: 'width: 800px; height: 700px; border: 3px solid purple;'}
      ];

      var container = document.getElementById('toolbar_div');
      google.visualization.drawToolbar(container, components);
    };

    google.charts.setOnLoadCallback(draw);
  </script>
</head>
<body>
  <div id="visualization_div" style="width: 270px; height: 200px;"></div>
  <div id="toolbar_div"></div>
</body>
</html>

استفاده

با فراخوانی متد google.visualization.drawToolbar() و پر کردن آن با انواع صادرات مجاز و داده های مورد نیاز برای هر کدام، یک نوار ابزار به صفحه خود اضافه کنید.

برای استفاده از نوار ابزار، تجسم شما باید داده های خود را از یک URL دریافت کند. شما نمی توانید اشیاء DataTable یا DataView با دست را ارسال کنید. شما URL داده های مورد استفاده برای پر کردن تجسم خود را به متد drawToolbar() ارسال می کنید.

اگر می‌خواهید یک مؤلفه iGoogle یا یک iFrame جاسازی‌شده ارائه کنید که این ابزار را نگه می‌دارد، باید یک URL برای نسخه ابزارک‌سازی‌شده تجسم داشته باشید.

انواع خروجی

بسته به اینکه چگونه نوار ابزار خود را در متد drawToolbar() پیکربندی می‌کنید، نوار ابزار می‌تواند انتخاب یک یا چند نوع خروجی زیر را به کاربر ارائه دهد:

  • یک نسخه CSV ساده از داده‌ها (که مرورگر شما بسته به پیکربندی مرورگر و/یا آن را ارائه می‌کند یا پیشنهاد دانلود و ذخیره می‌کند.
  • یک جدول HTML حاوی داده ها، باز شده در یک پنجره مرورگر جدید و/یا
  • کد <iframe> HTML برای جاسازی این تجسم در یک صفحه وب و/یا
  • پیوندی به صفحه که کاربر را قادر می سازد این ابزار را در صفحه iGoogle خود جاسازی کند.

نحو

google.visualization.drawToolbar(container, components)

مولفه های

ظرف
یک دسته برای یک عنصر DOM در صفحه. API نوار ابزار را به داخل این عنصر می کشد. این شبیه به پارامتر ظرف برای تجسم استاندارد است. شما باید نوار ابزار را در مجاورت تصویرسازی که از آن استفاده می کند قرار دهید.
اجزاء
آرایه ای از اشیاء، که هر کدام فرمتی را توصیف می کنند که داده ها، یا تجسم، می توانند به آن صادر شوند. نوار ابزار گزینه ها را به ترتیب اضافه شده به آرایه در اختیار کاربر قرار می دهد. هر شی دارای یک ویژگی نوع است که قالب را توصیف می کند و یک یا چند ویژگی اضافی بسته به نوع دارد:
  • type: 'csv' - این گزینه داده ها را به یک فایل مقدار جدا شده با کاما صادر می کند. یک گفتگوی "ذخیره به عنوان" در مرورگر باز می شود.
    • منبع داده : " string " - آدرس منبع داده.
  • type: html' - این گزینه داده ها را به یک جدول HTML صادر می کند. صفحه با جدول داده ها در یک پنجره جدید در مرورگر باز می شود.
    • منبع داده : رشته url منبع داده.
  • type: igoogle - این گزینه به کاربر امکان می دهد تصویر را به صفحه iGoogle خود اضافه کند. صفحه "افزودن به iGoogle" در مرورگر باز می شود. فقط در صورتی از این مورد استفاده کنید که تجسم در یک نسخه ابزارک موجود باشد.
    • منبع داده : رشته url منبع داده.
    • ابزار : رشته آدرس اینترنتی xml نسخه ابزارک شده. توجه داشته باشید که تجسمی که نوار ابزار با آن مرتبط است لازم نیست نسخه ابزارک شده باشد.
    • userprefs : یک شی ترجیحات اختیاری مناسب برای این تجسم، که تنظیمات برگزیده تجسم را مشخص می کند.
  • type: htmlcode - این گزینه یک بلوک از کد HTML ایجاد می کند که کاربر می تواند آن را در یک صفحه وب برای نمایش تجسم در داخل یک iframe جاسازی کند. یک پنجره بازشو با عنصر html دقیق ابزار در مرورگر باز می شود. فقط در صورتی از این مورد استفاده کنید که تجسم در یک نسخه ابزارک موجود باشد.
    • منبع داده : رشته url منبع داده.
    • ابزار : رشته آدرس اینترنتی ابزار xml.
    • userprefs : یک شی ترجیحات اختیاری مناسب برای این تجسم، که تنظیمات برگزیده تجسم را مشخص می کند.
    • style : یک رشته اختیاری برای سبک iframe. به عنوان مثال: 'width: 300px; ارتفاع: 500px;'.

مثال

function drawToolbar() {
  var components = [
      {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
       userprefs: {'3d': 1}},
      {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml'}
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
};

سیاست داده

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

بومی سازی

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