مهم: بخش نمودارهای تصویری ابزار نمودار Google از 20 آوریل 2012 رسماً منسوخ شده است. طبق خط مشی منسوخ شدن ما به کار خود ادامه خواهد داد.
بررسی اجمالی
خطوط جرقه منفرد یا چندگانه که با تصاویر با استفاده از Google Charts API ارائه می شوند. تصاویر در یک جدول HTML قرار دارند.
مثال
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["imagesparkline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Revenue', 'Licenses'], [435, 132], [438, 131], [512, 137], [460, 142], [491, 140], [487, 139], [552, 147], [511, 146], [505, 151], [509, 149] ]); var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div')); chart.draw(data, {width: 120, height: 40, showAxisLines: false, showValueLabels: false, labelPosition: 'left'}); } </script> </head> <body> <div id="chart_div" style="width: 120px; height: 40px;"></div> </body> </html>
بارگذاری
نام بسته google.charts.load
"imagesparkline"
است.
google.charts.load("current", {packages: ["imagesparkline"]});
نام کلاس تجسم google.visualization.ImageSparkLine
است.
var visualization = new google.visualization.ImageSparkLine(container);
فرمت داده
هر تعداد ستون همه ستون ها باید اعداد باشند. هر ستون به صورت یک خط جرقه نمایش داده می شود.
گزینه های پیکربندی
نام | تایپ کنید | پیش فرض | شرح |
---|---|---|---|
رنگ | رشته | رنگی را برای استفاده برای همه نمودارها مشخص می کند. رشته ای با فرمت #rrggbb. به عنوان مثال: '#00cc00'. فقط در صورتی استفاده می شود که گزینه colors مشخص نشده باشد. | |
رنگ ها | آرایه رشته ها | رنگ های پیش فرض | رنگ هایی که برای ستون های داده استفاده می شود. آرایه ای از رشته ها که در آن هر عنصر یک رشته با فرمت #rrggbb است. به عنوان مثال: '#00cc00'. رنگ i برای ستون داده i استفاده می شود. اگر تعداد رنگها از تعداد ستونها کمتر باشد، انتخاب رنگ به اطراف میپیچد. |
پر کردن | بولی | نادرست | اگر درست باشد، ناحیه زیر خط را با رنگ پر می کند. |
ارتفاع | عدد | ارتفاع کانتینر | ارتفاع تصاویر بر حسب پیکسل |
موقعیت برچسب | رشته | هیچ یک | موقعیت برچسب ها مقادیر پشتیبانی شده «هیچ»، «چپ»، «راست» هستند. |
حداکثر | آرایه اعداد | حداکثر مقدار داده هر جرقه | بالاترین مقدار برای محدوده مقدار داده هر خط جرقه. شاخص موجود در آرایه باید با نمایه ستون در DataTable مطابقت داشته باشد. اگر همه مقادیر null باشند، این حداکثر مقدار در سری خواهد بود. |
دقیقه | آرایه اعداد | حداقل مقدار داده هر جرقه | کمترین مقدار برای محدوده مقدار داده هر خط جرقه. شاخص موجود در آرایه باید با نمایه ستون در DataTable مطابقت داشته باشد. اگر همه مقادیر null باشند، این مقدار حداقل در سری خواهد بود. |
showAxisLines | بولی | درست است، واقعی | اگر درست باشد، خطوط محور نشان داده می شوند. اگر نادرست باشد، اینطور نیست و پیشفرض showValueLabels نادرست است. |
showValueLabels | بولی | درست است، به جز زمانی که showAxisLines نادرست است. | اگر درست باشد، برچسبهای محور مقدار نشان داده میشوند. |
عنوان | آرایه رشته ها | هیچ عنوانی نمایش داده نمی شود | عناوینی برای استفاده برای هر خط جرقه. |
عرض | عدد | عرض کانتینر | عرض نمودارها، بر حسب پیکسل. |
چیدمان | رشته | 'v' | طرح بندی عمودی یا افقی: 'v' برای عمودی، 'h' برای افقی. |
مواد و روش ها
روش | نوع برگشت | شرح |
---|---|---|
draw(data, options) | هیچ یک | نمودار را رسم می کند. |
getSelection() | آرایه ای از عناصر انتخاب | شاخص های نمودارهای انتخاب شده را به عنوان آرایه ای از اشیاء برمی گرداند. هر شی دارای یک ویژگی ستونی است که شامل شماره ستون یک sparkline انتخاب شده است. می تواند بیش از یک ستون انتخابی را برگرداند. |
setSelection(selection) | هیچ یک | خطوط جرقه ای مشخص شده را انتخاب می کند و هر خط جرقه ای را که مشخص نشده است از حالت انتخاب خارج می کند. انتخاب آرایه ای از اشیاء است که هر کدام دارای یک ویژگی column عددی است که شاخص خط جرقه انتخاب شده است. برای اطلاعات بیشتر به setSelection() مراجعه کنید. |
مناسبت ها
نام | شرح | خواص |
---|---|---|
انتخاب کنید | رویداد انتخاب استاندارد. | هیچ یک |
سیاست داده
لطفاً به خط مشی ورود به سیستم نمودار API مراجعه کنید.