דף זה תורגם על ידי 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);

פורמט נתונים

כל ערך מספרי מוצג כמדד. יש שני פורמטים חלופיים של נתונים שאפשר להשתמש בהם:

שתי עמודות. העמודה הראשונה צריכה להיות מחרוזת ולהכיל את תווית המונה. העמודה השנייה צריכה להיות מספר ולהכיל את ערך המונה.
מספר כלשהו של עמודות מספריות. התווית של כל מדד היא התווית של העמודה.

אפשרויות הגדרה

שם
אנימציה.משך	משך האנימציה, באלפיות השנייה. פרטים נוספים זמינים במסמכי האנימציה. סוג: מספר ברירת מחדל: 400
אנימציה.	פונקציית ההתאמה לצפייה על האנימציה. אלו האפשרויות הזמינות: 'לינארי' – מהירות קבועה. 'in' - הקלה ב- - הפעלה איטית ומהירות גבוהה יותר. 'out' - יציאה בקלות - הפעלה מהירה והאטה. 'InAndOut' – מתחילים בצורה קלה ונוחה – מתחילים לאט, מאיצים ולאחר מכן מאטים. סוג: מחרוזת ברירת מחדל: 'לינארי'
forceIFrame	משרטט את התרשים בתוך מסגרת מוטבעת. (שימו לב שב-IE8 המערכת מתעלמת מהאפשרות הזו. כל התרשימים של IE8 מצוירים ב-i-frames). סוג: בוליאני ברירת מחדל: False
ירוקצבע	הצבע שמשמש עבור הקטע הירוק, בסימון צבע HTML. סוג: מחרוזת ברירת מחדל: '#109618'
GreenFrom	הערך הנמוך ביותר עבור טווח המסומן בצבע ירוק. סוג: מספר ברירת מחדל: אין
ירוקאל	הערך הגבוה ביותר עבור טווח המסומן בצבע ירוק. סוג: מספר ברירת מחדל: אין
גובה	גובה התרשים בפיקסלים. סוג: מספר ברירת מחדל: רוחב הקונטיינר
סימונים ראשיים	תוויות לסימני שנתות חשובים. מספר התוויות מגדיר את מספר השנתות העיקריות בכל המדדים. ברירת המחדל היא 5 קווים מסומנים מובילים, עם התוויות של הערך המינימלי והמקסימלי. סוג: מערך של מחרוזות ברירת מחדל: אין
מקסימלי	הערך המקסימלי של מד. סוג: מספר ברירת מחדל: 100
דק'	הערך המינימלי של מד. סוג: מספר ברירת מחדל: 0
סימונים משניים	מספר קטעי השנתות המשניים בכל קטע שנתות גדול. סוג:מספר ברירת מחדל: 2
אדום	הצבע שמשמש עבור הקטע האדום בסימון צבעים כ-HTML. סוג: מחרוזת ברירת מחדל: 'DCDC9912'
redFrom	הערך הנמוך ביותר עבור טווח המסומן בצבע אדום. סוג: מספר ברירת מחדל: אין
RedTo	הערך הגבוה ביותר עבור טווח שצוין בצבע אדום. סוג: מספר ברירת מחדל: אין
רוחב	רוחב התרשים בפיקסלים. סוג: מספר ברירת מחדל: רוחב הקונטיינר
צהוב	הצבע שמשמש עבור הקטע הצהוב, בסימון צבע HTML. סוג: מחרוזת ברירת מחדל: ' #FF9900'
צהוב מ	הערך הנמוך ביותר עבור טווח המסומן בצבע צהוב. סוג: מספר ברירת מחדל: אין
צהוב	הערך הגבוה ביותר עבור טווח המסומן בצבע צהוב. סוג: מספר ברירת מחדל: אין

שיטות

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

אירועים

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

מדיניות נתונים

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