דף זה תורגם על ידי 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 Charts לא זמינה בשביל תרשים המחוונים. אם תרצו אנימציית הפעלה, ציירו בהתחלה את התרשים כשהערכים שלו הם אפס, ואז ציירו שוב עם הערך הרצוי לאנימציה.

בטעינה

שם החבילה של 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	פונקציית ההתאמה לצפייה שמוחלת על האנימציה. אלו האפשרויות הזמינות: 'לינארי' - מהירות קבועה. 'in' – התאמה קלה – הפעלה איטית והגברת מהירות. 'out' – עשיית סדר – מתחילים מהר ומאטים. 'inAndOut' – להיכנס ולצאת בקלות – מתחילים לאט, מגבירים ואז מאטים. סוג: מחרוזת ברירת מחדל: 'לינארי'
forceIFrame	משרטטים את התרשים בתוך מסגרת בתוך מסגרת. (שימו לב שב-IE8 המערכת מתעלמת מהאפשרות הזו. כל התרשימים של IE8 משורטטים במסגרות i-frames). סוג: בוליאני ברירת מחדל: false
greenColor	הצבע לשימוש בקטע הירוק, בסימון צבעי HTML. סוג: מחרוזת ברירת מחדל: '#109618'
greenFrom	הערך הנמוך ביותר של טווח שמסומן בצבע ירוק. סוג: מספר ברירת מחדל: ללא
greenTo	הערך הגבוה ביותר של טווח שמסומן בצבע ירוק. סוג: מספר ברירת מחדל: ללא
גובה	גובה התרשים בפיקסלים. סוג: מספר ברירת מחדל: רוחב מאגר תגים
majorTicks	תוויות של סימני שנתות עיקריים. מספר התוויות מגדיר את מספר הסימנים העיקריים בכל המדדים. ברירת המחדל היא חמישה סימונים עיקריים, עם התוויות של הערך המינימלי והמקסימלי. סוג: מערך של מחרוזות ברירת מחדל: ללא
מקסימלי	הערך המקסימלי של מד. סוג: מספר ברירת מחדל: 100
דקה	הערך המינימלי של מד. סוג: מספר ברירת מחדל: 0
minorTicks	מספר הקטעים המשניים בכל קטע של שנתות ראשיות. סוג:number ברירת מחדל: 2
redColor	הצבע לשימוש בקטע האדום, בסימון צבעי HTML. סוג: מחרוזת ברירת מחדל: '#DC3912'
redFrom	הערך הנמוך ביותר של טווח שמסומן בצבע אדום. סוג: מספר ברירת מחדל: ללא
redTo	הערך הגבוה ביותר של טווח שמסומן בצבע אדום. סוג: מספר ברירת מחדל: ללא
רוחב	רוחב התרשים בפיקסלים. סוג: מספר ברירת מחדל: רוחב מאגר תגים
yellowColor	הצבע שיוגדר בקטע הצהוב, בסימון צבעי HTML. סוג: מחרוזת ברירת מחדל: '#FF9900'
yellowFrom	הערך הנמוך ביותר של טווח שמסומן בצבע צהוב. סוג: מספר ברירת מחדל: ללא
yellowTo	הערך הגבוה ביותר של טווח שמסומן בצבע צהוב. סוג: מספר ברירת מחדל: ללא

שיטות

שיטה
`draw(data, options)`	מצייר את התרשים. סוג החזרה: ללא
`clearChart()`	ניקוי התרשים וכל המשאבים שהוקצו לו. סוג החזרה: ללא

אירועים

אין אירועים שהופעלו.

המדיניות בנושא נתונים

כל הקוד והנתונים מעובדים ומעובדים בדפדפן. לא נשלחים נתונים לאף שרת.