بررسی اجمالی
هیستوگرام نموداری است که داده های عددی را در سطل ها گروه بندی می کند و سطل ها را به عنوان ستون های قطعه بندی شده نمایش می دهد. آنها برای نشان دادن توزیع یک مجموعه داده استفاده می شوند: تعداد دفعاتی که مقادیر در محدوده ها قرار می گیرند.
نمودارهای گوگل به طور خودکار تعداد سطل ها را برای شما انتخاب می کند. همه سطل ها دارای عرض مساوی و دارای ارتفاعی متناسب با تعداد نقاط داده در سطل هستند. از جهات دیگر، هیستوگرام ها مشابه نمودارهای ستونی هستند.
مثال
در اینجا هیستوگرام طول دایناسورها آمده است:
هیستوگرام به ما می گوید که رایج ترین سطل زباله کمتر از 10 متر است و تنها یک دایناسور بیش از 40 متر وجود دارد. ما میتوانیم روی نوار شناور شویم تا متوجه شویم که این سیزموزاروس است (که ممکن است فقط یک Diplodocus بسیار بزرگ باشد؛ دیرینهشناسان مطمئن نیستند ).
کد تولید این هیستوگرام در زیر نشان داده شده است. پس از تعریف داده ها (در اینجا با google.visualization.arrayToDataTable
)، نمودار با فراخوانی به google.visualization.Histogram
شده و با روش draw
می شود.
<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([ ['Dinosaur', 'Length'], ['Acrocanthosaurus (top-spined lizard)', 12.2], ['Albertosaurus (Alberta lizard)', 9.1], ['Allosaurus (other lizard)', 12.2], ['Apatosaurus (deceptive lizard)', 22.9], ['Archaeopteryx (ancient wing)', 0.9], ['Argentinosaurus (Argentina lizard)', 36.6], ['Baryonyx (heavy claws)', 9.1], ['Brachiosaurus (arm lizard)', 30.5], ['Ceratosaurus (horned lizard)', 6.1], ['Coelophysis (hollow form)', 2.7], ['Compsognathus (elegant jaw)', 0.9], ['Deinonychus (terrible claw)', 2.7], ['Diplodocus (double beam)', 27.1], ['Dromicelomimus (emu mimic)', 3.4], ['Gallimimus (fowl mimic)', 5.5], ['Mamenchisaurus (Mamenchi lizard)', 21.0], ['Megalosaurus (big lizard)', 7.9], ['Microvenator (small hunter)', 1.2], ['Ornithomimus (bird mimic)', 4.6], ['Oviraptor (egg robber)', 1.5], ['Plateosaurus (flat lizard)', 7.9], ['Sauronithoides (narrow-clawed lizard)', 2.0], ['Seismosaurus (tremor lizard)', 45.7], ['Spinosaurus (spiny lizard)', 12.2], ['Supersaurus (super lizard)', 30.5], ['Tyrannosaurus (tyrant lizard)', 15.2], ['Ultrasaurus (ultra lizard)', 30.5], ['Velociraptor (swift robber)', 1.8]]); var options = { title: 'Lengths of dinosaurs, in meters', legend: { position: 'none' }, }; var chart = new google.visualization.Histogram(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
برچسب ها (در اینجا، نام دایناسورها) را می توان حذف کرد، در این صورت راهنمای ابزار فقط مقدار عددی را نشان می دهد.
کنترل رنگ ها
در اینجا هیستوگرام جمعیت ملی آمده است:
بیش از دویست کشور با جمعیت کمتر از صد میلیون نفر وجود دارد و پس از آن دچار انحطاط شدیدی شده است.
این هیستوگرام از گزینه colors
برای ترسیم داده ها به رنگ سبز استفاده می کند:
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['green'], };
مانند تمام نمودارهای گوگل، رنگ ها را می توان به عنوان نام انگلیسی یا مقادیر هگزا مشخص کرد.
کنترل سطل ها
به طور پیش فرض، نمودارهای گوگل با استفاده از یک الگوریتم شناخته شده برای هیستوگرام، اندازه سطل را به طور خودکار انتخاب می کند. با این حال، گاهی اوقات شما می خواهید آن را نادیده بگیرید، و نمودار بالا یک مثال است. با تعداد زیادی از کشورها در سطل اول، بررسی آنها در کشورهای دیگر دشوار است.
برای موقعیتهایی مانند این، نمودار هیستوگرام دو گزینه را ارائه میکند: histogram.bucketSize
، که الگوریتم را لغو میکند و اندازه سطل را کد سخت میکند. و histogram.lastBucketPercentile
. گزینه دوم نیاز به توضیح بیشتری دارد: محاسبه اندازههای سطل را تغییر میدهد تا مقادیری که بالاتر یا کمتر از مقادیر باقی مانده هستند را با درصدی که شما مشخص میکنید نادیده بگیرد. مقادیر همچنان در هیستوگرام گنجانده شده اند، اما بر نحوه سطل شدن آنها تأثیری ندارند. این زمانی مفید است که شما نمیخواهید افراد دورافتاده در سطل خود فرود آیند. در عوض با اولین یا آخرین سطل گروه بندی می شوند.
در نمودار بالا، هنگام محاسبه اندازه سطل، پنج درصد بالا و پنج درصد پایین را نادیده گرفتیم. مقادیر هنوز نمودار هستند. تنها چیزی که تغییر کرده اندازه سطل است، اما هیستوگرام قابل خواندن تری را ایجاد می کند.
این مثال همچنین نشان میدهد که چگونه میتوانیم مقیاس محور عمودی را برای استفاده از مقیاس «Mirror log» تغییر دهیم، که به هنگام ترسیم دادههایی که دارای دم بلند مقادیر کوچک هستند نیز کمک میکند.
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['#e7711c'], histogram: { lastBucketPercentile: 5 }, vAxis: { scaleType: 'mirrorLog' } };
همانطور که می بینید، حذف پنج درصد بالا و پایین از محاسبه منجر به اندازه سطل 10,000,000 به جای 100,000,000 که در غیر این صورت می بود، شد. اگر می دانستید که اندازه سطل 10,000,000 همان چیزی است که می خواهید، می توانستید از histogram.bucketSize
برای این کار استفاده کنید:
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['#e7711c'], histogram: { bucketSize: 10000000 } };
در مثال زیر، نحوه گسترش دامنه سطل ها و نمایش تعداد زیادی سطل بدون فاصله بین آنها را نشان می دهیم. از گزینه maxNumBuckets
می توان برای افزایش تعداد پیش فرض سطل ها استفاده کرد. گزینه های histogram.minValue
و histogram.maxValue
محدوده سطل ها را گسترش می دهند، اما توجه داشته باشید که اگر داده های خارج از این محدوده وجود داشته باشد، این گزینه ها محدوده را کوچک نمی کنند.
این مثال همچنین نشان میدهد که میتوانید تیکهایی را برای نمایش هر یک از سطلها با استفاده از گزینه ticks
صریح برای hAxis
کنید. این روی خود سطل ها تأثیر نمی گذارد، بلکه فقط بر نحوه نمایش تیک ها تأثیر می گذارد.
همچنین توجه داشته باشید که chartArea.width
را به گونهای مشخص میکنیم که تعداد سطلها بدون آرتیفکتهای بصری با دقت بیشتری مطابقت داشته باشد. در اینجا گزینه های این مثال وجود دارد.
var options = { title: 'Approximating Normal Distribution', legend: { position: 'none' }, colors: ['#4285F4'], chartArea: { width: 405 }, hAxis: { ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1] }, bar: { gap: 0 }, histogram: { bucketSize: 0.01, maxNumBuckets: 400, minValue: -1, maxValue: 1 } };
چند سری
در اینجا یک هیستوگرام از بارهای ذرات زیراتمی، طبق مدل استاندارد آمده است:
نمودار فوق دارای یک سری است که تمام ذرات را در بر می گیرد. ذرات زیر اتمی را می توان به چهار گروه کوارک، لپتون و بوزون تقسیم کرد. بیایید هر کدام را به عنوان سریال خاص خود در نظر بگیریم:
در این نمودار، ما از یک سری (و بنابراین رنگ) متفاوت برای هر یک از چهار نوع ذره زیر اتمی استفاده می کنیم. ما صریحاً interpolateNulls
را روی false
قرار میدهیم تا اطمینان حاصل کنیم که مقادیر null (که به دلیل طول نابرابر سریها لازم است) ترسیم نمیشوند. همچنین legend.maxLines
را برای اضافه کردن یک خط دیگر به legend تنظیم کردیم:
var data = google.visualization.arrayToDataTable([ ['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'], [2/3, -1, 0, 0], [2/3, -1, 0, null], [2/3, -1, 0, null], [-1/3, 0, 1, null], [-1/3, 0, -1, null], [-1/3, 0, null, null], [-1/3, 0, null, null] ]); var options = { title: 'Charges of subatomic particles', legend: { position: 'top', maxLines: 2 }, colors: ['#5C3292', '#1A8763', '#871B47', '#999999'], interpolateNulls: false, };
بارگذاری
نام بسته google.charts.load
"corechart"
است.
google.charts.load("current", {packages: ["corechart"]});
نام کلاس تجسم google.visualization.Histogram
است:
var visualization = new google.visualization.Histogram(container);
فرمت داده
دو راه برای پر کردن جدول هیستوگرام وجود دارد. وقتی فقط یک سریال وجود دارد:
var data = google.visualization.arrayToDataTable([ ['Name', 'Number'], ['Name 1', number1], ['Name 2', number2], ['Name 3', number3], ... ]);
و زمانی که چندین سری وجود دارد:
var data = google.visualization.arrayToDataTable([ ['Series Name 1', 'Series Name 2', 'Series Name 3', ...], [series1_number1, series2_number1, series3_number1, ...], [series1_number2, series2_number2, series3_number2, ...], [series1_number3, series2_number3, series3_number3, ...], ... ]);
در حال حاضر هیچ نقش ستون اختیاری برای هیستوگرام پشتیبانی نمی شود.
گزینه های پیکربندی
نام | |
---|---|
انیمیشن.مدت | مدت زمان انیمیشن، بر حسب میلی ثانیه. برای جزئیات، به مستندات انیمیشن مراجعه کنید. نوع: شماره پیش فرض: 0 |
انیمیشن.تسهیل | تابع easing برای انیمیشن اعمال می شود. گزینه های ذیل در دسترس هستند:
نوع: رشته پیش فرض: "خطی" |
انیمیشن.استارت آپ | تعیین می کند که آیا نمودار در قرعه کشی اولیه متحرک می شود یا خیر. اگر نوع: بولی پیش فرض نادرست |
axisTitlesPosition | محل قرار دادن عناوین محورها، در مقایسه با منطقه نمودار. مقادیر پشتیبانی شده:
نوع: رشته پیش فرض: "خارج" |
رنگ پس زمینه | رنگ پس زمینه برای ناحیه اصلی نمودار. می تواند یک رشته رنگی ساده HTML باشد، برای مثال: نوع: رشته یا شی پیش فرض: "سفید" |
backgroundColor.stroke | رنگ حاشیه نمودار، به عنوان یک رشته رنگ HTML. نوع: رشته پیشفرض: '#666' |
backgroundColor.strokeWidth | عرض حاشیه، بر حسب پیکسل. نوع: شماره پیش فرض: 0 |
backgroundColor.fill | رنگ پر کردن نمودار، به عنوان یک رشته رنگ HTML. نوع: رشته پیش فرض: "سفید" |
bar.groupWidth | عرض گروهی از نوارها که در هر یک از این قالبها مشخص شده است:
نوع: عدد یا رشته پیش فرض: نسبت طلایی ، تقریباً '61.8٪'. |
نمودار مساحت | یک شی با اعضا برای پیکربندی مکان و اندازه ناحیه نمودار (جایی که خود نمودار رسم شده است، به استثنای محورها و افسانه ها). دو فرمت پشتیبانی می شود: یک عدد یا یک عدد به دنبال ٪. یک عدد ساده یک مقدار بر حسب پیکسل است. یک عدد به دنبال آن % یک درصد است. مثال: نوع: شی پیش فرض: null |
chartArea.backgroundColor | رنگ پس زمینه ناحیه نمودار هنگامی که از یک رشته استفاده می شود، می تواند یک رشته هگزا (به عنوان مثال، '#fdc') یا یک نام رنگ انگلیسی باشد. هنگامی که یک شی استفاده می شود، ویژگی های زیر را می توان ارائه داد:
نوع: رشته یا شی پیش فرض: "سفید" |
نمودار Area.left | چقدر می توان نمودار را از حاشیه سمت چپ رسم کرد. نوع: عدد یا رشته پیش فرض: خودکار |
نمودار Area.top | چقدر می توان نمودار را از حاشیه بالایی رسم کرد. نوع: عدد یا رشته پیش فرض: خودکار |
نمودار مساحت.عرض | عرض منطقه نمودار نوع: عدد یا رشته پیش فرض: خودکار |
نمودار مساحت.ارتفاع | ارتفاع منطقه نمودار نوع: عدد یا رشته پیش فرض: خودکار |
رنگ ها | رنگ هایی که برای عناصر نمودار استفاده می شود. آرایه ای از رشته ها، که در آن هر عنصر یک رشته رنگی HTML است، به عنوان مثال: نوع: آرایه از رشته ها پیش فرض: رنگ های پیش فرض |
شفافیت داده | شفافیت نقاط داده، با 1.0 کاملاً غیر شفاف و 0.0 کاملاً شفاف. در نمودارهای پراکندگی، هیستوگرام، میله ای و ستونی، این به داده های قابل مشاهده اشاره دارد: نقاط در نمودار پراکندگی و مستطیل ها در بقیه. در نمودارهایی که انتخاب دادهها یک نقطه ایجاد میکند، مانند نمودارهای خط و ناحیه، این به دایرههایی اطلاق میشود که هنگام شناور یا انتخاب ظاهر میشوند. نمودار ترکیبی هر دو رفتار را نشان می دهد و این گزینه روی نمودارهای دیگر تأثیری ندارد. (برای تغییر کدورت خط روند، کدورت خط روند را ببینید.) نوع: شماره پیش فرض: 1.0 |
فعال کردن تعامل | آیا نمودار رویدادهای مبتنی بر کاربر را نشان می دهد یا به تعامل کاربر واکنش نشان می دهد. اگر نادرست باشد، نمودار «انتخاب» یا سایر رویدادهای مبتنی بر تعامل را پرتاب نمیکند (اما رویدادهای آماده یا خطا را پرتاب میکند)، و متن شناور را نمایش نمیدهد یا بسته به ورودی کاربر تغییر نمیکند. نوع: بولی پیش فرض: درست است |
تمرکز هدف | نوع موجودی که فوکوس را روی شناور ماوس دریافت می کند. همچنین تأثیر می گذارد که کدام موجودیت با کلیک ماوس انتخاب می شود و کدام عنصر جدول داده با رویدادها مرتبط است. می تواند یکی از موارد زیر باشد:
در focusTarget 'category'، راهنمای ابزار تمام مقادیر دسته را نمایش می دهد. این ممکن است برای مقایسه مقادیر سری های مختلف مفید باشد. نوع: رشته پیش فرض: "مقصد" |
اندازه فونت | اندازه فونت پیشفرض، بر حسب پیکسل، تمام متنهای نمودار. میتوانید با استفاده از ویژگیهای عناصر نمودار خاص، این مورد را لغو کنید. نوع: شماره پیش فرض: خودکار |
نام قلم | صورت فونت پیشفرض برای تمام متنهای نمودار. میتوانید با استفاده از ویژگیهای عناصر نمودار خاص، این مورد را لغو کنید. نوع: رشته پیش فرض: "Arial" |
forceIFrame | نمودار را درون یک قاب درون خطی رسم می کند. (توجه داشته باشید که در IE8، این گزینه نادیده گرفته می شود؛ همه نمودارهای IE8 در i-frame ترسیم می شوند.) نوع: بولی پیش فرض: نادرست |
hAxis | یک شی با اعضایی برای پیکربندی عناصر مختلف محور افقی. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } نوع: شی پیش فرض: null |
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.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.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.viewWindowMode | نحوه مقیاس بندی محور افقی برای نمایش مقادیر در ناحیه نمودار را مشخص می کند. مقادیر رشته زیر پشتیبانی می شوند:
نوع: رشته پیش فرض: معادل «زیبا» است، اما در صورت استفاده از haxis.viewWindow.min و haxis.viewWindow.max اولویت دارند. |
hAxis.viewWindow | محدوده برش محور افقی را مشخص می کند. نوع: شی پیش فرض: null |
hAxis.viewWindow.max | شاخص ردیف مبتنی بر صفر که در آن پنجره برش به پایان می رسد. نقاط داده در این شاخص و بالاتر حذف خواهند شد. در ارتباط با وقتی نوع: شماره پیش فرض: خودکار |
hAxis.viewWindow.min | شاخص ردیف مبتنی بر صفر که در آن پنجره برش شروع می شود. نقاط داده در شاخص های پایین تر از این برش داده می شوند. در ارتباط با وقتی نوع: شماره پیش فرض: خودکار |
histogram.bucketSize | اندازه هر نوار هیستوگرام را هاردکد کنید، به جای اینکه اجازه دهید به صورت الگوریتمی تعیین شود. نوع: شماره پیش فرض: خودکار |
histogram.hideBucketItems | تقسیمات نازک بین بلوک های هیستوگرام را حذف کنید و آن را به یک سری میله های جامد تبدیل کنید. نوع: بولی پیش فرض: نادرست |
histogram.lastBucketPercentile | هنگام محاسبه اندازه سطل هیستوگرام، درصد نوع: شماره پیش فرض: 0 |
histogram.minValue | دامنه سطل ها را برای گنجاندن این مقدار گسترش دهید. نوع: شماره پیشفرض: خودکار - از حداقل داده استفاده کنید |
histogram.maxValue | دامنه سطل ها را برای گنجاندن این مقدار گسترش دهید. نوع: شماره پیشفرض: خودکار - حداکثر استفاده از داده |
histogram.numBucketsRule | نحوه محاسبه تعداد پیش فرض سطل ها مقادیر ممکن عبارتند از:
نوع: رشته پیش فرض: 'sqrt' |
ارتفاع | ارتفاع نمودار، بر حسب پیکسل. نوع: شماره پیش فرض: ارتفاع عنصر حاوی |
interpolateNulls | اینکه ارزش امتیازهای از دست رفته را حدس بزنید. اگر درست باشد، ارزش هر داده از دست رفته را بر اساس نقاط همسایه حدس می زند. اگر نادرست باشد، در نقطه ناشناخته یک شکست در خط ایجاد می کند. این توسط نمودارهای منطقه با گزینه نوع: بولی پیش فرض: نادرست |
انباشته شده است | اگر روی true تنظیم شود، عناصر را برای همه سری ها در هر مقدار دامنه پشته می کند. توجه: در نمودارهای Column ، Area و StepppedArea ، نمودارهای Google ترتیب آیتمهای افسانهای را برعکس میکند تا با چیدمان عناصر سری مطابقت بیشتری داشته باشد (مثلاً سری 0 پایینترین مورد افسانهای خواهد بود). این در مورد نمودار میله ای صدق نمی کند . گزینه گزینه های
برای انباشته شدن 100%، مقدار محاسبه شده برای هر عنصر پس از مقدار واقعی آن در راهنمای ابزار ظاهر می شود. محور هدف بهطور پیشفرض مقادیر را بر اساس مقیاس نسبی 0-1 به عنوان کسرهای 1 برای انباشته شدن 100% فقط از مقادیر داده نوع نوع: boolean/string پیش فرض: نادرست |
افسانه | یک شی با اعضا برای پیکربندی جنبه های مختلف افسانه. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} نوع: شی پیش فرض: null |
افسانه.تراز | تراز افسانه. می تواند یکی از موارد زیر باشد:
شروع، مرکز و پایان نسبت به سبک - عمودی یا افقی - افسانه است. برای مثال، در افسانه «راست»، «شروع» و «پایان» به ترتیب در بالا و پایین هستند. برای افسانه "بالا"، "شروع" و "پایان" به ترتیب در سمت چپ و راست منطقه قرار می گیرند. مقدار پیش فرض به موقعیت افسانه بستگی دارد. برای افسانههای «پایین»، پیشفرض «مرکز» است. افسانه های دیگر به طور پیش فرض "شروع" هستند. نوع: رشته پیش فرض: خودکار |
legend.maxLines | حداکثر تعداد خطوط در افسانه. این را روی عددی بزرگتر از یک تنظیم کنید تا خطوطی به افسانه خود اضافه کنید. توجه: منطق دقیق مورد استفاده برای تعیین تعداد واقعی خطوط ارائه شده هنوز در جریان است. این گزینه در حال حاضر فقط زمانی کار می کند که legend.position 'بالا' باشد. نوع: شماره پیش فرض: 1 |
legend.pageIndex | فهرست اولیه صفحه بر اساس صفر انتخاب شده از افسانه. نوع: شماره پیش فرض: 0 |
افسانه. موقعیت | موقعیت افسانه. می تواند یکی از موارد زیر باشد:
نوع: رشته پیش فرض: "درست" |
legend.textStyle | یک شی که سبک متن افسانه را مشخص می کند. شیء دارای این قالب است: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } نوع: شی پیشفرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
گرایش | جهت گیری نمودار. وقتی روی نوع: رشته پیش فرض: "افقی" |
معکوس دسته ها | اگر روی true تنظیم شود، سری ها را از راست به چپ ترسیم می کند. پیش فرض این است که از چپ به راست بکشید. نوع: بولی پیش فرض: نادرست |
سلسله | آرایه ای از اشیاء که هر کدام فرمت سری مربوطه را در نمودار توصیف می کنند. برای استفاده از مقادیر پیش فرض برای یک سری، یک شی خالی {} را مشخص کنید. اگر یک سری یا یک مقدار مشخص نشده باشد، از مقدار جهانی استفاده می شود. هر شی از ویژگی های زیر پشتیبانی می کند:
میتوانید آرایهای از اشیاء را مشخص کنید که هر کدام به ترتیب دادهشده برای سری اعمال میشوند، یا میتوانید شیای را مشخص کنید که در آن هر فرزند یک کلید عددی داشته باشد که نشان میدهد برای کدام سری اعمال میشود. به عنوان مثال، دو اعلان زیر یکسان هستند و سری اول را سیاه و غایب از افسانه، و چهارم را قرمز و غایب از افسانه اعلام میکنند: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } نوع: آرایه ای از اشیاء یا شی با اشیاء تودرتو پیش فرض: {} |
موضوع | تم مجموعه ای از مقادیر گزینه از پیش تعریف شده است که برای دستیابی به یک رفتار نمودار یا جلوه بصری خاص با هم کار می کنند. در حال حاضر فقط یک موضوع موجود است:
نوع: رشته پیش فرض: null |
عنوان | متن برای نمایش در بالای نمودار. نوع: رشته پیش فرض: بدون عنوان |
محل عنوان | محل قرار دادن عنوان نمودار، در مقایسه با منطقه نمودار. مقادیر پشتیبانی شده:
نوع: رشته پیش فرض: "خارج" |
titleTextStyle | یک شی که سبک متن عنوان را مشخص می کند. شیء دارای این قالب است: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } نوع: شی پیشفرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
راهنمای ابزار | یک شی با اعضا برای پیکربندی عناصر مختلف راهنمای ابزار. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: {textStyle: {color: '#FF0000'}, showColorCode: true} نوع: شی پیش فرض: null |
tooltip.isHtml | اگر روی true تنظیم شده باشد، از نکات ابزار رندر شده HTML (به جای SVG) استفاده کنید. برای جزئیات بیشتر به سفارشی کردن محتوای راهنمای ابزار مراجعه کنید. توجه: سفارشیسازی محتوای راهنمای ابزار HTML از طریق نقش داده ستون راهنمای ابزار توسط تجسم نمودار حباب پشتیبانی نمیشود . نوع: بولی پیش فرض: نادرست |
tooltip.showColorCode | اگر درست است، مربع های رنگی را در کنار اطلاعات سری در راهنمای ابزار نشان دهید. پیشفرض زمانی درست است که نوع: بولی پیش فرض: خودکار |
tooltip.textStyle | یک شی که سبک متن راهنمای ابزار را مشخص می کند. شیء دارای این قالب است: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } نوع: شی پیشفرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
tooltip.trigger | تعامل کاربر که باعث می شود راهنمای ابزار نمایش داده شود:
نوع: رشته پیش فرض: "تمرکز" |
vAxes | اگر نمودار دارای چندین محور عمودی باشد، ویژگیها را برای محورهای عمودی جداگانه مشخص میکند. هر شی فرزند یک شی برای تعیین نموداری با چندین محور عمودی، ابتدا با استفاده از { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } } این ویژگی می تواند یک شی یا یک آرایه باشد: شی مجموعه ای از اشیاء است که هر کدام دارای یک برچسب عددی است که محوری را که تعریف می کند مشخص می کند - این قالبی است که در بالا نشان داده شده است. آرایه آرایه ای از اشیا است، یکی در هر محور. به عنوان مثال، نماد آرایه زیر با شی vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] نوع: آرایه شی یا شی با اشیاء فرزند پیش فرض: null |
vAxis | یک شی با اعضایی برای پیکربندی عناصر مختلف محور عمودی. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} نوع: شی پیش فرض: null |
vAxis.baseline | ویژگی نوع: شماره پیش فرض: خودکار |
vAxis.baselineColor | رنگ خط مبنا را برای محور عمودی مشخص می کند. می تواند هر رشته رنگی HTML باشد، به عنوان مثال: نوع: شماره پیش فرض: "سیاه" |
vAxis.direction | جهتی که در آن مقادیر در امتداد محور عمودی رشد می کنند. به طور پیش فرض، مقادیر پایین در پایین نمودار قرار دارند. برای معکوس کردن ترتیب مقادیر، نوع: 1 یا -1 پیش فرض: 1 |
vAxis.format | یک رشته قالب برای برچسب های محورهای عددی. این زیر مجموعه ای از الگوی ICU است . برای مثال،
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.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.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.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 |
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 |
عرض | عرض نمودار، بر حسب پیکسل. Type: number Default: width of the containing element |
مواد و روش ها
روش | |
---|---|
draw(data, options) | نمودار را رسم می کند. 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 bars, legend entries and categories. 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 bars, legend entries and categories. 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 |
مناسبت ها
For more information on how to use these events, see Basic Interactivity , Handling Events , and Firing Events .
نام | |
---|---|
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. A bar correlates 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). 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. A bar correlates 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). 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 |
سیاست داده
All code and data are processed and rendered in the browser. No data is sent to any server.