تجسم: نمودار میله ای (تصویر)

مهم: بخش نمودارهای تصویری ابزار نمودار Google از 20 آوریل 2012 رسماً منسوخ شده است. طبق خط مشی منسوخ شدن ما به کار خود ادامه خواهد داد.

بررسی اجمالی

نمودار میله‌ای که با استفاده از Google Charts API به صورت تصویر ارائه می‌شود.

مثال

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.ImageBarChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

بارگذاری

نام بسته google.charts.load "imagebarchart" است

  google.charts.load("current", {packages: [[]"imagebarchart"]});

نام کلاس تجسم google.visualization.ImageBarChart است

  var visualization = new google.visualization.ImageBarChart(container);

فرمت داده

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

گزینه های پیکربندی

نام تایپ کنید پیش فرض شرح
رنگ پس زمینه رشته "#FFFFFF" (سفید) رنگ پس‌زمینه نمودار در قالب رنگ Chart API .
رنگ ها آرایه <رشته> خودکار از این برای اختصاص رنگ های خاص به هر سری داده استفاده کنید. رنگ ها در قالب رنگ Chart API مشخص می شوند. رنگ i برای ستون داده i استفاده می‌شود، اگر تعداد ستون‌های داده بیشتر از رنگ‌ها باشد، تا ابتدا بسته می‌شود. اگر تنوع یک رنگ برای همه سری ها قابل قبول است، به جای آن از گزینه color استفاده کنید.
enableEvents بولی نادرست باعث می شود نمودارها رویدادهای ایجاد شده توسط کاربر مانند کلیک یا ماوس را روی آن پرتاب کنند. فقط برای انواع نمودار خاص پشتیبانی می شود. رویدادهای زیر را ببینید.
ارتفاع عدد ارتفاع کانتینر ارتفاع نمودار بر حسب پیکسل
انباشته شده است بولی درست است، واقعی کنترل می کند که آیا چندین ستون داده به صورت نوارهای انباشته (بر خلاف گروه بندی) نمایش داده می شود.
عمودی است بولی نادرست عمودی بودن میله ها را کنترل می کند.
افسانه رشته 'درست' موقعیت و نوع افسانه. می تواند یکی از موارد زیر باشد:
  • "راست" - در سمت راست نمودار.
  • "چپ" - در سمت چپ نمودار.
  • "بالا" - بالای نمودار.
  • "پایین" - زیر نمودار.
  • "هیچ" - هیچ افسانه ای نمایش داده نمی شود.
حداکثر عدد خودکار حداکثر مقدار برای نشان دادن در محور Y.
دقیقه عدد خودکار حداقل مقدار برای نشان دادن در محور Y.
نشان دادن دسته بندی برچسب ها بولی درست است، واقعی اگر روی false تنظیم شود، برچسب های دسته ها را حذف می کند.
showValueLabels بولی درست است، واقعی اگر روی false تنظیم شود، برچسب های مقادیر را حذف می کند.
عنوان رشته بدون عنوان متن برای نمایش در بالای نمودار.
valueLabelsInterval عدد خودکار فاصله زمانی که در آن برچسب های محور ارزش نشان داده می شود. به عنوان مثال، اگر minmax 100، و valueLabelsInterval 20 باشد، نمودار برچسب های محور را در (0، 20، 40، 60، 80 100) نشان می دهد.
عرض عدد عرض کانتینر عرض نمودار بر حسب پیکسل

مواد و روش ها

روش نوع برگشت شرح
draw(data, options) هیچ یک نمودار را رسم می کند.

مناسبت ها

می توانید برای شنیدن رویدادهای شرح داده شده در صفحه نمودار تصویر عمومی ثبت نام کنید.

سیاست داده

لطفاً به خط مشی ورود به سیستم نمودار API مراجعه کنید.