بررسی اجمالی
نمودار شمعدانی تعاملی.
نمودار کندل استیک برای نشان دادن مقدار باز و بسته شدن در بالای واریانس کل استفاده می شود. نمودارهای کندل استیک اغلب برای نشان دادن رفتار ارزش سهام استفاده می شوند. در این نمودار مواردی که مقدار باز شدن آنها کمتر از مقدار بسته شدن (یک سود) است به عنوان جعبه های پر شده و مواردی که مقدار باز شدن آنها بیشتر از مقدار بسته شدن (یک ضرر) است به عنوان جعبه های توخالی ترسیم می شوند.
مثال
<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([ ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] // Treat first row as data as well. ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
نمودارهای آبشار
با مجموعه ای مناسب از گزینه ها، نمودارهای شمعدانی را می توان شبیه نمودارهای ساده آبشار ساخت.
در کد زیر، فتیله های بالا را با داشتن مقادیر یکسان در ستون اول و دوم و فتیله های پایین با داشتن مقادیر مشابه در ستون های سوم و چهارم حذف می کنیم. برای حذف فضای بین نوارها، bar.groupWidth
را روی '100%'
تنظیم کردیم.
<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([ ['Mon', 28, 28, 38, 38], ['Tue', 38, 38, 55, 55], ['Wed', 55, 55, 77, 77], ['Thu', 77, 77, 66, 66], ['Fri', 66, 66, 22, 22] // Treat the first row as data. ], true); var options = { legend: 'none', bar: { groupWidth: '100%' }, // Remove space between bars. candlestick: { fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green } }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
در حال حاضر هیچ راه آسانی برای برچسب زدن میله ها وجود ندارد. بهترین گزینه استفاده از همپوشانی است.
بارگذاری
نام بسته google.charts.load
"corechart"
است.
google.charts.load('current', {packages: ['corechart']});
نام کلاس تجسم google.visualization. CandlestickChart .
var visualization = new google.visualization.CandlestickChart(container);
فرمت داده
پنج یا چند ستون، که در آن ستون اول مقادیر محور X یا برچسبهای گروه را تعریف میکند و هر مضرب چهار ستون داده پس از آن، یک سری متفاوت را تعریف میکند.
- ستون 0: رشته ( گسسته ) به عنوان برچسب گروهی در محور X یا عدد، تاریخ، تاریخ، یا زمان روز ( پیوسته ) به عنوان یک مقدار در محور X استفاده می شود.
- Col 1: عددی که مقدار کم/حداقل این نشانگر را مشخص می کند. این پایه خط مرکزی شمع است. برچسب ستون به عنوان برچسب سری در افسانه استفاده می شود (در حالی که برچسب های ستون های دیگر نادیده گرفته می شوند).
- Col 2: عددی که مقدار باز / اولیه این نشانگر را مشخص می کند. این یک حاشیه عمودی شمع است. اگر کمتر از مقدار ستون 3 باشد، شمع پر می شود. در غیر این صورت توخالی خواهد بود.
- Col 3: عددی که مقدار بسته شدن/نهایی این نشانگر را مشخص می کند. این دومین حاشیه عمودی شمع است. اگر کمتر از مقدار ستون 2 باشد، شمع توخالی خواهد بود. در غیر این صورت پر می شود.
- Col 4: عددی که مقدار زیاد/حداکثر این نشانگر را مشخص می کند. این قسمت بالای خط مرکزی شمع است.
- Col 5 [ اختیاری ]: یک راهنمای ابزار یا ستون سبک برای کندل.
گزینه های پیکربندی
نام | |
---|---|
تجمع هدف | چگونه چندین انتخاب داده در راهنمای ابزار جمع می شوند:
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 برای انیمیشن اعمال می شود. گزینه های ذیل در دسترس هستند:
نوع: رشته پیش فرض: "خطی" |
انیمیشن.استارت آپ | تعیین می کند که آیا نمودار در قرعه کشی اولیه متحرک می شود یا خیر. اگر نوع: بولی پیش فرض نادرست |
axisTitlesPosition | محل قرار دادن عناوین محورها، در مقایسه با منطقه نمودار. مقادیر پشتیبانی شده:
نوع: رشته پیش فرض: "خارج" |
رنگ پس زمینه | رنگ پس زمینه برای ناحیه اصلی نمودار. می تواند یک رشته رنگی ساده HTML باشد، برای مثال: نوع: رشته یا شی پیش فرض: "سفید" |
backgroundColor.stroke | رنگ حاشیه نمودار، به عنوان یک رشته رنگ HTML. نوع: رشته پیشفرض: '#666' |
backgroundColor.strokeWidth | عرض حاشیه، بر حسب پیکسل. نوع: شماره پیش فرض: 0 |
backgroundColor.fill | رنگ پر کردن نمودار، به عنوان یک رشته رنگ HTML. نوع: رشته پیش فرض: "سفید" |
bar.groupWidth | عرض گروهی از شمعدان ها که در هر یک از این قالب ها مشخص شده است:
نوع: عدد یا رشته پیش فرض: نسبت طلایی ، تقریباً '61.8٪'. |
candlestick.hollowIsRising | اگر درست باشد، شمع های در حال افزایش توخالی و شمع های در حال سقوط جامد به نظر می رسند، در غیر این صورت، برعکس. نوع: بولی پیشفرض: نادرست (بعداً به درست تغییر میکند) |
candlestick.fallingColor.fill | رنگ پر کردن شمع های در حال سقوط، به عنوان یک رشته رنگ HTML. نوع: رشته پیشفرض: خودکار (بستگی به رنگ سری و hollowIsRising دارد) |
candlestick.fallingColor.stroke | رنگ ضربه ای شمع های در حال سقوط، به عنوان یک رشته رنگ HTML. نوع: رشته پیشفرض: خودکار (رنگ سری) |
candlestick.fallingColor.strokeWidth | عرض ضربه شمع های در حال سقوط، به عنوان یک رشته رنگی HTML. نوع: 2 پیش فرض: شماره |
candlestick.risingColor.fill | رنگ پر کردن شمع های در حال افزایش، به عنوان یک رشته رنگ HTML. نوع: رشته پیش فرض: خودکار (سفید یا رنگ سری، بسته به hollowIsRising) |
candlestick.risingColor.stroke | رنگ ضربه ای شمع های در حال افزایش، به عنوان یک رشته رنگ HTML. نوع: رشته پیشفرض: خودکار (رنگ سری یا سفید، بسته به hollowIsRising) |
candlestick.risingColor.strokeWidth | عرض سکته مغزی شمع های در حال افزایش، به عنوان یک رشته رنگ HTML. نوع: شماره پیش فرض: 2 |
نمودار مساحت | یک شی با اعضا برای پیکربندی مکان و اندازه ناحیه نمودار (جایی که خود نمودار رسم شده است، به استثنای محورها و افسانه ها). دو فرمت پشتیبانی می شود: یک عدد یا یک عدد به دنبال ٪. یک عدد ساده یک مقدار در پیکسل است. یک عدد به دنبال آن % یک درصد است. مثال: نوع: شی پیش فرض: null |
chartArea.backgroundColor | رنگ پس زمینه ناحیه نمودار هنگامی که از یک رشته استفاده می شود، می تواند یک رشته هگزا (به عنوان مثال، '#fdc') یا یک نام رنگ انگلیسی باشد. هنگامی که یک شی استفاده می شود، ویژگی های زیر را می توان ارائه داد:
نوع: رشته یا شی پیش فرض: "سفید" |
نمودار Area.left | چقدر می توان نمودار را از حاشیه سمت چپ رسم کرد. نوع: عدد یا رشته پیش فرض: خودکار |
نمودار Area.top | چقدر می توان نمودار را از حاشیه بالایی رسم کرد. نوع: عدد یا رشته پیش فرض: خودکار |
نمودار مساحت.عرض | عرض منطقه نمودار نوع: عدد یا رشته پیش فرض: خودکار |
نمودار مساحت.ارتفاع | ارتفاع منطقه نمودار نوع: عدد یا رشته پیش فرض: خودکار |
رنگ ها | رنگ هایی که برای عناصر نمودار استفاده می شود. آرایه ای از رشته ها، که در آن هر عنصر یک رشته رنگی HTML است، به عنوان مثال: نوع: آرایه از رشته ها پیش فرض: رنگ های پیش فرض |
فعال کردن تعامل | آیا نمودار رویدادهای مبتنی بر کاربر را نشان می دهد یا به تعامل کاربر واکنش نشان می دهد. اگر نادرست باشد، نمودار «انتخاب» یا سایر رویدادهای مبتنی بر تعامل را پرتاب نمیکند (اما رویدادهای آماده یا خطا را پرتاب میکند )، و متن شناور را نمایش نمیدهد یا بسته به ورودی کاربر تغییر نمیکند. نوع: بولی پیش فرض: درست است |
تمرکز هدف | نوع موجودی که فوکوس را روی شناور ماوس دریافت می کند. همچنین تأثیر می گذارد که کدام موجودیت با کلیک ماوس انتخاب می شود و کدام عنصر جدول داده با رویدادها مرتبط است. می تواند یکی از موارد زیر باشد:
در 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.interval | گزینه minorGridlines.interval مانند گزینه main gridlines interval است، اما بازه ای که انتخاب می شود همیشه مقسوم علیه فاصله خط اصلی خواهد بود. فاصله پیشفرض برای مقیاسهای خطی نوع: شماره پیش فرض: 1 |
hAxis.minorGridlines.minSpacing | حداقل فضای مورد نیاز، بر حسب پیکسل، بین خطوط شبکه کوچک مجاور، و بین خطوط شبکه فرعی و اصلی. مقدار پیش فرض 1/2 minSpacing خطوط شبکه اصلی برای مقیاس های خطی و 1/5 minSpacing برای مقیاس های log است. نوع: شماره پیش فرض: محاسبه شده |
hAxis.minorGridlines.multiple | مانند نوع: شماره پیش فرض: 1 |
hAxis.minorGridlines.count | گزینه نوع: شماره پیش فرض: 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 |
وقتی نوع: شماره پیش فرض: خودکار |
ارتفاع | ارتفاع نمودار، بر حسب پیکسل. نوع: شماره پیش فرض: ارتفاع عنصر حاوی |
افسانه | یک شی با اعضا برای پیکربندی جنبه های مختلف افسانه. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: {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.ignoreBounds | اگر روی توجه: این فقط برای نکات ابزار HTML اعمال می شود. اگر این مورد با راهنمایی ابزار SVG فعال شود، هر سرریزی خارج از محدوده نمودار برش داده می شود. برای جزئیات بیشتر به سفارشی کردن محتوای راهنمای ابزار مراجعه کنید. نوع: بولی پیش فرض: نادرست |
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 است. برای مثال،
قالب بندی واقعی اعمال شده بر روی برچسب از محلی که API با آن بارگذاری شده است مشتق شده است. برای جزئیات بیشتر، به بارگیری نمودارها با یک منطقه خاص مراجعه کنید. در محاسبه مقادیر تیک و خطوط شبکه، چندین ترکیب جایگزین از همه گزینههای خط شبکه مربوطه در نظر گرفته میشود و در صورت تکرار یا همپوشانی برچسبهای تیک قالببندی شده، گزینههای جایگزین رد خواهند شد. بنابراین اگر میخواهید فقط مقادیر تیک اعداد صحیح را نشان دهد، میتوانید نوع: رشته پیش فرض: خودکار |
vAxis.gridlines | یک شی با اعضایی برای پیکربندی خطوط شبکه در محور عمودی. توجه داشته باشید که خطوط شبکه محور عمودی به صورت افقی ترسیم می شوند. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: {color: '#333', minSpacing: 20} نوع: شی پیش فرض: null |
vAxis.gridlines.color | رنگ خطوط شبکه عمودی در داخل منطقه نمودار. یک رشته رنگ معتبر HTML را مشخص کنید. نوع: رشته پیشفرض: '#CCC' |
vAxis.gridlines.count | تعداد تقریبی خطوط شبکه افقی در داخل منطقه نمودار. اگر یک عدد مثبت برای نوع: شماره پیش فرض: -1 |
vAxis.gridlines.interval | آرایه ای از اندازه ها (به عنوان مقادیر داده، نه پیکسل) بین خطوط شبکه مجاور. این گزینه در حال حاضر فقط برای محورهای عددی است، اما مشابه گزینه های نوع: عدد بین 1 تا 10 بدون احتساب 10. پیش فرض: محاسبه شده |
vAxis.gridlines.minSpacing | حداقل فضای صفحه نمایش، بر حسب پیکسل، بین خطوط شبکه اصلی hAxis. پیشفرض برای خطوط شبکه اصلی نوع: شماره پیش فرض: محاسبه شده |
vAxis.gridlines.multiple | تمام مقادیر خط شبکه و تیک باید مضربی از مقدار این گزینه باشد. توجه داشته باشید که برخلاف فواصل، توان های 10 برابر مضرب در نظر گرفته نمی شوند. بنابراین میتوانید با مشخص کردن نوع: شماره پیش فرض: 1 |
vAxis.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 |
vAxis.minorGridlines | یک شی با اعضایی برای پیکربندی خطوط شبکه فرعی در محور عمودی، مشابه گزینه vAxis.gridlines. نوع: شی پیش فرض: null |
vAxis.minorGridlines.color | رنگ خطوط شبکه فرعی عمودی در داخل منطقه نمودار. یک رشته رنگ معتبر HTML را مشخص کنید. نوع: رشته پیشفرض: ترکیبی از خط شبکه و رنگهای پسزمینه |
vAxis.minorGridlines.count | گزینه minorGridlines.count عمدتا منسوخ شده است، به جز غیرفعال کردن خطوط شبکه کوچک با تنظیم شمارش بر روی 0. تعداد خطوط شبکه کوچک به فاصله بین خطوط شبکه اصلی (به vAxis.gridlines.interval مراجعه کنید) و حداقل فضای مورد نیاز (به vAxis مراجعه کنید) بستگی دارد. minorGridlines.minSpacing). نوع: شماره پیش فرض: 1 |
vAxis.minorGridlines.interval | گزینه minorGridlines.interval مانند گزینه main gridlines interval است، اما بازه ای که انتخاب می شود همیشه مقسوم علیه فاصله خط اصلی خواهد بود. فاصله پیشفرض برای مقیاسهای خطی نوع: شماره پیش فرض: 1 |
vAxis.minorGridlines.minSpacing | حداقل فضای مورد نیاز، بر حسب پیکسل، بین خطوط شبکه کوچک مجاور، و بین خطوط شبکه فرعی و اصلی. مقدار پیش فرض 1/2 minSpacing خطوط شبکه اصلی برای مقیاس های خطی و 1/5 minSpacing برای مقیاس های log است. نوع: شماره پیش فرض: محاسبه شده |
vAxis.minorGridlines.multiple | مانند نوع: شماره پیش فرض: 1 |
vAxis.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 |
vAxis.logScale | اگر درست باشد، محور عمودی را به مقیاس لگاریتمی تبدیل می کند. توجه: همه مقادیر باید مثبت باشند. نوع: بولی پیش فرض: نادرست |
vAxis.scaleType | ویژگی
این گزینه فقط برای یک محور نوع: رشته پیش فرض: null |
vAxis.textPosition | موقعیت متن محور عمودی، نسبت به ناحیه نمودار. مقادیر پشتیبانی شده: "out"، "in"، "none". نوع: رشته پیش فرض: "خارج" |
vAxis.textStyle | یک شی که سبک متن محور عمودی را مشخص می کند. شیء دارای این قالب است: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } نوع: شی پیشفرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
vAxis.tick | تیک های محور Y را که به طور خودکار تولید می شوند با آرایه مشخص شده جایگزین می کند. هر عنصر آرایه باید یا یک مقدار تیک معتبر (مانند یک عدد، تاریخ، تاریخ، یا زمان روز)، یا یک شی باشد. اگر یک شی است، باید یک ویژگی viewWindow به طور خودکار گسترش مییابد تا تیکهای حداقل و حداکثر را شامل شود، مگر اینکه یک مثال ها:
نوع: آرایه ای از عناصر پیش فرض: خودکار |
vAxis.title | ویژگی نوع: رشته پیش فرض: بدون عنوان |
vAxis.titleTextStyle | یک شی که سبک متن عنوان محور عمودی را مشخص می کند. شیء دارای این قالب است: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } نوع: شی پیشفرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
vAxis.maxValue | حداکثر مقدار محور عمودی را به مقدار مشخص شده منتقل می کند. این در اکثر نمودارها صعودی خواهد بود. اگر این مقدار روی مقداری کوچکتر از حداکثر مقدار y داده تنظیم شود نادیده گرفته می شود. نوع: شماره پیش فرض: خودکار |
vAxis.minValue | مقدار حداقل محور عمودی را به مقدار مشخص شده منتقل می کند. این در اکثر نمودارها نزولی خواهد بود. اگر این مقدار روی مقداری بیشتر از حداقل مقدار y داده تنظیم شود نادیده گرفته می شود. نوع: شماره پیش فرض: null |
vAxis.viewWindowMode | نحوه مقیاس بندی محور عمودی برای ارائه مقادیر در ناحیه نمودار را مشخص می کند. مقادیر رشته زیر پشتیبانی می شوند:
نوع: رشته پیش فرض: معادل "زیبا" است، اما در صورت استفاده از vaxis.viewWindow.min و vaxis.viewWindow.max اولویت دارند. |
vAxis.viewWindow | محدوده برش محور عمودی را مشخص می کند. نوع: شی پیش فرض: null |
vAxis.viewWindow.max | حداکثر مقدار داده عمودی برای ارائه. هنگامی که نوع: شماره پیش فرض: خودکار |
vAxis.viewWindow.min | حداقل مقدار داده عمودی برای ارائه. هنگامی که نوع: شماره پیش فرض: خودکار |
عرض | عرض نمودار، بر حسب پیکسل. نوع: شماره پیش فرض: عرض عنصر حاوی |
مواد و روش ها
روش | |
---|---|
draw(data, options) | نمودار را رسم می کند. نمودار فراخوانی های متد بیشتر را فقط پس از فعال شدن رویداد نوع بازگشت: ندارد |
getAction(actionID) | شی عمل راهنمای tooltip را با نوع بازگشت: شی |
getBoundingBox(id) | یک شی شامل سمت چپ، بالا، عرض و ارتفاع
مقادیر نسبت به ظرف نمودار هستند. بعد از ترسیم نمودار این را صدا بزنید. نوع بازگشت: شی |
getChartAreaBoundingBox() | یک شی شامل سمت چپ، بالا، عرض و ارتفاع محتوای نمودار را برمیگرداند (یعنی به استثنای برچسبها و افسانهها):
مقادیر نسبت به ظرف نمودار هستند. بعد از ترسیم نمودار این را صدا بزنید. نوع بازگشت: شی |
getChartLayoutInterface() | یک شی حاوی اطلاعاتی در مورد قرارگیری نمودار روی صفحه و عناصر آن برمیگرداند. متدهای زیر را می توان بر روی شی برگشتی فراخوانی کرد:
بعد از ترسیم نمودار این را صدا بزنید. نوع بازگشت: شی |
getHAxisValue(xPosition, optional_axis_index) | مقدار داده افقی را در مثال: بعد از ترسیم نمودار این را صدا بزنید. نوع برگشت: شماره |
getImageURI() | نمودار را به صورت سریال URI تصویر برمیگرداند. بعد از ترسیم نمودار این را صدا بزنید. چاپ نمودارهای PNG را ببینید. نوع بازگشت: رشته |
getSelection() | آرایه ای از موجودیت های نمودار انتخاب شده را برمی گرداند. موجودیتهای قابل انتخاب شمعدانها، نوشتههای افسانهای و دستهها هستند. برای این نمودار، در هر لحظه می توان تنها یک موجودیت را انتخاب کرد. نوع بازگشت: آرایه ای از عناصر انتخابی |
getVAxisValue(yPosition, optional_axis_index) | مقدار داده عمودی را در مثال: بعد از ترسیم نمودار این را صدا بزنید. نوع برگشت: شماره |
getXLocation(dataValue, optional_axis_index) | مختصات x پیکسل مثال: بعد از ترسیم نمودار این را صدا بزنید. نوع برگشت: شماره |
getYLocation(dataValue, optional_axis_index) | مختصات پیکسل y مثال: بعد از ترسیم نمودار این را صدا بزنید. نوع برگشت: شماره |
removeAction(actionID) | عملکرد راهنمای ابزار با نوع بازگشت: none |
setAction(action) | زمانی که کاربر روی متن اقدام کلیک میکند، یک عمل راهنمای ابزار را تنظیم میکند. متد قبل از فراخوانی متد رسم نمودار نوع بازگشت: none |
setSelection() | موجودیت های نمودار مشخص شده را انتخاب می کند. هر انتخاب قبلی را لغو می کند. موجودیتهای قابل انتخاب شمعدانها، نوشتههای افسانهای و دستهها هستند. برای این نمودار، تنها یک موجودیت را می توان در یک زمان انتخاب کرد. نوع بازگشت: ندارد |
clearChart() | نمودار را پاک می کند و تمام منابع اختصاص داده شده آن را آزاد می کند. نوع بازگشت: ندارد |
مناسبت ها
برای اطلاعات بیشتر در مورد نحوه استفاده از این رویدادها، به Basic Interactivity ، Handling Events و Firing Events مراجعه کنید.
نام | |
---|---|
animationfinish | هنگامی که انیمیشن انتقال کامل شد فعال می شود. خواص: هیچ |
click | هنگامی که کاربر در داخل نمودار کلیک می کند فعال می شود. می توان برای شناسایی زمانی که عنوان، عناصر داده، ورودی های افسانه، محورها، خطوط شبکه یا برچسب ها کلیک می شود، استفاده کرد. ویژگی ها: targetID |
error | هنگامی که هنگام تلاش برای ارائه نمودار، خطایی رخ می دهد، فعال می شود. ویژگی ها: شناسه، پیام |
legendpagination | هنگامی که کاربر روی فلش های صفحه بندی افسانه کلیک می کند فعال می شود. نمایه صفحه مبتنی بر صفر افسانه فعلی و تعداد کل صفحات را به عقب پس می دهد. ویژگی ها: currentPageIndex، totalPages |
onmouseover | هنگامی که کاربر روی یک موجودیت بصری حرکت میکند فعال میشود. شاخص های سطر و ستون عنصر جدول داده مربوطه را به عقب ارسال می کند. یک کندل با یک سلول در جدول داده ها، یک ورودی افسانه به یک ستون (شاخص ردیف خالی است) و یک دسته به یک ردیف (شاخص ستون تهی است) مرتبط است. خواص: سطر، ستون |
onmouseout | زمانی که کاربر از یک موجود بصری دور میشود، فعال میشود. شاخص های سطر و ستون عنصر جدول داده مربوطه را به عقب ارسال می کند. یک کندل با یک سلول در جدول داده ها، یک ورودی افسانه به یک ستون (شاخص ردیف خالی است) و یک دسته به یک ردیف (شاخص ستون تهی است) مرتبط است. خواص: سطر، ستون |
ready | نمودار برای تماس های متد خارجی آماده است. اگر میخواهید با نمودار تعامل داشته باشید و پس از ترسیم روشها را فراخوانی کنید، باید قبل از فراخوانی متد خواص: هیچ |
select | هنگامی که کاربر روی یک موجودیت بصری کلیک می کند فعال می شود. برای اطلاع از آنچه انتخاب شده است، خواص: هیچ |
خط مشی داده
تمام کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.