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

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

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

نظرة عامة

مقياس مع قرص، يتم عرضه داخل المتصفح باستخدام 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);

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

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

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

خيارات الضبط

الاسم
.GIF	مدة الصورة المتحركة بالمللي ثانية. لمعرفة التفاصيل، يُرجى الاطّلاع على مستندات الصور المتحركة. النوع: الرقم تلقائي: 400
رسم متحرك.	دالة الإرخاء المطبَّقة على الحركة. تتوفّر الخيارات التالية: "خطي" - سرعة ثابتة 'in' - Easy in - البدء ببطء والسرعة. 'out' - راحة - البدء بسرعة وإبطاء. 'inAndOut' - إرخاء للداخل والخارج - البدء ببطء، تسريع، تقليل البطء. النوع: سلسلة افتراضي: "خطي"
فرض إطار	لرسم المخطط داخل إطار مضمن. (تجدر الإشارة إلى أنه يتم تجاهل هذا الخيار في IE8، ويتم رسم جميع الرسوم البيانية لـ IE8 في إطارات i.) النوع: منطقي تلقائي: خطأ
اللون الأخضر	اللون المستخدم في القسم الأخضر، بترميز لون HTML. النوع: سلسلة الافتراضي: "#109618"
أخضر من	أدنى قيمة لنطاق تم تمييزه بلون أخضر. النوع: الرقم افتراضي: بدون
باللون الأخضر	أعلى قيمة لنطاق تم تمييزه بلون أخضر. النوع: الرقم افتراضي: بدون
الارتفاع	ارتفاع المخطط بالبكسل. النوع: الرقم تلقائي: عرض الحاوية
سِلَع كبيرة	تصنيفات علامات المؤشرات الرئيسية. يحدد عدد التصنيفات عدد المؤشرات الرئيسية في جميع المقاييس. القيمة التلقائية هي خمسة مؤشرات رئيسية، ويتم تصنيفها بالحدّين الأدنى والأقصى لقيمة العرض. النوع: مصفوفة من السلاسل افتراضي: بدون
الحد الأقصى	الحد الأقصى لقيمة المقياس. النوع: الرقم تلقائي: 100
دقيقة	الحد الأدنى لقيمة المقياس. النوع: الرقم القيمة التلقائية: 0
عصي صغيرة	عدد أقسام المؤشرات الثانوية في كل قسم رئيسي محدد النوع:number تلقائي: 2
اللون الأحمر	اللون المطلوب استخدامه للجزء الأحمر، بترميز لون HTML. النوع: سلسلة تلقائي: '#DC3912'
أحمر من	أدنى قيمة لنطاق تم تمييزه بلون أحمر. النوع: الرقم افتراضي: بدون
أحمر إلى	أعلى قيمة لنطاق تم تمييزه بلون أحمر. النوع: الرقم افتراضي: بدون
width	عرض المخطط بالبكسل. النوع: الرقم تلقائي: عرض الحاوية
اللون الأصفر	اللون المستخدم في القسم الأصفر، في صيغة لون HTML. النوع: سلسلة الافتراضي: "#FF9900"
أصفر من	أدنى قيمة لنطاق تم تمييزه بلون أصفر. النوع: الرقم افتراضي: بدون
أصفر إلى	أعلى قيمة لنطاق تم تمييزه بلون أصفر. النوع: الرقم افتراضي: بدون

الطرق

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

الأحداث

لا توجد أحداث تم تشغيلها.

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

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