منسوخ
این تجسم با نسخه جدید جایگزین شده است. لطفا به جای آن از آن استفاده کنید. برای مهاجرت آسان، لطفاً به صفحه یادداشتهای انتشار مراجعه کنید.
بررسی اجمالی
نمودار میلهای افقی که در مرورگر با استفاده از SVG یا VML ارائه میشود. هنگام کلیک کردن روی نقاط، نکاتی را نشان می دهد. هنگام کلیک کردن روی نوشته های افسانه، خطوط را متحرک می کند. برای نسخه عمودی این نمودار، نمودار ستونی را ببینید.
توسط: گوگل
مثال
خودتان آن را در زمین بازی تجسم کد کنید
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["barchart"]}); 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.BarChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'}); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
بارگذاری
نام بسته google.load
"barchart"
است
google.load("visualization", "1", {packages: ["barchart"]});
نام کلاس تجسم google.visualization.BarChart
است
var visualization = new google.visualization.BarChart(container);
فرمت داده
هر ردیف در جدول نشان دهنده گروهی از نوارهای مجاور است.
ستون اول جدول باید یک رشته باشد و نشان دهنده برچسب آن گروه از میله ها باشد. هر تعداد ستون می تواند دنبال شود، همه عددی، هر کدام نشان دهنده نوارهایی با رنگ و موقعیت نسبی یکسان در هر گروه است.
مقدار در یک سطر و ستون معین، ارتفاع تک نوار نشان داده شده توسط این سطر و ستون را کنترل می کند.
گزینه های پیکربندی
نام | تایپ کنید | پیش فرض | شرح |
---|---|---|---|
axisColor | رشته یا Object | رنگ پیش فرض | رنگ محور. مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند. |
axisBackgroundColor | رشته یا Object | رنگ پیش فرض | پس زمینه حاشیه حول محور. مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند. |
axisFontSize | عدد | خودکار | اندازه قلم متن محور نمودار، بر حسب پیکسل. |
رنگ پس زمینه | رشته یا Object | رنگ پیش فرض | رنگ پس زمینه برای ناحیه اصلی نمودار. ممکن است یکی از گزینه های زیر باشد:
|
رنگ لبه | رشته یا Object | رنگ پیش فرض | حاشیه اطراف عناصر نمودار. مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند. |
رنگ ها | آرایه ای از رشته ها یا اشیاء | رنگ های پیش فرض | آرایه ای از رنگ ها، که در آن هر عنصر رنگ یک سری را مشخص می کند. برای هر سری باید یک عنصر آرایه را مشخص کنید.
|
enableTooltip | بولی | درست است، واقعی | اگر روی درست تنظیم شود، وقتی کاربر روی یک نوار کلیک می کند، نکات ابزار نشان داده می شود. |
focusBorderColor | رشته یا Object | رنگ پیش فرض | حاشیه اطراف عناصر نمودار که در فوکوس هستند (با ماوس نشان داده شده است). مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند. |
ارتفاع | عدد | ارتفاع کانتینر | ارتفاع نمودار بر حسب پیکسل |
سه بعدی است | بولی | نادرست | اگر روی true تنظیم شود، یک تغییر سه بعدی را نمایش می دهد. |
انباشته شده است | بولی | نادرست | اگر روی true تنظیم شود، مقادیر خط روی هم انباشته می شوند (انباشته می شوند). |
افسانه | رشته | 'درست' | موقعیت و نوع افسانه. می تواند یکی از موارد زیر باشد:
|
legendBackgroundColor | رشته یا Object | رنگ پیش فرض | رنگ پس زمینه برای ناحیه افسانه نمودار. مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند. |
legendFontSize | عدد | خودکار | اندازه فونت افسانه، بر حسب پیکسل. |
legendTextColor | رشته یا Object | رنگ پیش فرض | رنگ متن افسانه مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند. |
logScale | بولی | نادرست | اگر درست باشد، محور اصلی باید به صورت لگاریتمی مقیاس شود. |
حداکثر | عدد | خودکار | بالاترین خط شبکه محور Y را مشخص می کند. خط شبکه واقعی بزرگتر از دو مقدار خواهد بود: حداکثر مقدار گزینه یا بالاترین مقدار داده، که به علامت شبکه بالاتر بعدی گرد شده است. |
دقیقه | عدد | خودکار | پایین ترین خط شبکه محور Y را مشخص می کند. خط شبکه واقعی پایین تر از دو مقدار خواهد بود: مقدار گزینه min یا کمترین مقدار داده که به علامت شبکه پایین بعدی گرد شده است. |
معکوس محور | بولی | درست است، واقعی | اگر روی true (پیشفرض) تنظیم شود، دستهها از بالا به پایین ترسیم میشوند. اگر روی false تنظیم شود، میلهها را از پایین به بالا میکشد. |
نشان دادن دسته ها | بولی | درست است، واقعی | اگر درست باشد، برچسبهای دسته را نشان میدهد. اگر دروغ باشد، نمی شود. |
عنوان | رشته | بدون عنوان | متن برای نمایش در بالای نمودار. |
عنوان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() را فراخوانی کنید. | هیچ یک |
سیاست داده
تمام کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.