بررسی اجمالی
سنج با شماره گیری که در مرورگر با استفاده از 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':['gauge']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80], ['CPU', 55], ['Network', 68] ]); var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); setInterval(function() { data.setValue(0, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 13000); setInterval(function() { data.setValue(1, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 5000); setInterval(function() { data.setValue(2, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 120px;"></div> </body> </html>
در حال حاضر هیچ راهی برای مشخص کردن عنوان نمودار اندازه گیری با سایر نمودارهای Google وجود ندارد. در مثال بالا از HTML ساده برای نمایش عنوان استفاده شده است.
همچنین، گزینه animation.startup
که برای بسیاری دیگر از نمودارهای گوگل موجود است، برای نمودار اندازه گیری موجود نیست. اگر میخواهید یک انیمیشن راهاندازی داشته باشید، نمودار را در ابتدا با مقادیر صفر تنظیم کنید و سپس دوباره با مقداری که میخواهید به آن متحرک شود رسم کنید.
بارگذاری
نام بسته google.charts.load
"gauge"
است.
google.charts.load('current', {packages: ['gauge']});
نام کلاس تجسم google.visualization.Gauge
است.
var visualization = new google.visualization.Gauge(container);
فرمت داده
هر مقدار عددی به عنوان یک سنج نمایش داده می شود. دو فرمت داده جایگزین پشتیبانی می شود:
- دو ستون. ستون اول باید یک رشته باشد و حاوی برچسب سنج باشد. ستون دوم باید یک عدد باشد و حاوی مقدار سنج باشد.
- هر تعداد ستون عددی برچسب هر گیج، برچسب ستون است.
گزینه های پیکربندی
نام | |
---|---|
انیمیشن.مدت | مدت زمان انیمیشن، بر حسب میلی ثانیه. برای جزئیات، به مستندات انیمیشن مراجعه کنید. نوع: شماره پیش فرض: 400 |
انیمیشن.تسهیل | تابع easing برای انیمیشن اعمال می شود. گزینه های ذیل در دسترس هستند:
نوع: رشته پیش فرض: "خطی" |
forceIFrame | نمودار را درون یک قاب درون خطی رسم می کند. (توجه داشته باشید که در IE8، این گزینه نادیده گرفته می شود؛ همه نمودارهای IE8 در i-frame ترسیم می شوند.) نوع: بولی پیش فرض: نادرست |
رنگ سبز | رنگ مورد استفاده برای بخش سبز، در نماد رنگی HTML. نوع: رشته پیشفرض: '#109618' |
سبز از | کمترین مقدار برای محدوده ای که با رنگ سبز مشخص شده است. نوع: شماره پیش فرض: هیچ |
سبز به | بالاترین مقدار برای محدوده ای که با رنگ سبز مشخص شده است. نوع: شماره پیش فرض: هیچ |
ارتفاع | ارتفاع نمودار بر حسب پیکسل نوع: شماره پیش فرض: عرض کانتینر |
majorTicks | برچسبهایی برای علائم تیک اصلی تعداد برچسب ها تعداد تیک های اصلی را در همه گیج ها مشخص می کند. پیشفرض پنج تیک اصلی، با برچسبهای مقدار حداقل و حداکثر سنج است. نوع: آرایه از رشته ها پیش فرض: هیچ |
حداکثر | حداکثر مقدار یک سنج. نوع: شماره پیش فرض: 100 |
دقیقه | حداقل مقدار یک سنج. نوع: شماره پیش فرض: 0 |
minorTicks | تعداد تیک های جزئی در هر بخش تیک اصلی. نوع: شماره پیش فرض: 2 |
رنگ قرمز | رنگ مورد استفاده برای بخش قرمز، در نماد رنگی HTML. نوع: رشته پیشفرض: '#DC3912' |
قرمز از | کمترین مقدار برای محدوده ای که با رنگ قرمز مشخص شده است. نوع: شماره پیش فرض: هیچ |
قرمز به | بالاترین مقدار برای محدوده ای که با رنگ قرمز مشخص شده است. نوع: شماره پیش فرض: هیچ |
عرض | عرض نمودار بر حسب پیکسل نوع: شماره پیش فرض: عرض کانتینر |
رنگ زرد | رنگ مورد استفاده برای بخش زرد، در نماد رنگی HTML. نوع: رشته پیشفرض: '#FF9900' |
زرد از | کمترین مقدار برای محدوده ای که با رنگ زرد مشخص شده است. نوع: شماره پیش فرض: هیچ |
yellowTo | بالاترین مقدار برای محدوده ای که با رنگ زرد مشخص شده است. نوع: شماره پیش فرض: هیچ |
مواد و روش ها
روش | |
---|---|
draw(data, options) | نمودار را رسم می کند. نوع بازگشت: ندارد |
clearChart() | نمودار را پاک می کند و تمام منابع اختصاص داده شده آن را آزاد می کند. نوع بازگشت: ندارد |
مناسبت ها
هیچ رویداد محرکی وجود ندارد.
سیاست داده
تمام کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.