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

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

  1. بررسی اجمالی
  2. مثال
  3. بارگذاری
  4. فرمت داده
  5. گزینه های پیکربندی
  6. مواد و روش ها
  7. مناسبت ها
  8. سیاست داده

بررسی اجمالی

نمودار ناحیه ای که با استفاده از 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:["imageareachart"]});
      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.ImageAreaChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

بارگذاری

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

  google.charts.load('current', {packages: ['imageareachart']});

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

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

فرمت داده

هر ستون نشان دهنده یک خط در نمودار است. هر ورودی مقدار محور Y در همان نقطه محور X است، و تجسم آنها را با یک خط مستقیم به هم متصل می کند، سپس ناحیه زیر خط را پر می کند.

داده ها توسط ستون پردازش می شوند، از ستون صفر شروع می شود و افزایش می یابد. ابتدا باید بالاترین خطوط را بنویسید، سپس خطوط پایین را، زیرا اگر ابتدا یک خط پایین‌تر را نقاشی می‌کردید، خط بالاتر روی آن نقاشی می‌کرد و خطوط پایین‌تر را پنهان می‌کرد. بنابراین سعی کنید ستون 1 دارای نقاط بالاتر از ستون 2، ستون 2 بالاتر از ستون 3 و غیره باشد. اگر در ستون سمت راست یک یا دو نقطه بالاتر از ستون سمت چپ دارید، ممکن است تا حدی خط پایین را مبهم کند، اما همچنان باید قابل مشاهده باشد.

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

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

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

مواد و روش ها

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

مناسبت ها

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

سیاست داده

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