تجسم: سنج

  1. بررسی اجمالی
  2. مثال
  3. بارگذاری
  4. فرمت داده
  5. گزینه های پیکربندی
  6. مواد و روش ها
  7. مناسبت ها
  8. سیاست داده

بررسی اجمالی

سنج با شماره گیری که در مرورگر با استفاده از SVG یا VML ارائه شده است.

مثال

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 400px; height: 120px;"></div> 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 type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 400px; height: 120px;"></div> 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); }
<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);

فرمت داده

هر مقدار عددی به عنوان یک سنج نمایش داده می شود. دو فرمت داده جایگزین پشتیبانی می شود:

  1. دو ستون. ستون اول باید یک رشته باشد و حاوی برچسب سنج باشد. ستون دوم باید یک عدد باشد و حاوی مقدار سنج باشد.
  2. هر تعداد ستون عددی برچسب هر گیج، برچسب ستون است.

گزینه های پیکربندی

نام
انیمیشن.مدت

مدت زمان انیمیشن، بر حسب میلی ثانیه. برای جزئیات، به مستندات انیمیشن مراجعه کنید.

نوع: شماره
پیش فرض: 400
انیمیشن.تسهیل

تابع easing برای انیمیشن اعمال می شود. گزینه های ذیل در دسترس هستند:

  • "خطی" - سرعت ثابت.
  • 'in' - سهولت در ورود - آهسته شروع کنید و سرعت خود را افزایش دهید.
  • "خارج" - آسان کردن - سریع شروع کنید و سرعت را کاهش دهید.
  • 'inAndOut' - سهولت در ورود و خروج - آهسته شروع کنید، سرعت دهید، سپس سرعت را کم کنید.
نوع: رشته
پیش فرض: "خطی"
forceIFrame

نمودار را درون یک قاب درون خطی رسم می کند. (توجه داشته باشید که در IE8، این گزینه نادیده گرفته می شود؛ همه نمودارهای IE8 در i-frame ترسیم می شوند.)

نوع: بولی
پیش فرض: نادرست
رنگ سبز

رنگ مورد استفاده برای بخش سبز، در نماد رنگی HTML.

نوع: رشته
پیش‌فرض: '#109618'
سبز از

کمترین مقدار برای محدوده ای که با رنگ سبز مشخص شده است.

نوع: شماره
پیش فرض: هیچ
سبز به

بالاترین مقدار برای محدوده ای که با رنگ سبز مشخص شده است.

نوع: شماره
پیش فرض: هیچ
ارتفاع

ارتفاع نمودار بر حسب پیکسل

نوع: شماره
پیش فرض: عرض کانتینر
majorTicks

برچسب‌هایی برای علائم تیک اصلی تعداد برچسب ها تعداد تیک های اصلی را در همه گیج ها مشخص می کند. پیش‌فرض پنج تیک اصلی، با برچسب‌های مقدار حداقل و حداکثر سنج است.

نوع: آرایه از رشته ها
پیش فرض: هیچ
حداکثر

حداکثر مقدار یک سنج.

نوع: شماره
پیش فرض: 100
دقیقه

حداقل مقدار یک سنج.

نوع: شماره
پیش فرض: 0
minorTicks

تعداد تیک های جزئی در هر بخش تیک اصلی.

نوع: شماره
پیش فرض: 2
رنگ قرمز

رنگ مورد استفاده برای بخش قرمز، در نماد رنگی HTML.

نوع: رشته
پیش‌فرض: '#DC3912'
قرمز از

کمترین مقدار برای محدوده ای که با رنگ قرمز مشخص شده است.

نوع: شماره
پیش فرض: هیچ
قرمز به

بالاترین مقدار برای محدوده ای که با رنگ قرمز مشخص شده است.

نوع: شماره
پیش فرض: هیچ
عرض

عرض نمودار بر حسب پیکسل

نوع: شماره
پیش فرض: عرض کانتینر
رنگ زرد

رنگ مورد استفاده برای بخش زرد، در نماد رنگی HTML.

نوع: رشته
پیش‌فرض: '#FF9900'
زرد از

کمترین مقدار برای محدوده ای که با رنگ زرد مشخص شده است.

نوع: شماره
پیش فرض: هیچ
yellowTo

بالاترین مقدار برای محدوده ای که با رنگ زرد مشخص شده است.

نوع: شماره
پیش فرض: هیچ

مواد و روش ها

روش
draw(data, options)

نمودار را رسم می کند.

نوع بازگشت: ندارد
clearChart()

نمودار را پاک می کند و تمام منابع اختصاص داده شده آن را آزاد می کند.

نوع بازگشت: ندارد

مناسبت ها

هیچ رویداد محرکی وجود ندارد.

سیاست داده

همه کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.