بررسی اجمالی
نمودار ناحیه ای که در مرورگر با استفاده از SVG یا VML ارائه می شود. هنگام نگه داشتن ماوس روی نقاط، نکاتی را نشان می دهد.
یک مثال ساده
<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']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2013', 1000, 400], ['2014', 1170, 460], ['2015', 660, 1120], ['2016', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, vAxis: {minValue: 0} }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 100%; height: 500px;"></div> </body> </html>
انباشتن مناطق
بهطور پیشفرض، نمودار مساحتی مجموعهها را روی هم ترسیم میکند. به جای آن می توانید آنها را روی هم قرار دهید تا مقادیر داده در هر x-value جمع شوند. در نمودار مساحتی، مقدار هر سری همیشه نسبت به مقدار سری قبلی انباشته می شود. چیدن ترکیبی از مقادیر منفی و مثبت باعث همپوشانی نواحی می شود. توجه به این نکته ضروری است که گزینه interpolateNulls
با نمودارهای ناحیه انباشته کار نمی کند.
در سمت چپ، isStacked
روی false (پیشفرض) و در سمت راست روی true تنظیم شده است:
توجه داشته باشید که ترتیب ورودی های افسانه متفاوت است. در نمودار دوم پشتهای، ترتیب معکوس میشود، سری 0 را در پایین قرار میدهیم تا با چیدمان عناصر سری مطابقت بهتری داشته باشد و افسانه را با دادهها مطابقت دهد.
نمودارهای ناحیه انباشته نیز از انباشته شدن 100% پشتیبانی می کنند، که در آن پشته های عناصر در هر مقدار دامنه تغییر مقیاس داده می شوند به طوری که جمع آنها به 100% می رسد. گزینههای مربوط به آن isStacked: 'percent'
هستند که هر مقدار را به صورت درصد 100% فرمت میکند و isStacked: 'relative'
که هر مقدار را به صورت کسری از 1 قالببندی میکند. گزینه isStacked: 'absolute'
نیز وجود دارد. که از نظر عملکردی معادل isStacked: true
.
توجه داشته باشید که در نمودار 100٪ روی هم در سمت راست، مقادیر تیک بر اساس مقیاس نسبی 0-1 به عنوان کسرهای 1 است.
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, vAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'relative', height: 300, legend: {position: 'top', maxLines: 3}, vAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
فرض کنید یکی از سری های شما هیچ داده ای برای برخی از مقادیر x شما ندارد. به عنوان مثال، در نمودارهای بالا، بیایید فرض کنیم که پهپادها تا سال 2015 در دسترس نیستند، و Segways در سال 2014 در دسترس نیستند. توجه داشته باشید که ما از مقادیر null در مواردی که داده وجود ندارد، استفاده می کنیم، بنابراین نمودار به این صورت است:
اگر این ناپیوستگیها درخواست تجدیدنظر نکردند، میتوانید صفرها را جایگزین صفرها کنید، و/یا گزینه interpolateNulls را روی true تنظیم کنید:
بارگذاری
نام بسته google.charts.load
"corechart".
google.charts.load("current", {packages: ["corechart"]});
نام کلاس تجسم google.visualization.AreaChart
است.
var visualization = new google.visualization.AreaChart(container);
فرمت داده
سطرها: هر ردیف در جدول مجموعه ای از نقاط داده را با موقعیت محور x یکسان نشان می دهد.
ستون ها:
ستون 0 | ستون 1 | ... | ستون N | |
---|---|---|---|---|
هدف: | مقادیر خط 1 | ... | مقادیر خط N | |
نوع داده: | عدد | ... | عدد | |
نقش: | دامنه | داده ها | ... | داده ها |
نقش های ستون اختیاری: | ... |
گزینه های پیکربندی
نام | |
---|---|
تجمع هدف | چگونه چندین انتخاب داده در راهنمای ابزار جمع می شوند:
aggregationTarget اغلب همراه با selectionMode و tooltip.trigger استفاده می شود، به عنوان مثال:var options = { // Allow multiple // simultaneous selections. selectionMode: 'multiple', // Trigger tooltips // on selections. tooltip: {trigger: 'selection'}, // Group selections // by x-value. aggregationTarget: 'category', }; نوع: رشته پیش فرض: "خودکار" |
انیمیشن.مدت | مدت زمان انیمیشن، بر حسب میلی ثانیه. برای جزئیات، به مستندات انیمیشن مراجعه کنید. نوع: شماره پیش فرض: 0 |
انیمیشن.تسهیل | تابع easing برای انیمیشن اعمال می شود. گزینه های ذیل در دسترس هستند:
نوع: رشته پیش فرض: "خطی" |
انیمیشن.استارت آپ | تعیین می کند که آیا نمودار در قرعه کشی اولیه متحرک می شود یا خیر. اگر نوع: بولی پیش فرض نادرست |
annotations.boxStyle | برای نمودارهایی که از حاشیه نویسی پشتیبانی می کنند، شی var options = { annotations: { boxStyle: { // Color of the box outline. stroke: '#888', // Thickness of the box outline. strokeWidth: 1, // x-radius of the corner curvature. rx: 10, // y-radius of the corner curvature. ry: 10, // Attributes for linear gradient fill. gradient: { // Start color for gradient. color1: '#fbf6a7', // Finish color for gradient. color2: '#33b679', // Where on the boundary to start and // end the color1/color2 gradient, // relative to the upper left corner // of the boundary. x1: '0%', y1: '0%', x2: '100%', y2: '100%', // If true, the boundary for x1, // y1, x2, and y2 is the box. If // false, it's the entire chart. useObjectBoundingBoxUnits: true } } } }; این گزینه در حال حاضر برای نمودارهای ناحیه، نوار، ستون، ترکیب، خط و پراکندگی پشتیبانی می شود. توسط نمودار حاشیه نویسی پشتیبانی نمی شود. نوع: شی پیش فرض: null |
annotations.datum | برای نمودارهایی که از حاشیه نویسی پشتیبانی می کنند، شی annotations.datum به شما امکان می دهد انتخاب نمودارهای Google را برای حاشیه نویسی های ارائه شده برای عناصر داده جداگانه (مانند مقادیر نمایش داده شده با هر نوار در نمودار میله ای) لغو کنید. میتوانید رنگ را با annotations.datum.stem.color ، طول ساقه را با annotations.datum.stem.length ، و سبک را با annotations.datum.style کنترل کنید. نوع: شی پیش فرض: رنگ "سیاه" است. طول 12 است. سبک "نقطه" است. |
حاشیه نویسی. دامنه | برای نمودارهایی که از حاشیه نویسی پشتیبانی می کنند، شی annotations.domain به شما امکان می دهد انتخاب نمودارهای Google برای حاشیه نویسی ارائه شده برای یک دامنه (محور اصلی نمودار، مانند محور X در نمودار خطی معمولی) را نادیده بگیرید. میتوانید رنگ را با annotations.domain.stem.color ، طول ساقه را با annotations.domain.stem.length و سبک را با annotations.domain.style کنترل کنید. نوع: شی پیش فرض: رنگ "سیاه" است. طول 5 است. سبک "نقطه" است. |
annotations.highContrast | برای نمودارهایی که از حاشیه نویسی پشتیبانی می کنند، annotations.highContrast به شما امکان می دهد انتخاب رنگ حاشیه annotations.highContrast توسط نمودارهای Google را نادیده بگیرید. بهطور پیشفرض، annotations.highContrast درست است، که باعث میشود نمودارها یک رنگ حاشیهنویسی با کنتراست خوب انتخاب کنند: رنگهای روشن در پسزمینههای تیره و تیره در روشن. اگر annotations.highContrast را روی false تنظیم کنید و رنگ حاشیه نویسی خود را مشخص نکنید، Google Charts از رنگ سری پیشفرض برای حاشیهنویسی استفاده میکند: نوع: بولی پیش فرض: درست است |
annotations.stem | برای نمودارهایی که از حاشیه نویسی پشتیبانی می کنند، شی annotations.stem به شما امکان می دهد انتخاب نمودارهای Google برای سبک پایه را نادیده بگیرید. می توانید رنگ را با annotations.stem.color و طول ساقه را با annotations.stem.length کنترل کنید. توجه داشته باشید که گزینه طول پایه هیچ تاثیری بر حاشیه نویسی با سبک 'line' ندارد: برای حاشیه نویسی های مبدأ 'line' ، طول پایه همیشه با متن یکسان است و برای حاشیه نویسی دامنه 'line' ، ساقه در کل نمودار گسترش می یابد. . نوع: شی پیش فرض: رنگ "سیاه" است. طول برای حاشیه نویسی دامنه 5 و برای حاشیه نویسی مبدأ 12 است. |
حاشیه نویسی.سبک | برای نمودارهایی که از حاشیه نویسی پشتیبانی می کنند، گزینه annotations.style به شما امکان می دهد انتخاب نوع حاشیه نویسی نمودارهای Google را لغو کنید. می تواند 'line' یا 'point' باشد. نوع: رشته پیش فرض: "نقطه" |
annotations.textStyle | برای نمودارهایی که از حاشیه نویسی پشتیبانی می کنند، شی annotations.textStyle ظاهر متن حاشیه نویسی را کنترل می کند:var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; این گزینه در حال حاضر برای نمودارهای ناحیه، نوار، ستون، ترکیب، خط و پراکندگی پشتیبانی می شود. توسط نمودار حاشیه نویسی پشتیبانی نمی شود. نوع: شی پیش فرض: null |
ناحیه شفافیت | کدورت پیشفرض ناحیه رنگی زیر یک سری نمودار ناحیه، که در آن 0.0 کاملاً شفاف و 1.0 کاملاً مات است. برای تعیین opacity برای یک سری جداگانه، مقدار areaOpacity را در ویژگی نوع: عدد، 0.0–1.0 پیش فرض: 0.3 |
axisTitlesPosition | محل قرار دادن عناوین محورها، در مقایسه با منطقه نمودار. مقادیر پشتیبانی شده:
نوع: رشته پیش فرض: "خارج" |
رنگ پس زمینه | رنگ پس زمینه برای ناحیه اصلی نمودار. می تواند یک رشته رنگی ساده HTML باشد، برای مثال: نوع: رشته یا شی پیش فرض: "سفید" |
backgroundColor.stroke | رنگ حاشیه نمودار، به عنوان یک رشته رنگ HTML. نوع: رشته پیشفرض: '#666' |
backgroundColor.strokeWidth | عرض حاشیه، بر حسب پیکسل. نوع: شماره پیش فرض: 0 |
backgroundColor.fill | رنگ پر کردن نمودار، به عنوان یک رشته رنگ HTML. نوع: رشته پیش فرض: "سفید" |
نمودار مساحت | یک شی با اعضا برای پیکربندی مکان و اندازه ناحیه نمودار (جایی که خود نمودار رسم شده است، به استثنای محورها و افسانه ها). دو فرمت پشتیبانی می شود: یک عدد یا یک عدد به دنبال ٪. یک عدد ساده یک مقدار در پیکسل است. یک عدد به دنبال آن % یک درصد است. مثال: نوع: شی پیش فرض: null |
chartArea.backgroundColor | رنگ پس زمینه ناحیه نمودار هنگامی که از یک رشته استفاده می شود، می تواند یک رشته هگزا (به عنوان مثال، '#fdc') یا یک نام رنگ انگلیسی باشد. هنگامی که یک شی استفاده می شود، ویژگی های زیر را می توان ارائه داد:
نوع: رشته یا شی پیش فرض: "سفید" |
نمودار Area.left | چقدر می توان نمودار را از حاشیه سمت چپ رسم کرد. نوع: عدد یا رشته پیش فرض: خودکار |
نمودار Area.top | چقدر می توان نمودار را از حاشیه بالایی رسم کرد. نوع: عدد یا رشته پیش فرض: خودکار |
نمودار مساحت.عرض | عرض منطقه نمودار نوع: عدد یا رشته پیش فرض: خودکار |
نمودار مساحت.ارتفاع | ارتفاع منطقه نمودار نوع: عدد یا رشته پیش فرض: خودکار |
رنگ ها | رنگ هایی که برای عناصر نمودار استفاده می شود. آرایه ای از رشته ها، که در آن هر عنصر یک رشته رنگی HTML است، به عنوان مثال: نوع: آرایه از رشته ها پیش فرض: رنگ های پیش فرض |
متقاطع | یک شی حاوی ویژگی های متقاطع برای نمودار. نوع: شی پیش فرض: null |
crosshair.color | رنگ متقاطع، که به صورت نام رنگ (مثلاً "آبی") یا یک مقدار RGB (مثلاً "#adf") بیان می شود. نوع: رشته نوع: پیش فرض |
متقاطع.متمرکز | یک شی حاوی ویژگی های متقاطع هنگام فوکوس. نوع: شی پیش فرض: پیش فرض |
تیرگی. شفافیت | تیرگی متقاطع، با نوع: شماره پیش فرض: 1.0 |
متقابل. جهت گیری | جهت گیری ضربدری، که می تواند فقط برای موهای عمودی «عمودی»، فقط برای موهای افقی «افقی» یا برای موهای متقاطع سنتی «هر دو» باشد. نوع: رشته پیش فرض: "هر دو" |
متقاطع.انتخاب شد | یک شی حاوی ویژگی های متقاطع پس از انتخاب. نوع: شی پیش فرض: پیش فرض |
ضربدری.ماشه | زمان نمایش خطوط متقاطع: روی نوع: رشته پیش فرض: "هر دو" |
شفافیت داده | شفافیت نقاط داده، با 1.0 کاملاً غیر شفاف و 0.0 کاملاً شفاف. در نمودارهای پراکندگی، هیستوگرام، میله ای و ستونی، این به داده های قابل مشاهده اشاره دارد: نقاط در نمودار پراکندگی و مستطیل ها در بقیه. در نمودارهایی که انتخاب دادهها یک نقطه ایجاد میکند، مانند نمودارهای خط و ناحیه، این به دایرههایی اطلاق میشود که هنگام شناور یا انتخاب ظاهر میشوند. نمودار ترکیبی هر دو رفتار را نشان می دهد و این گزینه روی نمودارهای دیگر تأثیری ندارد. (برای تغییر کدورت خط روند، کدورت خط روند را ببینید.) نوع: شماره پیش فرض: 1.0 |
فعال کردن تعامل | آیا نمودار رویدادهای مبتنی بر کاربر را نشان می دهد یا به تعامل کاربر واکنش نشان می دهد. اگر نادرست باشد، نمودار «انتخاب» یا سایر رویدادهای مبتنی بر تعامل را پرتاب نمیکند (اما رویدادهای آماده یا خطا را پرتاب میکند)، و متن شناور را نمایش نمیدهد یا بسته به ورودی کاربر تغییر نمیکند. نوع: بولی پیش فرض: درست است |
کاوشگر | گزینه این ویژگی آزمایشی است و ممکن است در نسخه های بعدی تغییر کند. توجه: کاوشگر فقط با محورهای پیوسته (مانند اعداد یا تاریخ) کار می کند. نوع: شی پیش فرض: null |
explorer.actions | Google Charts Explorer از سه عمل پشتیبانی می کند:
نوع: آرایه از رشته ها پیشفرض: ['dragToPan', 'rightClickToReset'] |
explorer.axis | به طور پیش فرض، کاربران می توانند در صورت استفاده از گزینه نوع: رشته پیشفرض: هم افقی و هم عمودی |
explorer.keepInBounds | بهطور پیشفرض، کاربران میتوانند بدون توجه به جایی که دادهها هستند، همه جا حرکت کنند. برای اطمینان از اینکه کاربران فراتر از نمودار اصلی حرکت نمی کنند، از نوع: بولی پیش فرض: نادرست |
explorer.maxZoomIn | حداکثری که کاوشگر می تواند بزرگنمایی کند. به طور پیش فرض، کاربران می توانند به اندازه ای بزرگنمایی کنند که فقط 25٪ از نمای اصلی را ببینند. تنظیم نوع: شماره پیش فرض: 0.25 |
explorer.maxZoomOut | حداکثری که کاوشگر می تواند بزرگنمایی کند. بهطور پیشفرض، کاربران میتوانند به اندازهای بزرگنمایی کنند که نمودار تنها 1/4 فضای موجود را اشغال کند. تنظیم نوع: شماره پیش فرض: 4 |
explorer.zoomDelta | وقتی کاربران بزرگنمایی یا کوچکنمایی میکنند، نوع: شماره پیش فرض: 1.5 |
تمرکز هدف | نوع موجودی که فوکوس را روی شناور ماوس دریافت می کند. همچنین تأثیر می گذارد که کدام موجودیت با کلیک ماوس انتخاب می شود و کدام عنصر جدول داده با رویدادها مرتبط است. می تواند یکی از موارد زیر باشد:
در focusTarget 'category'، راهنمای ابزار تمام مقادیر دسته را نمایش می دهد. این ممکن است برای مقایسه مقادیر سری های مختلف مفید باشد. نوع: رشته پیش فرض: "مقصد" |
اندازه فونت | اندازه فونت پیشفرض، بر حسب پیکسل، تمام متنهای نمودار. میتوانید با استفاده از ویژگیهای عناصر نمودار خاص، این مورد را لغو کنید. نوع: شماره پیش فرض: خودکار |
نام قلم | صورت فونت پیشفرض برای تمام متنهای نمودار. میتوانید با استفاده از ویژگیهای عناصر نمودار خاص، این مورد را لغو کنید. نوع: رشته پیش فرض: "Arial" |
forceIFrame | نمودار را درون یک قاب درون خطی رسم می کند. (توجه داشته باشید که در IE8، این گزینه نادیده گرفته می شود؛ همه نمودارهای IE8 در i-frame ترسیم می شوند.) نوع: بولی پیش فرض: نادرست |
hAxis | یک شی با اعضایی برای پیکربندی عناصر مختلف محور افقی. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } نوع: شی پیش فرض: null |
hAxis.baseline | خط مبنا برای محور افقی. این گزینه فقط برای یک محور نوع: شماره پیش فرض: خودکار |
hAxis.baselineColor | رنگ خط مبنا برای محور افقی. می تواند هر رشته رنگی HTML باشد، به عنوان مثال: این گزینه فقط برای یک محور نوع: شماره پیش فرض: "سیاه" |
hAxis.direction | جهتی که در آن مقادیر در امتداد محور افقی رشد می کنند. برای معکوس کردن ترتیب مقادیر، نوع: 1 یا -1 پیش فرض: 1 |
hAxis.format | یک رشته قالب برای برچسب های عددی یا محور تاریخ. برای برچسبهای محور اعداد، این زیرمجموعهای از مجموعه الگوی ICU قالببندی اعشاری است. برای مثال،
برای برچسبهای محور تاریخ، این زیرمجموعهای از مجموعه الگوی ICU قالببندی تاریخ است. برای مثال، قالب بندی واقعی اعمال شده بر روی برچسب از محلی که API با آن بارگذاری شده است مشتق شده است. برای جزئیات بیشتر، به بارگیری نمودارها با یک منطقه خاص مراجعه کنید. در محاسبه مقادیر تیک و خطوط شبکه، چندین ترکیب جایگزین از همه گزینههای خط شبکه مربوطه در نظر گرفته میشود و در صورت تکرار یا همپوشانی برچسبهای تیک قالببندی شده، گزینههای جایگزین رد خواهند شد. بنابراین اگر میخواهید فقط مقادیر تیک اعداد صحیح را نشان دهد، میتوانید این گزینه فقط برای یک محور نوع: رشته پیش فرض: خودکار |
hAxis.gridlines | یک شی با خصوصیات برای پیکربندی خطوط شبکه در محور افقی. توجه داشته باشید که خطوط شبکه محور افقی به صورت عمودی ترسیم می شوند. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: {color: '#333', minSpacing: 20} این گزینه فقط برای یک محور نوع: شی پیش فرض: null |
hAxis.gridlines.color | رنگ خطوط شبکه افقی در داخل منطقه نمودار. یک رشته رنگ معتبر HTML را مشخص کنید. نوع: رشته پیشفرض: '#CCC' |
hAxis.gridlines.count | تعداد تقریبی خطوط شبکه افقی در داخل منطقه نمودار. اگر یک عدد مثبت برای نوع: شماره پیش فرض: -1 |
hAxis.gridlines.interval | آرایه ای از اندازه ها (به عنوان مقادیر داده، نه پیکسل) بین خطوط شبکه مجاور. این گزینه در حال حاضر فقط برای محورهای عددی است، اما مشابه گزینه های نوع: عدد بین 1 تا 10 بدون احتساب 10. پیش فرض: محاسبه شده |
hAxis.gridlines.minSpacing | حداقل فضای صفحه نمایش، بر حسب پیکسل، بین خطوط شبکه اصلی hAxis. پیشفرض برای خطوط شبکه اصلی نوع: شماره پیش فرض: محاسبه شده |
hAxis.gridlines.multiple | تمام مقادیر خط شبکه و تیک باید مضربی از مقدار این گزینه باشد. توجه داشته باشید که برخلاف فواصل، توان های 10 برابر مضرب در نظر گرفته نمی شوند. بنابراین میتوانید با مشخص کردن نوع: شماره پیش فرض: 1 |
hAxis.gridlines.units | وقتی با خطوط شبکه محاسبه شده نمودار استفاده می شود، قالب پیش فرض را برای جنبه های مختلف انواع داده های تاریخ/تاریخ/زمان روز لغو می کند. امکان قالب بندی سال ها، ماه ها، روزها، ساعت ها، دقیقه ها، ثانیه ها و میلی ثانیه ها را فراهم می کند. قالب کلی: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } اطلاعات اضافی را می توان در تاریخ و زمان یافت. نوع: شی پیش فرض: null |
hAxis.minorGridlines | یک شی با اعضایی برای پیکربندی خطوط شبکه فرعی در محور افقی، مشابه گزینه hAxis.gridlines. این گزینه فقط برای یک محور نوع: شی پیش فرض: null |
hAxis.minorGridlines.color | رنگ خطوط شبکه افقی فرعی در داخل منطقه نمودار. یک رشته رنگ معتبر HTML را مشخص کنید. نوع: رشته پیشفرض: ترکیبی از خط شبکه و رنگهای پسزمینه |
hAxis.minorGridlines.count | گزینه نوع: شماره پیش فرض: 1 |
hAxis.minorGridlines.interval | گزینه minorGridlines.interval مانند گزینه main gridlines interval است، اما بازه ای که انتخاب می شود همیشه مقسوم علیه فاصله خط اصلی خواهد بود. فاصله پیشفرض برای مقیاسهای خطی نوع: شماره پیش فرض: 1 |
hAxis.minorGridlines.minSpacing | حداقل فضای مورد نیاز، بر حسب پیکسل، بین خطوط شبکه کوچک مجاور، و بین خطوط شبکه فرعی و اصلی. مقدار پیش فرض 1/2 minSpacing خطوط شبکه اصلی برای مقیاس های خطی و 1/5 minSpacing برای مقیاس های log است. نوع: شماره پیش فرض: محاسبه شده |
hAxis.minorGridlines.multiple | مانند نوع: شماره پیش فرض: 1 |
hAxis.minorGridlines.units | در صورت استفاده از خطوط کوچک گریدهای محاسبه شده نمودار، قالب پیش فرض را برای جنبه های مختلف انواع داده های تاریخ/تاریخ/زمان روز باطل می کند. امکان قالب بندی سال ها، ماه ها، روزها، ساعت ها، دقیقه ها، ثانیه ها و میلی ثانیه ها را فراهم می کند. قالب کلی: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } اطلاعات اضافی را می توان در تاریخ و زمان یافت. نوع: شی پیش فرض: null |
hAxis.logScale | ویژگی این گزینه فقط برای یک محور نوع: بولی پیش فرض: نادرست |
hAxis.scaleType | ویژگی
این گزینه فقط برای یک محور نوع: رشته پیش فرض: null |
hAxis.textPosition | موقعیت متن محور افقی، نسبت به ناحیه نمودار. مقادیر پشتیبانی شده: "out"، "in"، "none". نوع: رشته پیش فرض: "خارج" |
hAxis.textStyle | یک شی که سبک متن محور افقی را مشخص می کند. شیء دارای این قالب است: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } نوع: شی پیشفرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
hAxis.ticks | تیک های محور X را که به طور خودکار تولید می شوند با آرایه مشخص شده جایگزین می کند. هر عنصر آرایه باید یا یک مقدار تیک معتبر (مانند یک عدد، تاریخ، تاریخ، یا زمان روز)، یا یک شی باشد. اگر یک شی است، باید یک ویژگی viewWindow به طور خودکار گسترش مییابد تا تیکهای حداقل و حداکثر را شامل شود، مگر اینکه یک مثال ها:
این گزینه فقط برای یک محور نوع: آرایه ای از عناصر پیش فرض: خودکار |
hAxis.title | ویژگی نوع: رشته پیش فرض: null |
hAxis.titleTextStyle | یک شی که سبک متن عنوان محور افقی را مشخص می کند. شیء دارای این قالب است: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } نوع: شی پیشفرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
hAxis.allowContainerBoundaryTextCutoff | اگر نادرست باشد، خارجیترین برچسبها را پنهان میکند نه اینکه اجازه میدهد توسط ظرف نمودار برش داده شوند. اگر درست باشد، برش برچسب مجاز است. این گزینه فقط برای یک محور نوع: بولی پیش فرض: نادرست |
hAxis.slantedText | اگر درست است، متن محور افقی را با زاویه بکشید تا به جا دادن متن بیشتر در امتداد محور کمک کند. اگر نادرست است، متن محور افقی را به صورت عمودی بکشید. رفتار پیشفرض عبارت است از کج کردن متن در صورتی که وقتی به صورت عمودی ترسیم میشود، همه آن جا نمیشوند. توجه داشته باشید که این گزینه فقط زمانی در دسترس است که نوع: بولی پیش فرض: خودکار |
hAxis.slantedTextAngle | زاویه متن محور افقی، اگر به صورت مایل کشیده شده باشد. اگر نوع: شماره، -90—90 پیش فرض: 30 |
hAxis.maxAlternation | حداکثر تعداد سطوح متن محور افقی. اگر برچسبهای متن محور خیلی شلوغ شوند، سرور ممکن است برچسبهای همسایه را به سمت بالا یا پایین تغییر دهد تا برچسبها را به هم نزدیکتر کند. این مقدار بیشترین تعداد سطوح مورد استفاده را مشخص می کند. سرور میتواند از سطوح کمتری استفاده کند، اگر برچسبها بدون همپوشانی مناسب باشند. برای تاریخ و زمان، پیش فرض 1 است. نوع: شماره پیش فرض: 2 |
hAxis.maxTextLines | حداکثر تعداد خطوط مجاز برای برچسب های متنی. برچسبها در صورت طولانی بودن میتوانند چندین خط را پوشش دهند و تعداد خطوط به طور پیشفرض با ارتفاع فضای موجود محدود میشود. نوع: شماره پیش فرض: خودکار |
hAxis.minTextSpacing | حداقل فاصله افقی، بر حسب پیکسل، بین دو برچسب متنی مجاور مجاز است. اگر فاصله بین برچسبها خیلی متراکم باشد یا خیلی طولانی باشد، فاصله میتواند به زیر این آستانه کاهش یابد و در این مورد یکی از اقدامات عدم شلوغی برچسب اعمال میشود (مثلاً کوتاه کردن برچسبها یا انداختن برخی از آنها). نوع: شماره پیش فرض: مقدار hAxis.textStyle.fontSize |
hAxis.showTextEvery | چند برچسب محور افقی برای نشان دادن، که در آن 1 به معنای نشان دادن هر برچسب، 2 به معنای نشان دادن هر برچسب دیگر و غیره است. پیشفرض این است که سعی کنید تا حد ممکن برچسبها را بدون همپوشانی نشان دهید. نوع: شماره پیش فرض: خودکار |
hAxis.maxValue | حداکثر مقدار محور افقی را به مقدار مشخص شده منتقل می کند. این در اکثر نمودارها به سمت راست خواهد بود. اگر این مقدار روی مقداری کوچکتر از حداکثر مقدار x داده تنظیم شود، نادیده گرفته می شود. این گزینه فقط برای یک محور نوع: شماره پیش فرض: خودکار |
hAxis.minValue | مقدار min محور افقی را به مقدار مشخص شده منتقل می کند. این در اکثر نمودارها به سمت چپ خواهد بود. اگر این مقدار روی مقداری بیشتر از حداقل مقدار x داده تنظیم شود نادیده گرفته می شود. این گزینه فقط برای یک محور نوع: شماره پیش فرض: خودکار |
hAxis.viewWindowMode | نحوه مقیاس بندی محور افقی برای نمایش مقادیر در ناحیه نمودار را مشخص می کند. مقادیر رشته زیر پشتیبانی می شوند:
این گزینه فقط برای یک محور نوع: رشته پیش فرض: معادل «زیبا» است، اما در صورت استفاده از haxis.viewWindow.min و haxis.viewWindow.max اولویت دارند. |
hAxis.viewWindow | محدوده برش محور افقی را مشخص می کند. نوع: شی پیش فرض: null |
hAxis.viewWindow.max |
وقتی نوع: شماره پیش فرض: خودکار |
hAxis.viewWindow.min |
وقتی نوع: شماره پیش فرض: خودکار |
ارتفاع | ارتفاع نمودار، بر حسب پیکسل. نوع: شماره پیش فرض: ارتفاع عنصر حاوی |
interpolateNulls | اینکه ارزش امتیازهای از دست رفته را حدس بزنید. اگر درست باشد، ارزش هر داده از دست رفته را بر اساس نقاط همسایه حدس می زند. اگر نادرست باشد، در نقطه ناشناخته یک شکست در خط ایجاد می کند. این توسط نمودارهای منطقه با گزینه نوع: بولی پیش فرض: نادرست |
انباشته شده است | اگر روی true تنظیم شود، عناصر را برای همه سری ها در هر مقدار دامنه پشته می کند. توجه: در نمودارهای Column ، Area و StepppedArea ، نمودارهای Google ترتیب آیتمهای افسانهای را برعکس میکند تا با چیدمان عناصر سری مطابقت بیشتری داشته باشد (مثلاً سری 0 پایینترین مورد افسانهای خواهد بود). این در مورد نمودار میله ای صدق نمی کند . گزینه گزینه های
برای انباشته شدن 100%، مقدار محاسبه شده برای هر عنصر پس از مقدار واقعی آن در راهنمای ابزار ظاهر می شود. محور هدف بهطور پیشفرض مقادیر را بر اساس مقیاس نسبی 0-1 به عنوان کسرهای 1 برای انباشته شدن 100% فقط از مقادیر داده نوع نوع: boolean/string پیش فرض: نادرست |
افسانه | یک شی با اعضا برای پیکربندی جنبه های مختلف افسانه. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Type: object Default: null |
legend.alignment | Alignment of the legend. Can be one of the following:
Start, center, and end are relative to the style -- vertical or horizontal -- of the legend. For example, in a 'right' legend, 'start' and 'end' are at the top and bottom, respectively; for a 'top' legend, 'start' and 'end' would be at the left and right of the area, respectively. The default value depends on the legend's position. For 'bottom' legends, the default is 'center'; other legends default to 'start'. Type: string Default: automatic |
legend.maxLines | Maximum number of lines in the legend. Set this to a number greater than one to add lines to your legend. Note: The exact logic used to determine the actual number of lines rendered is still in flux. This option currently works only when legend.position is 'top'. Type: number Default: 1 |
legend.pageIndex | Initial selected zero-based page index of the legend. Type: number Default: 0 |
legend.position | Position of the legend. Can be one of the following:
Type: string Default: 'right' |
legend.textStyle | An object that specifies the legend text style. The object has this format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } The Type: object Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
lineDashStyle | The on-and-off pattern for dashed lines. For instance, Type: Array of numbers Default: null |
lineWidth | Data line width in pixels. Use zero to hide all lines and show only the points. You can override values for individual series using the Type: number Default: 2 |
orientation | The orientation of the chart. When set to Type: string Default: 'horizontal' |
pointShape | The shape of individual data elements: 'circle', 'triangle', 'square', 'diamond', 'star', or 'polygon'. See the points documentation for examples. Type: string Default: 'circle' |
pointSize | Diameter of displayed points in pixels. Use zero to hide all points. You can override values for individual series using the Type: number Default: 0 |
pointsVisible | Determines whether points will be displayed. Set to This can also be overridden using the style role in the form of Type: boolean Default: true |
reverseCategories | If set to true, will draw series from right to left. The default is to draw left-to-right. This option is only supported for a Type: boolean Default: false |
selectionMode | When Type: string Default: 'single' |
series | An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used. Each object supports the following properties:
You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Type: Array of objects, or object with nested objects Default: {} |
theme | A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:
Type: string Default: null |
title | Text to display above the chart. Type: string Default: no title |
titlePosition | Where to place the chart title, compared to the chart area. Supported values:
Type: string Default: 'out' |
titleTextStyle | An object that specifies the title text style. The object has this format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } The Type: object Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
tooltip | An object with members to configure various tooltip elements. To specify properties of this object, you can use object literal notation, as shown here: {textStyle: {color: '#FF0000'}, showColorCode: true} Type: object Default: null |
tooltip.ignoreBounds | If set to Note: This only applies to HTML tooltips. If this is enabled with SVG tooltips, any overflow outside of the chart bounds will be cropped. See Customizing Tooltip Content for more details. Type: boolean Default: false |
tooltip.isHtml | If set to true, use HTML-rendered (rather than SVG-rendered) tooltips. See Customizing Tooltip Content for more details. Note: customization of the HTML tooltip content via the tooltip column data role is not supported by the Bubble Chart visualization. Type: boolean Default: false |
tooltip.showColorCode | If true, show colored squares next to the series information in the tooltip. The default is true when Type: boolean Default: automatic |
tooltip.textStyle | An object that specifies the tooltip text style. The object has this format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } The Type: object Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
tooltip.trigger | The user interaction that causes the tooltip to be displayed:
Type: string Default: 'focus' |
vAxes | Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a To specify a chart with multiple vertical axes, first define a new axis using { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } } This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] Type: Array of object, or object with child objects Default: null |
vAxis | An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Type: object Default: null |
vAxis.baseline | Type: number Default: automatic |
vAxis.baselineColor | Specifies the color of the baseline for the vertical axis. Can be any HTML color string, for example: Type: number Default: 'black' |
vAxis.direction | The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify Type: 1 or -1 Default: 1 |
vAxis.format | A format string for numeric axis labels. This is a subset of the ICU pattern set . For instance,
The actual formatting applied to the label is derived from the locale the API has been loaded with. For more details, see loading charts with a specific locale . In computing tick values and gridlines, several alternative combinations of all the relevant gridline options will be considered and alternatives will be rejected if the formatted tick labels would be duplicated or overlap. So you can specify Type: string Default: auto |
vAxis.gridlines | An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here: {color: '#333', minSpacing: 20} Type: object Default: null |
vAxis.gridlines.color | The color of the vertical gridlines inside the chart area. Specify a valid HTML color string. Type: string Default: '#CCC' |
vAxis.gridlines.count | The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for Type: number Default: -1 |
vAxis.gridlines.interval | An array of sizes (as data values, not pixels) between adjacent gridlines. This option is only for numeric axes at this time, but it is analogous to the Type: number between 1 and 10, not including 10. Default: computed |
vAxis.gridlines.minSpacing | The minimum screen space, in pixels, between hAxis major gridlines. The default for major gridlines is Type: number Default: computed |
vAxis.gridlines.multiple | All gridline and tick values must be a multiple of this option's value. Note that, unlike for intervals, powers of 10 times the multiple are not considered. So you can force ticks to be integers by specifying Type: number Default: 1 |
vAxis.gridlines.units | Overrides the default format for various aspects of date/datetime/timeofday data types when used with chart computed gridlines. Allows formatting for years, months, days, hours, minutes, seconds, and milliseconds. General format is: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } Additional information can be found in Dates and Times . Type: object Default: null |
vAxis.minorGridlines | An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option. Type: object Default: null |
vAxis.minorGridlines.color | The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string. Type: string Default: A blend of the gridline and background colors |
vAxis.minorGridlines.interval | The minorGridlines.interval option is like the major gridlines interval option, but the interval that is chosen will always be an even divisor of the major gridline interval. The default interval for linear scales is Type: number Default: 1 |
vAxis.minorGridlines.minSpacing | The minimum required space, in pixels, between adjacent minor gridlines, and between minor and major gridlines. The default value is 1/2 the minSpacing of major gridlines for linear scales, and 1/5 the minSpacing for log scales. Type: number Default: computed |
vAxis.minorGridlines.multiple | Same as for major Type: number Default: 1 |
vAxis.minorGridlines.count | The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines depends on the interval between major gridlines (see vAxis.gridlines.interval) and the minimum required space (see vAxis.minorGridlines.minSpacing). Type: number Default: 1 |
vAxis.minorGridlines.units | Overrides the default format for various aspects of date/datetime/timeofday data types when used with chart computed minorGridlines. Allows formatting for years, months, days, hours, minutes, seconds, and milliseconds. General format is: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Additional information can be found in Dates and Times . Type: object Default: null |
vAxis.logScale | If true, makes the vertical axis a logarithmic scale. Note: All values must be positive. Type: boolean Default: false |
vAxis.scaleType |
This option is only supported for a Type: string Default: null |
vAxis.textPosition | Position of the vertical axis text, relative to the chart area. Supported values: 'out', 'in', 'none'. Type: string Default: 'out' |
vAxis.textStyle | An object that specifies the vertical axis text style. The object has this format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } The Type: object Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
vAxis.ticks | Replaces the automatically generated Y-axis ticks with the specified array. Each element of the array should be either a valid tick value (such as a number, date, datetime, or timeofday), or an object. If it's an object, it should have a The viewWindow will be automatically expanded to include the min and max ticks unless you specify a Examples:
Type: Array of elements Default: auto |
vAxis.title | Type: string Default: no title |
vAxis.titleTextStyle | An object that specifies the vertical axis title text style. The object has this format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } The Type: object Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
vAxis.maxValue | Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. Type: number Default: automatic |
vAxis.minValue | Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. Type: number Default: null |
vAxis.viewWindowMode | Specifies how to scale the vertical axis to render the values within the chart area. The following string values are supported:
Type: string Default: Equivalent to 'pretty', but vaxis.viewWindow.min and vaxis.viewWindow.max take precedence if used. |
vAxis.viewWindow | Specifies the cropping range of the vertical axis. Type: object Default: null |
vAxis.viewWindow.max | The maximum vertical data value to render. Ignored when Type: number Default: auto |
vAxis.viewWindow.min | The minimum vertical data value to render. Ignored when Type: number Default: auto |
width | Width of the chart, in pixels. Type: number Default: width of the containing element |
Methods
Method | |
---|---|
draw(data, options) | Draws the chart. The chart accepts further method calls only after the Return Type: none |
getAction(actionID) | Returns the tooltip action object with the requested Return Type: object |
getBoundingBox(id) | Returns an object containing the left, top, width, and height of chart element
Values are relative to the container of the chart. Call this after the chart is drawn. Return Type: object |
getChartAreaBoundingBox() | Returns an object containing the left, top, width, and height of the chart content (ie, excluding labels and legend):
Values are relative to the container of the chart. Call this after the chart is drawn. Return Type: object |
getChartLayoutInterface() | Returns an object containing information about the onscreen placement of the chart and its elements. The following methods can be called on the returned object:
Call this after the chart is drawn. Return Type: object |
getHAxisValue(xPosition, optional_axis_index) | Returns the horizontal data value at Example: Call this after the chart is drawn. Return Type: number |
getImageURI() | Returns the chart serialized as an image URI. Call this after the chart is drawn. See Printing PNG Charts . Return Type: string |
getSelection() | Returns an array of the selected chart entities. Selectable entities are points, annotations, legend entries and categories. A point or annotation corresponds to a cell in the data table, a legend entry to a column (row index is null), and a category to a row (column index is null). For this chart, only one entity can be selected at any given moment. Return Type: Array of selection elements |
getVAxisValue(yPosition, optional_axis_index) | Returns the vertical data value at Example: Call this after the chart is drawn. Return Type: number |
getXLocation(dataValue, optional_axis_index) | Returns the pixel x-coordinate of Example: Call this after the chart is drawn. Return Type: number |
getYLocation(dataValue, optional_axis_index) | Returns the pixel y-coordinate of Example: Call this after the chart is drawn. Return Type: number |
removeAction(actionID) | Removes the tooltip action with the requested Return Type: none |
setAction(action) | Sets a tooltip action to be executed when the user clicks on the action text. The Any and all tooltip actions should be set prior to calling the chart's Return Type: none |
setSelection() | Selects the specified chart entities. Cancels any previous selection. Selectable entities are points, annotations, legend entries and categories. A point or annotation corresponds to a cell in the data table, a legend entry to a column (row index is null), and a category to a row (column index is null). For this chart, only one entity can be selected at a time. Return Type: none |
clearChart() | Clears the chart, and releases all of its allocated resources. Return Type: none |
Events
For more information on how to use these events, see Basic Interactivity , Handling Events , and Firing Events .
Name | |
---|---|
animationfinish | Fired when transition animation is complete. Properties: none |
click | Fired when the user clicks inside the chart. Can be used to identify when the title, data elements, legend entries, axes, gridlines, or labels are clicked. Properties: targetID |
error | Fired when an error occurs when attempting to render the chart. Properties: id, message |
legendpagination | Fired when the user clicks legend pagination arrows. Passes back the current legend zero-based page index and the total number of pages. Properties: currentPageIndex, totalPages |
onmouseover | Fired when the user mouses over a visual entity. Passes back the row and column indices of the corresponding data table element. Properties: row, column |
onmouseout | Fired when the user mouses away from a visual entity. Passes back the row and column indices of the corresponding data table element. Properties: row, column |
ready | The chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the Properties: none |
select | Fired when the user clicks a visual entity. To learn what has been selected, call Properties: none |
Data Policy
All code and data are processed and rendered in the browser. No data is sent to any server.