הצגה חזותית: תרשים עוגה

סקירה כללית

תרשים עוגה שעבר רינדור בדפדפן באמצעות SVG או VML. הצגת הסברים קצרים בעת העברת העכבר מעל פרוסות.

דוגמה

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

יצירת תרשים עוגה תלת-ממדי

אם תגדירו את האפשרות is3D לאפשרות true, תרשים העוגה ישורטט כאילו יש לו שלושה מימדים:

is3D הוא false כברירת מחדל, ולכן כאן נגדיר אותו במפורש כ- true: 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

יצירת תרשים טבעת

תרשים בייגל הוא תרשים עוגה עם חור במרכז. אפשר ליצור תרשימי טבעת באמצעות האפשרות pieHole:

האפשרות pieHole צריכה להיות מוגדרת למספר בין 0 ל-1, בהתאם ליחס שבין רדיוס בין החור לתרשים. מספרי 0.6 עד 0.6 ייראו בצורה הטובה ביותר ברוב התרשימים. המערכת תתעלם מערכים שווים לערך אחד או יותר מ-1, וערך 0 יסגור לחלוטין את ה-Piepoint.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

לא ניתן לשלב את האפשרויות pieHole ו-is3D. אחרת, המערכת תתעלם מ-pieHole.

שימו לב שהתרשימים של Google מנסים למקם את התווית קרוב ככל האפשר למרכז הפרוסה. אם יש לכם תרשים טבעת עם פרוסה אחת בלבד, מרכז הפרוסה עלול להיכנס לחור. במקרה כזה, משנים את הצבע של התווית:
אפשרויות
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
HTML מלא
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donut_single" style="width: 900px; height: 500px;"></div>
  </body>
</html>

סיבוב של תרשים עוגה

כברירת מחדל, תרשימי עוגה מתחילים בקצה השמאלי של הפרוסה הראשונה שמצביעה למעלה. תוכלו לשנות את ההגדרה הזו באמצעות האפשרות pieStartAngle:

אנחנו מסובבים את התרשים ב-100 מעלות בכיוון השעון עם אפשרות של pieStartAngle: 100. (לכן נבחר כי הזווית הספציפית הזו מאפשרת להתאים את התווית "איטלקית" לחלק).

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

פיצוץ פרוסה

אפשר להפריד פרוסות עוגה משאר התרשים באמצעות המאפיין offset של האפשרות slices:

כדי להפריד בין פרוסות, צריך ליצור אובייקט slices ולהקצות את מספר הפרוסה המתאים offset בין 0 ל-1. בהמשך, אנחנו משייכים קיזוזים הולכים וגדלים לפלחים 4 (גוג'ראטית), 12 (מראטהית), 14 (אוריה) ו-15 (פונג'אבי): 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

הסרת פרוסות

כדי להשמיט פרוסה, משנים את הצבע ל-'transparent':

השתמשנו גם ב-pieStartAngle כדי לסובב את התרשים ב-135 מעלות, ב-pieSliceText כדי להסיר את הטקסט מהפרוסות, וב-tooltip.trigger כדי להשבית את ההסברים הקצרים:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="pacman" style="width: 900px; height: 500px;"></div>
  </body>
</html>

סף החשיפה של פלחים

אפשר להגדיר ערך בתור הסף לפרוסת עוגה בנפרד. הערך הזה תואם לחלק מתרשים (כל התרשים מייצג את ערך 1). כדי להגדיר את הסף הזה כאחוז מתוך השלם, יש לחלק את האחוז הרצוי ב-100 (עבור סף של 20%, הערך יהיה 0.2). 

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

כל פרוסות קטנות מהסף הזה ישולבו לפרוסה "אחרת" אחת, והערך הכולל של כל הפרוסות יהיה נמוך מהסף. 

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

בטעינה

שם החבילה של google.charts.load הוא "corechart".

  google.charts.load("current", {packages: ["corechart"]});

שם הכיתה הוא google.visualization.PieChart. 

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

פורמט נתונים

שורות: כל שורה בטבלה מייצגת פרוסה.

עמודות:

  עמודה 0 עמודה 1 ... עמודה N (אופציונלי)
מטרה: תוויות של פלח ערכי פרוסה ... תפקידים אופציונליים
סוג הנתונים: string number ...
תפקיד: דומיין נתונים ...
תפקידי עמודות אופציונליים: ללא ללא ...

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

שם
צבע רקע

צבע הרקע של האזור הראשי בתרשים. הוא יכול להיות מחרוזת צבע פשוטה ב-HTML, לדוגמה: 'red' או '#00cc00', או אובייקט עם המאפיינים הבאים.

Type: מחרוזת או אובייקט
ברירת מחדל: 'לבן'
הפעלה ברקע

צבע הגבול של התרשים, כמחרוזת צבע של HTML.

סוג: מחרוזת
ברירת מחדל: '#666'
colorColor.stringWidth

רוחב הגבול, בפיקסלים.

סוג: מספר
ברירת מחדל: 0
backgroundColor.fill

צבע המילוי של התרשים, כמחרוזת צבע של HTML.

סוג: מחרוזת
ברירת מחדל: 'לבן'
תרשים גבולות

אובייקט עם חברי קבוצה כדי להגדיר את המיקום והגודל של אזור התרשים (שבו התרשים עצמו משורטט, מלבד הציר והאגדות). ניתן להשתמש בשני פורמטים: מספר, או מספר ואחריו %. מספר פשוט הוא ערך בפיקסלים; מספר ואחריו % הוא אחוז. לדוגמה: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: אובייקט
ברירת מחדל: null
ChartArea.backgroundColor
צבע הרקע של אזור התרשים. כשמשתמשים במחרוזת, היא יכולה להיות מחרוזת הקסדצימלית (למשל, ' #fdc') או בשם של צבע אנגלי. כשאובייקט נמצא בשימוש, אפשר לספק את המאפיינים הבאים:
  • stroke: הצבע, מסופק כמחרוזת הקסדצימלית או שם צבע באנגלית.
  • strokeWidth: אם תצוין מסגרת מסביב לאזור התרשים ברוחב (ובצבע של stroke).
Type: מחרוזת או אובייקט
ברירת מחדל: 'לבן'
ChartArea.left

מה המרחק מהתרשים מהגבול השמאלי?

סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
התרשיםArea.top

מה המרחק מהתרשים מהגבול העליון?

סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
ChartArea.width

רוחב האזור בתרשים.

סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
ChartArea.height

גובה שטח התרשים.

סוג: מספר או מחרוזת
ברירת מחדל: אוטומטי
צבעים

הצבעים שיש להשתמש בהם ברכיבי התרשים. מערך של מחרוזות, כאשר כל רכיב הוא מחרוזת צבע HTML. לדוגמה: colors:['red','#004411'].

סוג: מערך של מחרוזות
ברירת מחדל: צבעי ברירת מחדל
enableInteractive

האם התרשים כולל אירועים מבוססי-משתמשים או מגיב לאינטראקציה של משתמש. אם ההעדפה מקבלת את הערך False, התרשים לא יציג אירועי 'select' או אירועים אחרים מבוססי-אינטראקציות (אבל יגרום לתיעוד של אירועי הכנה או שגיאות), ולא יציג טקסט מרחף או ישתנה בדרך אחרת בהתאם לקלט של המשתמשים.

סוג: בוליאני
ברירת מחדל: נכון
גודל גופן

גודל הגופן המוגדר כברירת מחדל, בפיקסלים, של כל הטקסט בתרשים. אפשר לשנות זאת באמצעות המאפיינים של רכיבי תרשים ספציפיים.

סוג: מספר
ברירת מחדל: אוטומטי
שם גופן

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

סוג: מחרוזת
ברירת מחדל: 'xls'
forceIFrame

משרטט את התרשים בתוך מסגרת מוטבעת. (שימו לב שב-IE8 המערכת מתעלמת מהאפשרות הזו. כל התרשימים של IE8 מצוירים ב-i-frames).

סוג: בוליאני
ברירת מחדל: False
גובה

גובה התרשים, בפיקסלים.

סוג: מספר
ברירת מחדל: הגובה של הרכיב שמכיל את הסרטון
שווה ל-3 י'

אם True, מוצג תרשים תלת-מימדי.

סוג: בוליאני
ברירת מחדל: False
מקרא

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

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: אובייקט
ברירת מחדל: null
האגדה

היישור של המקרא. יכול להיות אחת מהאפשרויות הבאות:

  • 'start' - מיושר לתחילת האזור שהוקצה למקרא.
  • 'center' - במרכז אזור ההקצאה של המקרא.
  • 'end' - מיושר לסוף האזור שהוקצה למקרא.

ההתחלה, המרכז והסוף הם יחסיים לסגנון של המקרא - אנכי או אופקי. לדוגמה, במקרא 'right', 'start' ו-'end' נמצאים בחלק העליון ובחלק התחתון בהתאמה, עבור המקרא 'top', 'start' ו-'end' יופיעו בפינה הימנית ובפינה השמאלית של האזור, בהתאמה.

ערך ברירת המחדל תלוי במיקום המקרא. עבור אגדות 'תחתיות', ברירת המחדל היא 'center', ואילו אגדות אחרות מוגדרות כברירת מחדל ל-'start'.

סוג: מחרוזת
ברירת מחדל: אוטומטי
אגדה

מיקום המקרא. יכול להיות אחת מהאפשרויות הבאות:

  • 'bottom' - מציגה את המקרא מתחת לתרשים.
  • 'labeled' - שרטוט קווים שמחברים פרוסות לערכי הנתונים שלהם.
  • 'left' - מציג את המקרא משמאל לתרשים.
  • 'none' - לא מוצג מקרא.
  • 'right' - מציג את המקרא מימין לתרשים.
  • 'top' (למעלה) – הצגת המקרא מעל התרשים.
סוג: מחרוזת
ברירת מחדל: 'ימין'
האגדה.maxLines

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

האפשרות הזו פועלת כרגע רק כש-אגד.position הוא 'top' (למעלה).

סוג: מספר
ברירת מחדל: 1
style.textStyle

אובייקט שמציין את סגנון הטקסט של המקרא. לאובייקט יש את הפורמט הבא:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

השדה color יכול להיות כל מחרוזת צבע HTML, לדוגמה: 'red' או '#00cc00'. למידע נוסף יש לעיין ב-fontName וב-fontSize.

Type: אובייקט
ברירת מחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
פאיול

אם המספר בין 0 ל-1, מוצג תרשים טבעת. החור עם רדיוס שווה ל-number כפול רדיוס התרשים.

סוג: מספר
ברירת מחדל: 0
עוגה צבעונית

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

סוג: מחרוזת
ברירת מחדל: 'לבן'
עוגת פאי

תוכן הטקסט המוצג בפרוסה. יכול להיות אחת מהאפשרויות הבאות:

  • 'percentage' – אחוז גודל הנתח מתוך הסה"כ.
  • 'value' - הערך הכמותי של הפלח.
  • 'label' - שם הפלח.
  • 'none' – לא מוצג טקסט.
סוג: מחרוזת
ברירת מחדל: 'אחוזים'
סגנון עוגה

אובייקט שמציין את סגנון הטקסט של הפלח. לאובייקט יש את הפורמט הבא:

{color: <string>, fontName: <string>, fontSize: <number>}

השדה color יכול להיות כל מחרוזת צבע HTML, לדוגמה: 'red' או '#00cc00'. למידע נוסף יש לעיין ב-fontName וב-fontSize.

Type: אובייקט
ברירת מחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
עוגת פאי

הזווית, במעלות, כדי לסובב את התרשים. הגדרת ברירת המחדל של 0 תכוון את הקצה השמאלי ביותר של הפלח הראשון ישירות למעלה.

סוג: מספר
ברירת מחדל: 0
הפוך קטגוריות

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

סוג: בוליאני
ברירת מחדל: False
pieResidueSliceColor

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

סוג: מחרוזת
Default: '#ccc'
תווית עוגה

תווית לפלח השילוב שמכיל את כל הפרוסות מתחת ל-slicevisibleThreshold.

סוג: מחרוזת
ברירת מחדל: 'אחר'
פרוסות

מערך אובייקטים, כאשר כל אחד מהם מתאר את הפורמט של הפרוסה המתאימה בעוגה. כדי להשתמש בערכי ברירת מחדל לפלח, צריך לציין אובייקט ריק (למשל {}). אם לא מוגדר ערך או פרוסה, המערכת תשתמש בערך הגלובלי. כל אובייקט תומך במאפיינים הבאים:

  • color - הצבע שמשמש לפלח הזה. יש לציין מחרוזת חוקית של צבע HTML.
  • offset - מה המרחק בין הפרוסה משאר העוגה, מ-0.0 (לא בכלל) ל-1.0 (רדיוס העוגה).
  • textStyle - מבטלת את pieSliceTextStyle הגלובלי עבור הפלח הזה.

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

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
Type: מערך של אובייקטים, או אובייקט עם אובייקטים בתוך רכיב
ברירת מחדל: {}
סף חשיפה

הערך השבר של העוגה, שמתחתיו לא תוצג פרוסה בנפרד. כל הפרוסות שלא עברו את הסף הזה ישולבו לפרוסה "אחרת", שהגודל שלה הוא הסכום הכולל של כל הגדלים שלהן. ברירת המחדל היא לא להציג בנפרד מקטעים שגודלם קטן מחצי מעלות. 

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
סוג: מספר
ברירת מחדל: חצי מעלה (0.5/360 או 1/720 או .0014)
שם פריט

טקסט להצגה מעל לתרשים.

סוג: מחרוזת
ברירת מחדל: ללא שם
סגנון טקסט

אובייקט שמציין את סגנון הטקסט של הכותרת. לאובייקט יש את הפורמט הבא:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

השדה color יכול להיות כל מחרוזת צבע HTML, לדוגמה: 'red' או '#00cc00'. למידע נוסף יש לעיין ב-fontName וב-fontSize.

Type: אובייקט
ברירת מחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
הסבר קצר

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type: אובייקט
ברירת מחדל: null
description.ignoreBounds

אם המדיניות מוגדרת כ-true, שרטוטים של הסברים קצרים יזרמו אל מחוץ לגבולות התרשים מכל הצדדים.

הערה: האפשרות הזו רלוונטית רק להסברים קצרים ב-HTML. אם אפשרות זו מופעלת עם הסברים בפורמט SVG, גלישת הנתונים מעבר לגבולות התרשים תיחתך. פרטים נוספים זמינים במאמר התאמה אישית של תוכן של הסברים קצרים.

סוג: בוליאני
ברירת מחדל: False
overview.isHtml

אם היא מוגדרת כ-true, משתמשים בהסברים קצרים על HTML (ולא ברינדור SVG) פרטים נוספים זמינים במאמר התאמה אישית של תוכן של הסברים קצרים.

הערה: ההתאמה האישית של תוכן ההסבר הקצר ב-HTML באמצעות תפקיד נתוני העמודה של ההסבר הקצר לא נתמכת על ידי התצוגה החזותית תרשים בועות.

סוג: בוליאני
ברירת מחדל: False
Description.showColorCode

אם True, מציגים ריבועים צבעוניים ליד פרטי הפלח בהסבר הקצר.

סוג: בוליאני
ברירת מחדל: False
Description.text

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

  • 'שניהם' - [ברירת מחדל] הצגת הערך המוחלט של הפלח והאחוז מתוך השלם.
  • 'value' – הצגה רק של הערך המוחלט של הפלח.
  • 'percentpercent' (הצגת אחוז) - הצגה רק של האחוז המיוצג במלואו על ידי הפלח.
סוג: מחרוזת
ברירת מחדל: 'שניהם'
overview.textStyle

אובייקט שמציין את סגנון הטקסט של ההסבר הקצר. לאובייקט יש את הפורמט הבא:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

השדה color יכול להיות כל מחרוזת צבע HTML, לדוגמה: 'red' או '#00cc00'. למידע נוסף יש לעיין ב-fontName וב-fontSize.

Type: אובייקט
ברירת מחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
overview.trigger

האינטראקציה של המשתמש שגרמה להצגת ההסבר הקצר:

  • 'מיקוד' - ההסבר הקצר יוצג כאשר המשתמש יעביר את העכבר מעל לרכיב.
  • 'none' – ההסבר הקצר לא יוצג.
  • 'selection' – ההסבר הקצר יוצג כשהמשתמש יבחר את הרכיב.
סוג: מחרוזת
ברירת מחדל: 'התמקדות'
רוחב

רוחב התרשים, בפיקסלים.

סוג: מספר
ברירת מחדל: הרוחב של הרכיב שמכיל

שיטות

שיטה
draw(data, options)

משרטט את התרשים. התרשים מקבל קריאות נוספות לשיטה רק אחרי האירוע ready שמופעל. Extended description

סוג החזרה: אין
getAction(actionID)

מחזירה את אובייקט הפעולה של ההסבר הקצר עם actionID המבוקש.

סוג החזרה: אובייקט
getBoundingBox(id)

מחזירה אובייקט שמכיל את החלק השמאלי, העליון, הרוחב והגובה של רכיב התרשים id. הפורמט של id לא מתועד עדיין (הם ערכי ההחזרה של רכיבי handler של אירועים), אבל הנה כמה דוגמאות:

var cli = chart.getChartLayoutInterface();

גובה אזור התרשים
cli.getBoundingBox('chartarea').height
רוחב הסרגל השלישי בסדרה הראשונה של תרשים עמודות או עמודה
cli.getBoundingBox('bar#0#2').width
תוחמים של הטריז החמישי של תרשים עוגה
cli.getBoundingBox('slice#4')
תיבה מוגדרת של נתוני התרשים של תרשים אנכי (לדוגמה, עמודה):
cli.getBoundingBox('vAxis#0#gridline')
תיבה מוגדרת של נתוני התרשים של תרשים אופקי (למשל, עמודה):
cli.getBoundingBox('hAxis#0#gridline')

הערכים יחסיים למאגר של התרשים. כדאי לקרוא לזה אחרי שהתרשים משורטט.

סוג החזרה: אובייקט
getChartAreaBoundingBox()

החזרת אובייקט שמכיל את תוכן התרשים, החלק השמאלי, העליון, הרוחב והגובה שלו (כלומר, לא כולל תוויות ומקרא):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

הערכים יחסיים למאגר של התרשים. כדאי לקרוא לזה אחרי שהתרשים משורטט.

סוג החזרה: אובייקט
getChartLayoutInterface()

מחזירה אובייקט שמכיל מידע על המיקום של התרשים ועל הרכיבים שלו.

אפשר לקרוא לשיטות הבאות על האובייקט שהוחזר:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

כדאי לקרוא לזה אחרי שהתרשים משורטט.

סוג החזרה: אובייקט
getHAxisValue(xPosition, optional_axis_index)

מחזירה את הערך של הנתונים האופקיים ב-xPosition, שהוא קיזוז פיקסלים מהקצה השמאלי של הקונטיינר של התרשים. יכול להיות שלילי.

דוגמה: chart.getChartLayoutInterface().getHAxisValue(400)

כדאי לקרוא לזה אחרי שהתרשים משורטט.

סוג החזרה: מספר
getImageURI()

מחזירה את התרשים בהמשכים כ-URI של תמונה.

כדאי לקרוא לזה אחרי שהתרשים משורטט.

מידע נוסף זמין במאמר הדפסה של תרשימי PNG.

סוג החזרה: מחרוזת
getSelection()

היא מחזירה מערך של ישויות התרשים שנבחרו. ישויות ניתנות לבחירה הן פלחים ורשומות מקרא. בתרשים הזה אפשר לבחור רק ישות אחת בכל רגע נתון. Extended description .

סוג החזרה: מערך של רכיבי בחירה
getVAxisValue(yPosition, optional_axis_index)

הפונקציה מחזירה את ערך הנתונים האנכיים ב-yPosition, שהוא קיזוז פיקסלים מהקצה העליון של מאגר התרשים. יכול להיות שלילי.

דוגמה: chart.getChartLayoutInterface().getVAxisValue(300)

כדאי לקרוא לזה אחרי שהתרשים משורטט.

סוג החזרה: מספר
getXLocation(dataValue, optional_axis_index)

מחזירה את קואורדינטת ה-x של הפיקסל (dataValue) ביחס לקצה השמאלי של הקונטיינר של התרשים.

דוגמה: chart.getChartLayoutInterface().getXLocation(400)

כדאי לקרוא לזה אחרי שהתרשים משורטט.

סוג החזרה: מספר
getYLocation(dataValue, optional_axis_index)

מחזירה את קואורדינטת ה-y הפיקסל של dataValue ביחס לקצה העליון של הקונטיינר של התרשים.

דוגמה: chart.getChartLayoutInterface().getYLocation(300)

כדאי לקרוא לזה אחרי שהתרשים משורטט.

סוג החזרה: מספר
removeAction(actionID)

פעולה זו תסיר מהתרשים את פעולת ההסבר הקצר עם actionID המבוקשים.

סוג החזרה: none
setAction(action)

מגדירה פעולת הסבר קצר שהמשתמש יבצע לאחר לחיצה על טקסט הפעולה.

השיטה setAction מתייחסת לאובייקט בתור פרמטר הפעולה. האובייקט צריך לציין 3 מאפיינים: id – המזהה של הפעולה שמוגדרת, text – הטקסט שאמור להופיע בהסבר הקצר על הפעולה, ו-action – הפונקציה שאמורה לפעול כשהמשתמש לוחץ על טקסט הפעולה.

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

סוג החזרה: none
setSelection()

בחירת ישויות התרשים שצוינו. ביטול כל בחירה קודמת. ישויות ניתנות לבחירה הן פלחים ורשומות מקרא. בתרשים הזה אפשר לבחור רק ישות אחת בכל פעם. Extended description .

סוג החזרה: אין
clearChart()

ניקוי התרשים ושחרור כל המשאבים שהוקצו לו.

סוג החזרה: אין

אירועים

מידע נוסף על השימוש באירועים האלה מפורט במאמרים אינטראקטיביות בסיסית, אירועי טיפול ואירועי הפעלה.

שם
click

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

נכסים: targetID
error

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

מאפיינים: מזהה, הודעה
onmouseover

מופעל כשהמשתמש מעביר את העכבר מעל ליישות חזותית. מחזירה את האינדקסים של השורה והעמודה של הרכיב המתאים בטבלת הנתונים. פילוח של רשומה או מקרא מוגדר מתואם לשורה בטבלת הנתונים (אינדקס העמודה הוא null).

מאפיינים: שורה, עמודה
onmouseout

מופעל כשהמשתמש מעביר את העכבר מעל ליישות ויזואלית. מחזירה את האינדקסים של השורה והעמודה של הרכיב המתאים בטבלת הנתונים. פילוח של רשומה או מקרא מוגדר מתואם לשורה בטבלת הנתונים (אינדקס העמודה הוא null).

מאפיינים: שורה, עמודה
ready

התרשים מוכן לקריאות חיצוניות לשיטה אם רוצים ליצור אינטראקציה עם התרשים ועם שיטות השיחה אחרי ששרטטים אותו, צריך להגדיר למאזינים אירוע זה לפני שמתקשרים אל השיטה draw, ולהתקשר אליהם רק אחרי שהאירוע הופעל.

מאפיינים: ללא
select

מופעל כשהמשתמש לוחץ על ישות חזותית. כדי לראות מה נבחר, צריך להתקשר למספר getSelection().

מאפיינים: ללא

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

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