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

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

منسوخ

این تجسم با نسخه جدید جایگزین شده است. لطفا به جای آن از آن استفاده کنید. برای مهاجرت آسان، لطفاً به صفحه یادداشت‌های انتشار مراجعه کنید.

بررسی اجمالی

نمودار ناحیه ای که در مرورگر با استفاده از SVG یا VML ارائه می شود. هنگام کلیک کردن روی نقاط، نکاتی را نشان می دهد. هنگام کلیک کردن روی نوشته های افسانه، خطوط را متحرک می کند.

توسط: گوگل

مثال

خودتان آن را در زمین بازی تجسم کد کنید

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["areachart"]});
      google.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.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

بارگذاری

نام بسته google.load "areachart".

  google.load("visualization", "1", {packages: ["areachart"]});

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

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

فرمت داده

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

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

نام	تایپ کنید	پیش فرض	شرح
axisColor	رشته یا Object	رنگ پیش فرض	رنگ محور. مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند.
axisBackgroundColor	رشته یا Object	رنگ پیش فرض	پس زمینه حاشیه حول محور. مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند.
axisFontSize	عدد	خودکار	اندازه قلم متن محور نمودار، بر حسب پیکسل.
رنگ پس زمینه	رشته یا Object	رنگ پیش فرض	رنگ پس زمینه برای ناحیه اصلی نمودار. ممکن است یکی از گزینه های زیر باشد: رشته ای با رنگی که توسط HTML پشتیبانی می شود، به عنوان مثال "قرمز" یا "#00cc00" یک شی با ویژگی های `stroke` `fill` و `strokeSize` . `stroke` و `fill` باید رشته ای با رنگ باشد. strokeSize یک عدد است. به عنوان مثال: `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}` . برای استفاده از just fill، بدون ضربه، از `stroke:null, strokeSize: 0` استفاده کنید.
رنگ لبه	رشته یا Object	رنگ پیش فرض	حاشیه اطراف عناصر نمودار. مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند.
رنگ ها	آرایه رشته ها	رنگ های پیش فرض	رنگ هایی که برای عناصر نمودار استفاده می شود. آرایه ای از رشته ها. هر عنصر یک رشته است که رنگی است که توسط HTML پشتیبانی می شود، به عنوان مثال "قرمز" یا "#00cc00".
enableTooltip	بولی	درست است، واقعی	اگر روی درست تنظیم شود، وقتی کاربر روی یک نقطه داده کلیک می کند، نکات ابزار نشان داده می شود.
focusBorderColor	رشته یا Object	رنگ پیش فرض	حاشیه اطراف عناصر نمودار که در فوکوس هستند (با ماوس نشان داده شده است). مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند.
ارتفاع	عدد	ارتفاع کانتینر	ارتفاع نمودار بر حسب پیکسل
انباشته شده است	بولی	نادرست	اگر روی true تنظیم شود، مقادیر خط روی هم انباشته می شوند (انباشته می شوند).
افسانه	رشته	'درست'	موقعیت و نوع افسانه. می تواند یکی از موارد زیر باشد: "راست" - در سمت راست نمودار. "چپ" - در سمت چپ نمودار. "بالا" - بالای نمودار. "پایین" - زیر نمودار. "هیچ" - هیچ افسانه ای نمایش داده نمی شود.
legendBackgroundColor	رشته یا Object	رنگ پیش فرض	رنگ پس زمینه برای ناحیه افسانه نمودار. مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند.
legendFontSize	عدد	خودکار	اندازه فونت افسانه، بر حسب پیکسل.
legendTextColor	رشته یا Object	رنگ پیش فرض	رنگ متن افسانه مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند.
خط اندازه	عدد	2	عرض خط بر حسب پیکسل از صفر برای پنهان کردن تمام خطوط استفاده کنید و فقط نقاط را نشان دهید.
logScale	بولی	نادرست	اگر درست باشد، محور اصلی باید به صورت لگاریتمی مقیاس شود.
حداکثر	عدد	خودکار	بالاترین خط شبکه محور Y را مشخص می کند. خط شبکه واقعی بزرگتر از دو مقدار خواهد بود: حداکثر مقدار گزینه یا بالاترین مقدار داده، که به علامت شبکه بالاتر بعدی گرد شده است.
دقیقه	عدد	خودکار	پایین ترین خط شبکه محور Y را مشخص می کند. خط شبکه واقعی پایین تر از دو مقدار خواهد بود: مقدار گزینه min یا کمترین مقدار داده که به علامت شبکه پایین بعدی گرد شده است.
اندازه نقطه	عدد	3	اندازه نقاط نمایش داده شده بر حسب پیکسل از صفر برای پنهان کردن تمام نقاط استفاده کنید.
معکوس محور	بولی	نادرست	اگر روی true تنظیم شود، دسته ها را از راست به چپ ترسیم می کند. پیش فرض این است که از چپ به راست بکشید.
نشان دادن دسته ها	بولی	درست است، واقعی	اگر درست باشد، برچسب‌های دسته را نشان می‌دهد. اگر دروغ باشد، نمی شود.
عنوان	رشته	بدون عنوان	متن برای نمایش در بالای نمودار.
عنوانX	رشته	بدون عنوان	متن برای نمایش در زیر محور افقی.
عنوانY	رشته	بدون عنوان	متن برای نمایش با محور عمودی.
عنوان رنگ	رشته یا Object	رنگ پیش فرض	رنگ برای عنوان نمودار. مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند.
titleFontSize	عدد	خودکار	اندازه قلم برای عنوان نمودار، بر حسب پیکسل.
tooltipFontSize	عدد	11	اندازه فونت متن راهنمای ابزار. اگر نکته ابزار برای نگهداری متن در فونت مشخص شده خیلی کوچک باشد، ممکن است کاهش یابد.
tooltipHeight	عدد	60	ارتفاع راهنمای ابزار، بر حسب پیکسل. ارتفاع نوک ابزار ثابت است. هرگز رشد نمی کند یا کوچک می شود تا متناسب با طول یا اندازه قلم متن باشد. اما هر چیزی بیشتر از 1/3 ارتفاع نمودار برش داده می شود.
tooltipWidth	عدد	120	عرض راهنمای ابزار، بر حسب پیکسل. عرض راهنمای ابزار ثابت است. هرگز رشد نمی کند یا کوچک می شود تا متناسب با طول یا اندازه قلم متن باشد. اما هر چیزی بیشتر از عرض نمودار برش داده می شود.
عرض	عدد	عرض کانتینر	عرض نمودار بر حسب پیکسل

مواد و روش ها

روش	نوع برگشت	شرح
`draw(data, options)`	هیچ یک	نمودار را رسم می کند.
`getSelection()`	آرایه ای از عناصر انتخاب	پیاده سازی استاندارد `getSelection()` . عناصر انتخاب شده عناصر ستون و سلول هستند. فقط یک ستون یا سلول می تواند در هر زمان توسط کاربر انتخاب شود.
`setSelection()`	هیچ یک	اجرای استاندارد `setSelection()` اما از انتخاب تنها یک عنصر پشتیبانی می کند. هر ورودی انتخابی را به عنوان انتخاب ستون یا سلول در نظر می گیرد. توجه داشته باشید که ستون برچسب را نمی توان انتخاب کرد.

مناسبت ها

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

سیاست داده

تمام کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.