تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

التمثيل البصري: القياس

Overview
مثال
جارٍ التحميل
تنسيق البيانات
خيارات الإعداد
الطُرق
الأحداث
سياسة البيانات

نظرة عامة

مقياس مزود بقرص، يتم عرضه داخل المتصفح باستخدام SVG أو VML.

مثال

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" الأخرى غير متاح لمخطط القياس. إذا كنت ترغب في رسم متحرك لبدء التشغيل، ارسم المخطط مبدئيًا بقيم مضبوطة على صفر، ثم ارسم مرة أخرى بالقيمة التي تريد تحريكها إليها.

جارٍ التحميل

اسم حزمة "google.charts.load" هو "gauge".

  google.charts.load('current', {packages: ['gauge']});

اسم فئة العرض المرئي هو google.visualization.Gauge.

  var visualization = new google.visualization.Gauge(container);

تنسيق البيانات

يتم عرض كل قيمة رقمية كمقياس. يتوفّر تنسيقان بديلان للبيانات:

عمودين. يجب أن يكون العمود الأول سلسلة، وأن يحتوي على تسمية المقياس. يجب أن يكون العمود الثاني رقمًا، وأن يحتوي على قيمة القياس.
أي عدد من الأعمدة الرقمية. تسمية كل مقياس هي تسمية العمود.

خيارات الضبط

الاسم
animation.duration	مدة الحركة بالمللي ثانية. لمعرفة التفاصيل، يمكنك الاطّلاع على مستندات الصور المتحركة. النوع: رقم القيمة التلقائية: 400
animation.easing	دالة التخفيف المطبقة على الصورة المتحركة. تتوفّر الخيارات التالية: "خطي" - سرعة ثابتة "داخل" - إرخاء في البدء - البدء ببطء والسرعة. "إنهاء" - إرخاء - البدء بسرعة وتبطئ. "inAndOut" - يبدأ العمل ببطء ويبدأ بالسرعة ثم بطئ. النوع: سلسلة تلقائي: "خطي"
forceIFrame	لرسم الرسم البياني داخل إطار مضمّن. (يُرجى ملاحظة أنّه في IE8، يتم تجاهل هذا الخيار، ويتم رسم كل مخططات IE8 بالإطارات i-frames). النوع: قيمة منطقية الإعداد التلقائي: خطأ
greenColor	اللون المطلوب استخدامه للقسم الأخضر، في تدوين لون HTML. النوع: سلسلة تلقائي: "#109618"
greenFrom	أدنى قيمة لنطاق مميز باللون الأخضر. النوع: رقم تلقائي: بدون
greenTo	أعلى قيمة لنطاق مميز باللون الأخضر. النوع: رقم تلقائي: بدون
الطول	ارتفاع الرسم البياني بالبكسل النوع: رقم الوضع التلقائي: عرض الحاوية
majorTicks	تصنيفات لعلامات التجزئة الرئيسية يحدّد عدد التصنيفات عدد المؤشرات الرئيسية في جميع المقاييس. القيمة التلقائية هي خمسة علامات فارقة رئيسية تتضمن تصنيفات قيمة القياس الأدنى والأقصى. النوع: مصفوفة من السلاسل تلقائي: بدون
الحد الأقصى	تمثّل هذه السمة القيمة القصوى للمقياس. النوع: رقم القيمة التلقائية: 100
دقيقة	تمثّل هذه السمة الحدّ الأدنى لقيمة المقياس. النوع: رقم القيمة التلقائية: 0
minorTicks	عدد علامات التجزئة الثانوية في كل قسم علامات تجارية رئيسي. النوع:رقم الخيار التلقائي: 2
redColor	اللون المطلوب استخدامه للقسم الأحمر، في تدوين لون HTML. النوع: سلسلة تلقائي: "#DC3912"
redFrom	أدنى قيمة لنطاق تم تمييزه بلون أحمر. النوع: رقم تلقائي: بدون
redTo	أعلى قيمة لنطاق تم تمييزه بلون أحمر. النوع: رقم تلقائي: بدون
العرض	عرض الرسم البياني بالبكسل. النوع: رقم الوضع التلقائي: عرض الحاوية
yellowColor	اللون المطلوب استخدامه للقسم الأصفر، في تدوين لون HTML. النوع: سلسلة الإعداد التلقائي: '#FF9900'
yellowFrom	أدنى قيمة لنطاق تم تمييزه باللون الأصفر. النوع: رقم تلقائي: بدون
yellowTo	أعلى قيمة لنطاق تم تمييزه باللون الأصفر. النوع: رقم تلقائي: بدون

الطُرق

الطريقة
`draw(data, options)`	لرسم الرسم البياني. نوع الإرجاع: لا شيء
`clearChart()`	يؤدي هذا الإجراء إلى محو الرسم البياني وتحرير جميع الموارد المخصّصة له. نوع الإرجاع: لا شيء

الأحداث

لم يتم بدء أي أحداث.

سياسة البيانات

تتم معالجة جميع الرموز والبيانات وعرضها في المتصفّح. ولا يتم إرسال أي بيانات إلى أي خادم.