التصور: رسم بياني بالنقاط المبعثرة

نظرة عامة

ترسم المخططات المبعثرة النقاط على رسم بياني. وعندما يمرِّر المستخدم مؤشر الماوس فوق النقاط، يتم عرض تلميحات تتضمّن مزيدًا من المعلومات.

يتم عرض مخططات النقاط المبعثرة من Google داخل المتصفّح باستخدام 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([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

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

تغيير الأشكال وتحريكها

بشكل افتراضي، تمثل المخططات المبعثرة عناصر مجموعة البيانات لديك باستخدام الدوائر. يمكنك تحديد أشكال أخرى باستخدام الخيار pointShape، كما هو موضّح بالتفصيل في مستندات تخصيص النقاط.

كما هو الحال مع معظم "الرسوم البيانية الأخرى" من Google، يمكنك إضافة تأثيرات حركية إليها باستخدام الأحداث. يمكنك إضافة أداة معالجة الأحداث لأول حدث من نوع ready، وإعادة رسم الرسم البياني بعد إجراء التعديلات المطلوبة. بعد حدث ready الأول، يمكنك الاستماع إلى حدث animationfinish لتكرار العملية، ما يؤدي إلى ظهور صورة متحركة مستمرة. يتحكّم الخيار animation في طريقة إعادة الرسم: فورًا (بدون رسم متحرك) أو بسلاسة، أو مدى سرعة وسلوك الإجراء بسلاسة.

الأجزاء الجيدة
  var options = {
    legend: 'none',
    colors: ['#087037'],
    pointShape: 'star',
    pointSize: 18,
    animation: {
      duration: 200,
      easing: 'inAndOut',
    }
  };

  // Start the animation by listening to the first 'ready' event.
  google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

  // Control all other animations by listening to the 'animationfinish' event.
  google.visualization.events.addListener(chart, 'animationfinish', randomWalk);
  ...
  function randomWalk() {
    ...
  }
رمز 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 = new google.visualization.DataTable();
      data.addColumn('number');
      data.addColumn('number');

      var radius = 100;
      for (var i = 0; i < 6.28; i += 0.1) {
        data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
      }

      // Our central point, which will jiggle.
      data.addRow([0, 0]);

      var options = {
        legend: 'none',
        colors: ['#087037'],
        pointShape: 'star',
        pointSize: 18,
        animation: {
          duration: 200,
          easing: 'inAndOut',
        }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));

      // Start the animation by listening to the first 'ready' event.
      google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

      // Control all other animations by listening to the 'animationfinish' event.
      google.visualization.events.addListener(chart, 'animationfinish', randomWalk);

      chart.draw(data, options);

      function randomWalk() {
        var x = data.getValue(data.getNumberOfRows() - 1, 0);
        var y = data.getValue(data.getNumberOfRows() - 1, 1);
        x += 5 * (Math.random() - 0.5);
        y += 5 * (Math.random() - 0.5);
        if (x * x + y * y > radius * radius) {
          // Out of bounds. Bump toward center.
          x += Math.random() * ((x < 0) ? 5 : -5);
          y += Math.random() * ((y < 0) ? 5 : -5);
        }
        data.setValue(data.getNumberOfRows() - 1, 0, x);
        data.setValue(data.getNumberOfRows() - 1, 1, y);
        chart.draw(data, options);
      }
    }
  </script>
  </head>
  <body>
    <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

إنشاء مخططات مبعثرة متعددة الأبعاد

في عام 2014، أعلنت Google عن إرشادات تهدف إلى توفير مظهر وطابع مشتركَين على جميع مواقعها وتطبيقاتها (مثل تطبيقات Android) التي تعمل على منصات Google الأساسية. ونُطلق على هذا الجهد اسم Material Design. وسنوفّر إصدارات "Material" (المادة) من جميع رسوماتنا البيانية الأساسية، ويمكنك استخدامها إذا أعجبك الشكل.

يشبه إنشاء "مخطط مبعثر" للمواد" إنشاء "مخطط مبعثر" "كلاسيكي". عليك تحميل واجهة برمجة التطبيقات Google Visualization API (مع أنها باستخدام حزمة 'scatter' بدلاً من حزمة 'corechart')، حدد جدول البيانات، ثم أنشئ كائنًا (لكن من الفئة google.charts.Scatter بدلاً من google.visualization.ScatterChart).

ملاحظة: لن تعمل المخططات المتعددة الأبعاد في الإصدارات القديمة من متصفح Internet Explorer. (لا يتوافق الإصدار IE8 والإصدارات الأقدم مع الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) التي تتطلّبها رسومات بيانية متعددة الأبعاد.)

تتضمن الرسومات البيانية للنقاط المبعثرة العديد من التحسينات الصغيرة مقارنةً بالمخططات الكلاسيكية للنقاط المبعثرة، بما في ذلك تغيير معدل التعتيم لسهولة قراءة النقاط المتداخلة، وتحسين لوحة الألوان، وتنسيق التسميات بشكل أكثر وضوحًا، والمسافات التلقائية الأكثر دقّة، وخطوط الشبكة والعناوين الأكثر وضوحًا (وإضافة الترجمة). 

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

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67], [1, 88], [2, 77],
          [3, 93], [4, 85], [5, 91],
          [6, 71], [7, 78], [8, 93],
          [9, 80], [10, 82],[0, 75],
          [5, 80], [3, 90], [1, 72],
          [5, 75], [6, 68], [7, 98],
          [3, 82], [9, 94], [2, 79],
          [2, 95], [2, 86], [3, 67],
          [4, 60], [2, 80], [6, 92],
          [2, 81], [8, 79], [9, 83],
          [3, 75], [1, 80], [3, 71],
          [3, 89], [4, 92], [5, 85],
          [6, 92], [7, 78], [6, 95],
          [3, 81], [0, 64], [4, 85],
          [2, 83], [3, 96], [4, 77],
          [5, 89], [4, 89], [7, 84],
          [4, 92], [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          hAxis: {title: 'Hours Studied'},
          vAxis: {title: 'Grade'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
      }

وتتوفّر مخططات المواد في إصدار تجريبي. يُعدّ المظهر والتفاعل نهائيين إلى حدّ كبير، ولكن العديد من الخيارات المتوفّرة في "الرسوم البيانية الكلاسيكية" ليست متوفّرة بعد فيها. يمكنك العثور على قائمة بالخيارات غير المتوافقة بعد في هذه المشكلة.

بالإضافة إلى ذلك، لم يتم الانتهاء من طريقة الإعلان عن الخيارات، لذلك إذا كنت تستخدم أيًا من الخيارات الكلاسيكية، يجب تحويلها إلى خيارات أساسية عن طريق استبدال هذا السطر:

chart.draw(data, options);

...بهذا النص:

chart.draw(data, google.charts.Scatter.convertOptions(options));

رسوم بيانية ثنائية من Y

قد تحتاج أحيانًا إلى عرض سلسلتَين في رسم بياني بالنقاط المبعثرة يحتويان على محورَين صاديَين مستقلَّين: محور أيسر لسلسلة ومحور أيمن لمحور ص آخر:

يُرجى العِلم أنّه لا يتم فقط تصنيف المحورَين الصاديَين بشكل مختلف ("درجة الامتحان النهائي" و"الساعات التي خضعت للدراسة")، بل يتضمّن كلّ منهما مقاييس وخطوط شبكة مستقلة. إذا أردت تخصيص هذا السلوك، استخدِم خيارات vAxis.gridlines.

في الرمز الوارد أدناه، يحدّد الخياران axes وseries معًا الشكل المزدوج Y للرسم البياني. يحدّد الخيار series المحور المطلوب استخدامه لكل منهما ('final grade' و'hours studied'، وليس من الضروري أن يكون لهما أي علاقة بأسماء الأعمدة في جدول البيانات). بعد ذلك، سيجعل الخيار axes هذا الرسم البياني على شكل رسم بياني ثنائي Y، مع وضع المحور 'Final Exam Grade' على اليسار والمحور 'Hours Studied' على اليمين. 

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

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Student ID');
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
          [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
          [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
          [9, 9, 80],  [10, 10, 82], [11, 0, 75],
          [12, 5, 80], [13, 3, 90],  [14, 1, 72],
          [15, 5, 75], [16, 6, 68],  [17, 7, 98],
          [18, 3, 82], [19, 9, 94],  [20, 2, 79],
          [21, 2, 95], [22, 2, 86],  [23, 3, 67],
          [24, 4, 60], [25, 2, 80],  [26, 6, 92],
          [27, 2, 81], [28, 8, 79],  [29, 9, 83]
        ]);

        var materialOptions = {
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          width: 800,
          height: 500,
          series: {
            0: {axis: 'hours studied'},
            1: {axis: 'final grade'}
          },
          axes: {
            y: {
              'hours studied': {label: 'Hours Studied'},
              'final grade': {label: 'Final Exam Grade'}
            }
          }
        };

        var classicOptions = {
          width: 800,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Students\' Final Grades - based on hours studied',

          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Hours Studied'},
            1: {title: 'Final Exam Grade'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Scatter(chartDiv);
          materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ScatterChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };

قائمة الأكثر رواجًا (X)

ملاحظة: لا تتوفّر محاور الجزء العلوي X إلا في الرسوم البيانية متعددة الأبعاد (أي الرسومات البيانية التي تحتوي على الحزمة scatter).

إذا كنت تريد وضع تصنيفات المحور س وعنوانه أعلى الرسم البياني بدلاً من الجزء السفلي، يمكنك إجراء ذلك في الرسوم البيانية متعددة الأبعاد باستخدام الخيار axes.x: 

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

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67],  [1, 88],  [2, 77],
          [3, 93],  [4, 85],  [5, 91],
          [6, 71],  [7, 78],  [8, 93],
          [9, 80],  [10, 82], [0, 75],
          [5, 80],  [3, 90],  [1, 72],
          [5, 75],  [6, 68],  [7, 98],
          [3, 82],  [9, 94],  [2, 79],
          [2, 95],  [2, 86],  [3, 67],
          [4, 60],  [2, 80],  [6, 92],
          [2, 81],  [8, 79],  [9, 83],
          [3, 75],  [1, 80],  [3, 71],
          [3, 89],  [4, 92],  [5, 85],
          [6, 92],  [7, 78],  [6, 95],
          [3, 81],  [0, 64],  [4, 85],
          [2, 83],  [3, 96],  [4, 77],
          [5, 89],  [4, 89],  [7, 84],
          [4, 92],  [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          axes: {
            x: {
              0: {side: 'top'}
            }
          }
        };

        var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
      }

جارٍ التحميل

اسم الحزمة google.charts.load هو "corechart"، واسم فئة العرض المرئي هو google.visualization.ScatterChart. 

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

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

في ما يتعلّق بمخططات مبعثرة المواد، يكون اسم الحزمة google.charts.load هو "scatter"، واسم فئة الرسم البياني google.charts.Scatter. 

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

  var visualization = new google.charts.Scatter(container);

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

الصفوف: يمثّل كل صف في الجدول مجموعة من نقاط البيانات التي لها قيمة المحور "س" نفسها.

الأعمدة:

  العمود 0 العمود 1 ... العمود N
الغرض: قيم نقطة البيانات "س" قيم السلسلة 1 Y ... قيم السلسلة N Y
نوع البيانات: سلسلة أو رقم أو التاريخ/datetime/timeofday سلسلة أو رقم أو التاريخ/datetime/timeofday ... سلسلة أو رقم أو التاريخ/datetime/timeofday
الدور: البيانات البيانات ... البيانات
أدوار الأعمدة الاختيارية:

بدون قفل

 ...

لتحديد سلاسل متعددة، حدِّد عمودَين أو أكثر على المحور Y، وحدِّد قيم Y في عمود Y واحد فقط:

قيم X قيم السلسلة 1 Y قيم السلسلة 2 Y
10 null 75
20 null 18
33 null 22
55 16 null
14 61 null
48 3 null

 

خيارات الإعداد

الاسم
aggregationTarget
كيفية تجميع اختيارات البيانات المتعددة في تلميحات:
  • 'category': تجميع البيانات المحدّدة حسب القيمة س
  • 'series': تجميع البيانات المحدّدة حسب السلسلة
  • 'auto': تجميع البيانات المحددة حسب القيمة "س" إذا كانت جميع الاختيارات تحتوي على قيمة x نفسها، وحسب السلسلة في الحالات الأخرى.
  • 'none': عرض تلميح واحد فقط لكل اختيار.
سيتم غالبًا استخدام aggregationTarget جنبًا إلى جنب مع selectionMode وtooltip.trigger، على سبيل المثال: 
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
النوع: سلسلة
تلقائي: "تلقائي"
animation.duration

مدة الحركة بالمللي ثانية. لمعرفة التفاصيل، يمكنك الاطّلاع على مستندات الصور المتحركة.

النوع: رقم
القيمة التلقائية: 0
animation.easing

دالة التخفيف المطبقة على الصورة المتحركة. تتوفّر الخيارات التالية:

  • "خطي" - سرعة ثابتة
  • "داخل" - إرخاء في البدء - البدء ببطء والسرعة.
  • "إنهاء" - إرخاء - البدء بسرعة وتبطئ.
  • "inAndOut" - يبدأ العمل ببطء ويبدأ بالسرعة ثم بطئ.
النوع: سلسلة
تلقائي: "خطي"
animation.startup

تحدِّد هذه السياسة ما إذا كان الرسم البياني سيتم تحريكه عند الرسم الأولي. إذا كانت القيمة true، سيبدأ الرسم البياني عند خط الأساس، وسيتحرك إلى حالته النهائية.

النوع: قيمة منطقية
خطأ تلقائي
annotations.boxStyle

بالنسبة إلى الرسوم البيانية التي تتيح استخدام التعليقات التوضيحية، يتحكّم الكائن annotations.boxStyle في مظهر المربعات المحيطة بالتعليقات التوضيحية: 

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

هذا الخيار متاح حاليًا للمخططات المساحية والشريطية والعمودية والمختلطة والخطية والمخطَّطات المبعثرة. ولا يتوافق مع الرسم البياني للتعليقات التوضيحية.

Type: كائن
الإعداد التلقائي: قيمة خالية
annotations.datum
بالنسبة إلى الرسوم البيانية التي تتيح استخدام التعليقات التوضيحية، يتيح لك الكائن annotations.datum إلغاء خيار "رسومات Google البيانية" للتعليقات التوضيحية المقدَّمة لعناصر البيانات الفردية (مثل القيم التي تظهر مع كل شريط في رسم بياني شريطي). يمكنك التحكّم في اللون باستخدام السمة annotations.datum.stem.color، وطول الساق باستخدام annotations.datum.stem.length، والنمط باستخدام annotations.datum.style.
Type: كائن
الإعداد التلقائي:اللون هو "أسود"، والطول هو 12، والنمط هو "النقطة".
annotations.domain
بالنسبة إلى الرسوم البيانية التي تتيح استخدام التعليقات التوضيحية، يتيح لك الكائن annotations.domain إلغاء خيار "الرسوم البيانية من Google" بالنسبة إلى التعليقات التوضيحية المقدَّمة للنطاق (المحور الرئيسي للرسم البياني، مثل المحور "س" على رسم بياني خطّي نموذجي). يمكنك التحكّم في اللون باستخدام السمة annotations.domain.stem.color، وطول الساق باستخدام annotations.domain.stem.length، والنمط باستخدام annotations.domain.style.
Type: كائن
الوضع التلقائي:اللون هو "أسود"، والطول هو 5، والنمط هو "نقطة".
annotations.highContrast
بالنسبة إلى الرسوم البيانية التي تتيح استخدام التعليقات التوضيحية، تتيح لك القيمة المنطقية annotations.highContrast إلغاء اختيار لون التعليق التوضيحي في "مخططات Google". تكون السمة annotations.highContrast صحيحة بشكل تلقائي، ما يؤدي إلى اختيار لون للتعليق التوضيحي مع تباين جيد في الرسومات البيانية، مثل ألوان فاتحة على الخلفيات الداكنة وألوان فاتحة على الخلفيات الداكنة. إذا ضبطت annotations.highContrast على "خطأ" ولم تحدّد لون التعليق التوضيحي الخاص بك، ستستخدم "مخططات Google" لون السلسلة التلقائي للتعليق التوضيحي:
النوع: قيمة منطقية
القيمة التلقائية:صحيح
annotations.stem
بالنسبة إلى الرسوم البيانية التي تتيح استخدام التعليقات التوضيحية، يتيح لك الكائن annotations.stem إلغاء خيار "الرسوم البيانية من Google" لنمط واجهة المستخدم. يمكنك التحكّم في اللون باستخدام السمة annotations.stem.color وطول الساق باستخدام annotations.stem.length. يُرجى العِلم أنّ خيار طول النص الأساسي لا يؤثر في التعليقات التوضيحية ذات النمط 'line': بالنسبة إلى التعليقات التوضيحية لمرجع 'line'، يكون طول النص الأساسي دائمًا مماثلاً لطول النص. وبالنسبة إلى التعليقات التوضيحية لنطاق 'line'، يمتد النص الأساسي ليشمل الرسم البياني بأكمله.
Type: كائن
تلقائي: اللون هو "أسود"، والطول هو 5 للتعليقات التوضيحية للنطاق و12 للتعليقات التوضيحية للمرجع.
annotations.style
بالنسبة إلى الرسوم البيانية التي تتيح استخدام التعليقات التوضيحية، يتيح لك الخيار annotations.style إلغاء اختيار نوع التعليق التوضيحي في "مخططات Google". ويمكن أن تكون إما 'line' أو 'point'.
النوع: سلسلة
الإعداد التلقائي: "نقطة"
annotations.textStyle
بالنسبة إلى الرسوم البيانية التي تتيح استخدام التعليقات التوضيحية، يتحكّم الكائن annotations.textStyle في مظهر نص التعليق التوضيحي: 
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

هذا الخيار متاح حاليًا للمخططات المساحية والشريطية والعمودية والمختلطة والخطية والمخطَّطات المبعثرة. ولا يتوافق مع الرسم البياني للتعليقات التوضيحية .

Type: كائن
الإعداد التلقائي: قيمة خالية
axisTitlesPosition

مكان وضع عناوين المحاور، مقارنة بمساحة الرسم البياني. القيم المسموح بها:

  • in - ارسم عناوين المحاور داخل منطقة المخطط.
  • out - رسم عناوين المحاور خارج مساحة المخطط.
  • بلا - حذف عناوين المحاور.
النوع: سلسلة
القيمة التلقائية: "out"
backgroundColor

لون الخلفية للمنطقة الرئيسية من الرسم البياني. يمكن أن تكون إما سلسلة لون HTML بسيطة، على سبيل المثال: 'red' أو '#00cc00'، أو كائنًا بالسمات التالية.

النوع: سلسلة أو كائن
الوضع التلقائي: "أبيض"
backgroundColor.stroke

لون حد الرسم البياني، كسلسلة لون HTML.

النوع: سلسلة
تلقائي: '#666'
backgroundColor.strokeWidth

عرض الحدود بالبكسل.

النوع: رقم
القيمة التلقائية: 0
backgroundColor.fill

لون تعبئة الرسم البياني، كسلسلة لون HTML.

النوع: سلسلة
الوضع التلقائي: "أبيض"
chart.title

بالنسبة إلى مخططات Material، يحدد هذا الخيار العنوان.

النوع: سلسلة
الإعداد التلقائي: قيمة خالية
chart.subtitle

بالنسبة إلى مخططات Material، يحدّد هذا الخيار العنوان الفرعي. يمكن استخدام الترجمة في "مخططات المواد" فقط.

النوع: سلسلة
الإعداد التلقائي: قيمة خالية
chartArea

كائن يحتوي على أعضاء لضبط موضع مساحة الرسم البياني وحجمها (حيث يتم رسم الرسم البياني نفسه، باستثناء المحور ووسائل الإيضاح). يمكنك استخدام تنسيقَين: رقم أو رقم متبوعًا بنسبة مئوية. والرقم البسيط هو قيمة بالبكسل، بينما يمثّل الرقم متبوعًا بنسبة مئوية نسبة مئوية. مثلاً: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: كائن
الإعداد التلقائي: قيمة خالية
chartArea.backgroundColor
لون خلفية الرسم البياني عند استخدام سلسلة، يمكن أن تكون إما سلسلة سداسية عشرية (مثل '#fdc') أو اسم لون إنجليزي. وعند استخدام كائن، يمكن توفير السمات التالية:
  • stroke: اللون، يتم تقديمه كسلسلة سداسية عشرية أو اسم اللون الإنجليزي.
  • strokeWidth: في حال توفّره، يتم رسم حدود حول مساحة الرسم البياني للعرض المحدَّد (وبلون stroke).
النوع: سلسلة أو كائن
الوضع التلقائي: "أبيض"
chartArea.left

مقدار المسافة لرسم الرسم البياني من الحد الأيسر.

النوع: رقم أو سلسلة
الإعداد التلقائي: تلقائي
chartArea.top

مقدار المسافة لرسم الرسم البياني من الحد العلوي.

النوع: رقم أو سلسلة
الإعداد التلقائي: تلقائي
chartArea.width

عرض مساحة الرسم البياني

النوع: رقم أو سلسلة
الإعداد التلقائي: تلقائي
chartArea.height

ارتفاع مساحة الرسم البياني

النوع: رقم أو سلسلة
الإعداد التلقائي: تلقائي
الألوان

الألوان المراد استخدامها لعناصر الرسم البياني تمثّل هذه السمة مصفوفة من السلاسل يكون فيها كل عنصر سلسلة لون HTML، على سبيل المثال: colors:['red','#004411'].

النوع: مصفوفة من السلاسل
تلقائي: الألوان التلقائية
تقاطع

تمثّل هذه السمة كائنًا يحتوي على سمات الشعر المتقاطع للرسم البياني.

Type: كائن
الإعداد التلقائي: قيمة خالية
crosshair.color

لون الشعر المتقاطع، معبرًا عنه إما باسم لون (على سبيل المثال، "أزرق") أو قيمة نموذج أحمر أخضر أزرق (مثل، "#adf").

النوع: سلسلة
النوع: التلقائي
crosshair.focused

كائن يحتوي على خصائص المؤشر المتقاطع عند التركيز عليه
مثال: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

Type: كائن
تلقائي: الإعداد التلقائي
crosshair.opacity

تعتيم الشعر المتقاطع، وتكون 0.0 شفافة تمامًا و1.0 معتمة تمامًا.

النوع: رقم
القيمة التلقائية: 1.0
crosshair.orientation

اتجاه المؤشر المتقاطع الذي يمكن أن يكون "عموديًا" للشعر الرأسي فقط أو "أفقي" للشعر الأفقي فقط أو "كلاهما" للشعر المتقاطع التقليدي.

النوع: سلسلة
تلقائي: "كلاهما"
crosshair.selected

كائن يحتوي على خصائص المؤشر المتقاطع عند التحديد.
مثال: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

Type: كائن
تلقائي: الإعداد التلقائي
crosshair.trigger

وقت عرض المؤشر المتقاطع: في 'focus' أو 'selection' أو 'both'.

النوع: سلسلة
تلقائي: "كلاهما"
curveType

تتحكّم هذه السياسة في منحنى الخطوط عندما لا يكون عرض الخط صفرًا. يمكن أن تكون الحالة واحدة مما يلي:

  • 'none' - خطوط مستقيمة بدون منحنى.
  • 'الوظيفة' - سيتم تجانس زوايا الخط.
النوع:string
تلقائي: 'بلا'
dataOpacity

شفافية نقاط البيانات، حيث تكون القيمة 1.0 معتمة تمامًا و0.0 شفافة تمامًا. في المخططات المبعثرة والمدرج التكراري والشريطي والعمودي، يشير ذلك إلى البيانات المرئية: النقاط في الرسم البياني بالنقاط المبعثرة والمستطيلات في الأخرى. في الرسوم البيانية التي يؤدي فيها اختيار البيانات إلى إنشاء نقطة، مثل الرسوم البيانية الخطية والمساحية، يشير هذا الحقل إلى الدوائر التي تظهر عند التمرير أو الاختيار. يُظهر الرسم البياني المختلط السلوكَين، وليس لهذا الخيار أي تأثير في الرسوم البيانية الأخرى. (لتغيير مستوى تعتيم خط الاتجاه، اطّلِع على تعتيم خط الاتجاه ).

النوع: رقم
القيمة التلقائية: 1.0
enableInteractivity

ما إذا كان الرسم البياني يعرض أحداثًا مستندة إلى المستخدمين أو يتفاعل مع تفاعل المستخدم إذا كانت القيمة "false"، لن يعرض الرسم البياني الأحداث "select" أو غيرها من الأحداث المستندة إلى التفاعل (ولكنه سيعرض أحداثًا جاهزة أو يعرض أخطاء)، ولن يعرض النصّ التمريري أو يتغيّر استنادًا إلى البيانات التي أدخلها المستخدِم.

النوع: قيمة منطقية
القيمة التلقائية:صحيح
مستكشِف

يتيح الخيار explorer للمستخدمين تحريك الرسوم البيانية في Google وتكبيرها أو تصغيرها. يوفّر explorer: {} سلوك المستكشف التلقائي، ما يتيح للمستخدمين تحريك أفقيًا وعموديًا عن طريق السحب، والتكبير والتصغير من خلال التمرير.

هذه الميزة تجريبية وقد تتغير في إصدارات مستقبلية.

ملاحظة: لا يعمل المستكشف إلا مع المحاور المتصلة (مثل الأرقام أو التواريخ).

Type: كائن
الإعداد التلقائي: قيمة خالية
explorer.actions

يدعم مستكشف مخططات Google ثلاثة إجراءات:

  • dragToPan: اسحب للتحريك حول الرسم البياني أفقيًا وعموديًا. للتحريك على طول المحور الأفقي فقط، استخدِم explorer: { axis: 'horizontal' }. وبالمثل بالنسبة للمحور الرأسي.
  • dragToZoom: السلوك التلقائي للمستكشف هو التكبير والتصغير عند انتقال المستخدم في الصفحة. في حال استخدام explorer: { actions: ['dragToZoom', 'rightClickToReset'] }، يؤدي السحب على مساحة مستطيلة إلى تكبير تلك المنطقة. وننصح باستخدام السمة rightClickToReset عند استخدام السمة dragToZoom. يمكنك الاطّلاع على explorer.maxZoomIn وexplorer.maxZoomOut وexplorer.zoomDelta للحصول على تخصيصات للتكبير أو التصغير.
  • rightClickToReset: يؤدي النقر بزر الماوس الأيمن على الرسم البياني إلى إعادته إلى مستوى التحريك والتكبير/التصغير الأصليَين.
النوع: مصفوفة من السلاسل
الإعداد التلقائي: ['dragToPan', 'rightClickToReset']
explorer.axis

وفقًا للإعدادات التلقائية، يمكن للمستخدمين التحريك أفقيًا وعموديًا عند استخدام الخيار explorer. إذا كنت تريد أن يجري المستخدمون العرض الشامل أفقيًا فقط، استخدِم explorer: { axis: 'horizontal' }. وبالمثل، تعمل ميزة explorer: { axis: 'vertical' } على تفعيل العرض الشامل العمودي فقط.

النوع: سلسلة
الوضع التلقائي: التحريك الأفقي والرأسي
explorer.keepInBounds

تلقائيًا، يمكن للمستخدمين التحريك في كل مكان، بغض النظر عن مكان البيانات. لضمان عدم استخدام المستخدمين أي عرض شامل خارج الرسم البياني الأصلي، استخدِم explorer: { keepInBounds: true }.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
explorer.maxZoomIn

الحد الأقصى الذي يمكن للمستكشف تكبيره. سيتمكّن المستخدمون تلقائيًا من التكبير بما يكفي لمشاهدة% 25 فقط من العرض الأصلي. يؤدي ضبط explorer: { maxZoomIn: .5 } إلى السماح للمستخدمين بالتكبير بعيدًا بما يكفي لمشاهدة نصف العرض الأصلي.

النوع: رقم
القيمة التلقائية: 0.25
explorer.maxZoomOut

الحد الأقصى الذي يمكن للمستكشف تصغيره. تلقائيًا، سيتمكّن المستخدمون من التصغير إلى حد كبير بما يكفي لأن يشغل الرسم البياني 1/4 المساحة المتاحة فقط. في حال ضبط السمة explorer: { maxZoomOut: 8 }، يتم السماح للمستخدمين بالتصغير بشكل كافٍ كي يشغل الرسم البياني 1/8 المساحة المتاحة فقط.

النوع: رقم
تلقائي: 4
explorer.zoomDelta

عندما يقوم المستخدمون بالتكبير أو التصغير، تحدِّد explorer.zoomDelta مقدار التكبير أو التصغير. كلما كان الرقم أصغر، كان التكبير والتصغير أكثر سلاسة وبطئًا.

النوع: رقم
الإعداد التلقائي: 1.5
fontSize

حجم الخط الافتراضي بالبكسل لجميع النص في الرسم البياني. ويمكنك إلغاء هذا الإجراء باستخدام سمات لعناصر محدَّدة في الرسم البياني.

النوع: رقم
تلقائي: تلقائي
fontName

واجهة الخط التلقائية لكل النص في الرسم البياني ويمكنك إلغاء هذا الإجراء باستخدام سمات لعناصر محدَّدة في الرسم البياني.

النوع: سلسلة
القيمة التلقائية: "Arial"
forceIFrame

لرسم الرسم البياني داخل إطار مضمّن. (يُرجى ملاحظة أنّه في IE8، يتم تجاهل هذا الخيار، ويتم رسم كل مخططات IE8 بالإطارات i-frames).

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
hAxis

كائن يحتوي على أعضاء لضبط عناصر متعددة للمحور الأفقي. لتحديد خصائص هذا الكائن، يمكنك استخدام التدوين الحرفي للكائن، كما هو موضّح هنا: 

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
Type: كائن
الإعداد التلقائي: قيمة خالية
hAxis.baseline

الخط القاعدي للمحور الأفقي.

النوع: رقم
تلقائي: تلقائي
hAxis.baselineColor

لون الخط القاعدي للمحور الأفقي. يمكن أن تكون أي سلسلة لون HTML، على سبيل المثال: 'red' أو '#00cc00'.

النوع: رقم
الوضع التلقائي: "أسود"
hAxis.direction

الاتجاه الذي تنمو به القيم على طول المحور الأفقي. حدِّد -1 لعكس ترتيب القيم.

النوع: 1 أو -1
تلقائي: 1
hAxis.format

سلسلة تنسيق لتصنيفات المحور الرقمي. هذه مجموعة فرعية من مجموعة أنماط ICU . على سبيل المثال، سيعرض {format:'#,###%'} القيم "1,000%" و"750%" و "50%" للقيم 10 و7.5 و0.5. ويمكنك أيضًا توفير أيٍّ مما يلي:

  • {format: 'none'}: يعرض أرقامًا بدون تنسيق (مثل 8000000)
  • {format: 'decimal'}: تعرض الأرقام مع فواصل الآلاف (مثل 8,000,000)
  • {format: 'scientific'}: يعرض الأرقام بالترميز العلمي (مثل 8e6)
  • {format: 'currency'}: يعرض الأرقام بالعملة المحلية (مثل 8,000,000.00 دولار)
  • {format: 'percent'}: يعرض الأرقام كنسب مئوية (مثل 800,000,000%)
  • {format: 'short'}: يعرض الأرقام المختصرة (مثل 8 مليون)
  • {format: 'long'}: يعرض الأرقام ككلمات كاملة (مثل 8 مليون)

يتم اشتقاق التنسيق الفعلي المطبَّق على التصنيف من اللغة التي تم تحميل واجهة برمجة التطبيقات بها. لمزيد من التفاصيل، راجِع تحميل الرسوم البيانية بلغة معيّنة .

عند احتساب قيم التجزئة وخطوط الشبكة، سيتم النظر في عدة مجموعات بديلة من جميع خيارات خطوط الشبكة ذات الصلة وسيتم رفض البدائل إذا كانت تصنيفات علامات التجزئة المنسَّقة مكرّرة أو متداخلة. يمكنك تحديد format:"#" إذا كنت تريد عرض قيم علامات الأعداد الصحيحة فقط، ولكن انتبه إلى أنّه في حال عدم استيفاء أي بديل لهذا الشرط، لن يتم عرض أي خطوط للشبكة أو علامات.

النوع: سلسلة
الإعداد التلقائي: تلقائي
hAxis.gridlines

كائن له خصائص لإعداد خطوط الشبكة على المحور الأفقي. لاحظ أن خطوط الشبكة ذات المحور الأفقي يتم رسمها عموديًا. لتحديد سمات هذا الكائن، يمكنك استخدام الترميز الحرفي للكائن على النحو الموضّح هنا: 

{color: '#333', minSpacing: 20}
Type: كائن
الإعداد التلقائي: قيمة خالية
hAxis.gridlines.color

لون خطوط الشبكة الأفقية داخل منطقة الرسم البياني. حدِّد سلسلة لون HTML صالحة.

النوع: سلسلة
الإعداد التلقائي: " #CCC"
hAxis.gridlines.count

العدد التقريبي لخطوط الشبكة الأفقية داخل منطقة الرسم البياني. إذا حدّدت رقمًا موجبًا في السمة gridlines.count، سيتم استخدامه لاحتساب قيمة السمة minSpacing بين خطوط الشبكة. يمكنك تحديد القيمة 1 لرسم خط شبكة واحد فقط، أو 0 لرسم أي خطوط شبكة. حدِّد -1، وهو الإعداد التلقائي، لاحتساب عدد خطوط الشبكة تلقائيًا استنادًا إلى خيارات أخرى.

النوع: رقم
تلقائي: -1
hAxis.gridlines.units

لإلغاء التنسيق التلقائي لجوانب مختلفة من أنواع بيانات التاريخ/التاريخ/الوقت في اليوم عند استخدامها مع خطوط الشبكة المحسوبة في الرسم البياني. تتيح التنسيق بالسنوات والأشهر والأيام والساعات والدقائق والثواني والمللي ثانية.

التنسيق العام هو:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

يمكنك الاطّلاع على معلومات إضافية في التواريخ والأوقات.

Type: كائن
الإعداد التلقائي: قيمة خالية
hAxis.minorGridlines

كائن يحتوي على أعضاء لضبط خطوط الشبكة الصغيرة على المحور الأفقي، على غرار الخيار hAxis.gridlines.

Type: كائن
الإعداد التلقائي: قيمة خالية
hAxis.minorGridlines.color

لون خطوط الشبكة الصغيرة الأفقية داخل منطقة الرسم البياني. حدِّد سلسلة لون HTML صالحة.

النوع: سلسلة
الوضع التلقائي: مزيج من خطوط الشبكة وألوان الخلفية
hAxis.minorGridlines.count

يتم إيقاف الخيار minorGridlines.count نهائيًا في أغلب الأحيان، باستثناء إيقاف خطوط الشبكة الثانوية من خلال ضبط العدد على 0. يعتمد عدد خطوط الشبكة الصغيرة الآن كليًا على الفاصل بين خطوط الشبكة الرئيسية (راجِع hAxis.gridlines.interval) والحد الأدنى للمساحة المطلوبة (راجِع hAxis.minorGridlines.minSpacing).

النوع: رقم
تلقائي:1
hAxis.minorGridlines.units

تلغي هذه العلامة التنسيق التلقائي لجوانب مختلفة من أنواع بيانات التاريخ/التاريخ/الوقت في اليوم عند استخدامها مع الخطوط الصغيرة المحسوبة في الرسم البياني. تتيح التنسيق بالسنوات والأشهر والأيام والساعات والدقائق والثواني والمللي ثانية.

التنسيق العام هو:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

يمكنك الاطّلاع على معلومات إضافية في التواريخ والأوقات.

Type: كائن
الإعداد التلقائي: قيمة خالية
hAxis.logScale

سمة hAxis تجعل المحور الأفقي عبارة عن مقياس لوغاريتمي (يجب أن تكون جميع القيم موجبة). قم بتعيينها على true لنعم.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
hAxis.scaleType

السمة hAxis التي تجعل المحور الأفقي عبارة عن مقياس لوغاريتمي. يمكن أن تكون الحالة واحدة مما يلي:

  • فارغ - لم يتم تنفيذ تحجيم لوغاريتمي.
  • "السجل" - التحجيم اللوغاريتمي. لا يتم رسم القيم السالبة والصفرية. هذا الخيار مماثل للإعداد hAxis: { logscale: true }.
  • "mirrorLog" - تحجيم لوغاريتمي يتم فيه رسم القيم السالبة والصفرية. القيمة المرسومة لعدد سالب هي سالب سجل القيمة المطلقة. يتم تمثيل القيم القريبة من 0 على مقياس خطي.
النوع: سلسلة
القيمة التلقائية: خالية
hAxis.textPosition

موضع نص المحور الأفقي، بالنسبة إلى منطقة الرسم البياني القيم المسموح بها: 'out' و'in' و'none'.

النوع: سلسلة
القيمة التلقائية: "out"
hAxis.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>}
hAxis.ticks

يستبدل علامات المحور "س" التي يتم إنشاؤها تلقائيًا بالصفيف المحدد. ويجب أن يكون كل عنصر في المصفوفة عبارة عن قيمة تجزئة صالحة (مثل رقم أو تاريخ أو تاريخ ووقت أو وقت يوميًا) أو كائنًا. إذا كان كائنًا، يجب أن يتضمّن السمة v لقيمة علامة التجزئة، وسمة f الاختيارية التي تحتوي على السلسلة الحرفية ليتم عرضها كتصنيف.

وسيتم توسيع viewWindow تلقائيًا ليشمل الحدَّين الأدنى والأقصى لعلامتَي التجزئة ما لم تحدّد viewWindow.min أو viewWindow.max لإلغاء العملية.

أمثلة:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
النوع: مصفوفة من العناصر
الإعداد التلقائي: تلقائي
hAxis.title

السمة hAxis التي تحدد عنوان المحور الأفقي.

النوع: سلسلة
الإعداد التلقائي: قيمة خالية
hAxis.titleTextStyle

كائن يحدد نمط نص عنوان المحور الأفقي. يحتوي الكائن على التنسيق التالي: 

{ 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>}
hAxis.maxValue

نقل الحد الأقصى لقيمة المحور الأفقي إلى القيمة المحددة، سيكون متجهًا لليمين في معظم الرسومات البيانية. يتم تجاهل السياسة إذا تم ضبط هذه السمة على قيمة أصغر من الحد الأقصى لقيمة "س" للبيانات. تلغي hAxis.viewWindow.max هذه السمة.

النوع: رقم
تلقائي: تلقائي
hAxis.minValue

نقل الحد الأدنى لقيمة المحور الأفقي إلى القيمة المحددة، ويكون متجهًا لليسار في معظم الرسومات البيانية. يتم تجاهل السياسة إذا تم ضبط هذه السمة على قيمة أكبر من الحد الأدنى لقيمة "س" للبيانات. تلغي hAxis.viewWindow.min هذه السمة.

النوع: رقم
تلقائي: تلقائي
hAxis.viewWindowMode

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

  • "pretty": تغيير حجم القيم الأفقية بحيث يتم عرض الحدَّين الأقصى والأدنى لقيم البيانات قليلاً في يمين ويمين مساحة الرسم البياني. يتم توسيع viewWindow إلى أقرب خط شبكة رئيسي للأرقام، أو أقرب خط شبكة ثانوي للتواريخ والأوقات.
  • "maximized": تغيير حجم القيم الأفقية بحيث تتلاءم القيم القصوى والحد الأدنى من البيانات مع يمين ويمين مساحة الرسم البياني. سيؤدي ذلك إلى تجاهل السمتَين haxis.viewWindow.min وhaxis.viewWindow.max.
  • "explicit": خيار تم إيقافه نهائيًا لتحديد قيم المقياس الأيسر والأيمن في منطقة الرسم البياني. (تم إيقاف هذه الميزة لأنّها متكررة في haxis.viewWindow.min وhaxis.viewWindow.max). سيتم اقتصاص قيم البيانات خارج هذه القيم. وعليك تحديد عنصر hAxis.viewWindow يصف القيم القصوى والدنيا لعرضه.
النوع: سلسلة
الخيار التلقائي: تعادل هذه القيمة "pretty"، ولكن تكون الأولوية للسمتَين haxis.viewWindow.min وhaxis.viewWindow.max في حال استخدامهما.
hAxis.viewWindow

لتحديد نطاق الاقتصاص للمحور الأفقي.

Type: كائن
الإعداد التلقائي: قيمة خالية
hAxis.viewWindow.max

الحد الأقصى لقيمة البيانات الأفقية المطلوب عرضها.

يتم تجاهل السياسة عندما تكون قيمة hAxis.viewWindowMode "جميلة" أو "مكثّفة".

النوع: رقم
الإعداد التلقائي: تلقائي
hAxis.viewWindow.min

الحد الأدنى لقيمة البيانات الأفقية المطلوب عرضها.

يتم تجاهل السياسة عندما تكون قيمة hAxis.viewWindowMode "جميلة" أو "مكثّفة".

النوع: رقم
الإعداد التلقائي: تلقائي
الطول

تمثّل هذه السمة ارتفاع الرسم البياني بالبكسل.

النوع: رقم
التلقائي: ارتفاع العنصر الذي يحتوي على الصورة
أسطورة

كائن يحتوي على أعضاء لضبط جوانب مختلفة من وسيلة الإيضاح. لتحديد خصائص هذا الكائن، يمكنك استخدام الترميز الحرفي للكائن على النحو الموضّح هنا: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: كائن
الإعداد التلقائي: قيمة خالية
legend.alignment

محاذاة وسيلة الإيضاح. يمكن أن تكون الحالة واحدة مما يلي:

  • 'start' - تتم محاذاتها مع بداية المنطقة المخصصة للوسيلة الإيضاح.
  • 'center' - تكون متمركزة في المنطقة المخصصة للوسيلة الإيضاح.
  • 'end' - تمت محاذاته مع نهاية المنطقة المخصصة للوسيلة الإيضاح.

ترتبط البداية والوسط والنهاية بالنمط - رأسي أو أفقي - للوسيلة الإيضاح. على سبيل المثال، في وسيلة الإيضاح "الأيمن"، تظهر "البدء" و"النهاية" في الأعلى والأسفل على التوالي، وبالنسبة إلى وسيلة الإيضاح "الأعلى"، تظهر "البداية" و"النهاية" على يسار المساحة ويمينها، على التوالي.

وتعتمد القيمة الافتراضية على موضع وسيلة الإيضاح. وبالنسبة إلى وسائل الإيضاح "الأسفل"، يكون الإعداد التلقائي هو "المركز"، فيما تكون وسائل الإيضاح الأخرى هي "البدء".

النوع: سلسلة
تلقائي: تلقائي
legend.maxLines

الحد الأقصى لعدد الأسطر في وسيلة الإيضاح. اضبط هذا على رقم أكبر من واحد لإضافة أسطر إلى وسيلة الإيضاح. ملاحظة: لا يزال المنطق الدقيق المستخدَم لتحديد العدد الفعلي للسطر المعروض قيد التغير.

لا يعمل هذا الخيار حاليًا إلا عندما تكون ميزة "أفضل موضع" متاحة في "الأعلى".

النوع: رقم
تلقائي: 1
legend.pageIndex

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

النوع: رقم
القيمة التلقائية: 0
legend.position

موضع وسيلة الإيضاح. يمكن أن تكون الحالة واحدة مما يلي:

  • "أسفل" - أسفل الرسم البياني.
  • "left" - يقع على يسار الرسم البياني، بشرط ألا يتضمن المحور الأيسر أي سلسلة مرتبطة به. ولذلك، إذا كنت تريد وسيلة الإيضاح التي تظهر على اليمين، فاستخدم الخيار targetAxisIndex: 1.
  • "in" - داخل المخطط، بجانب أعلى اليمين.
  • 'none' - لا يتم عرض أي وسيلة إيضاح.
  • "right" - إلى يمين المخطط. غير متوافق مع الخيار vAxes.
  • "أعلى" - أعلى الرسم البياني
النوع: سلسلة
الوضع التلقائي: "اليمين"
legend.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>}
lineWidth

عرض الخط بالبكسل استخدِم الصفر لإخفاء جميع الأسطر وعرض النقاط فقط.

النوع: رقم
القيمة التلقائية: 0
الاتجاه

اتجاه الرسم البياني. عند ضبط هذه القيمة على 'vertical'، يتم تدوير محاور الرسم البياني بحيث يتحوّل (على سبيل المثال) الرسم البياني العمودي إلى رسم بياني شريطي، وينمو الرسم البياني المساحي باتجاه اليسار بدلاً من الجزء العلوي:

النوع: سلسلة
تلقائي: "أفقي"
pointShape

شكل عناصر البيانات الفردية: "دائرة" أو "مثلّث" أو "مربع" أو "ماسي" أو "نجمة" أو "مضلّع". راجِع المستندات المتعلقة بالنقاط للحصول على أمثلة.

النوع: سلسلة
تلقائي: "دائرة"
pointSize

قطر نقاط البيانات بالبكسل استخدِم صفرًا لإخفاء جميع النقاط. يمكنك إلغاء القيم لسلسلة فردية باستخدام السمة series. إذا كنت تستخدم خطًا رائجًا، سيؤثر هذا الخيار أيضًا في pointSize من النقاط التي يتألف منها، ما سيغيّر العرض الواضح لخط الاتجاه. ولتجنّب ذلك، يمكنك إلغاء هذا الإجراء باستخدام الخيار trendlines.n.pointsize.

النوع: رقم
تلقائي: 7
pointsVisible

تحدِّد هذه السياسة ما إذا كان سيتم عرض النقاط. يمكنك ضبط القيمة على false لإخفاء جميع النقاط. يمكنك إلغاء القيم لسلسلة فردية باستخدام السمة series. إذا كنت تستخدم خطًا رائجًا، سيؤثر الخيار pointsVisible في مستوى ظهور النقاط على جميع خطوط الاتجاه ما لم تلغِه باستخدام الخيار trendlines.n.pointsVisible.

ويمكن أيضًا إلغاء هذه السمة باستخدام دور النمط في شكل "point {visible: true}".

النوع: قيمة منطقية
القيمة التلقائية:صحيح
selectionMode

عند ضبط قيمة selectionMode على 'multiple'، يمكن للمستخدمين اختيار عدة نقاط بيانات.

النوع: سلسلة
تلقائي: "أغانٍ"
السلسلة

يشير ذلك المصطلح إلى مصفوفة من العناصر يصف كل منها تنسيق السلسلة المقابلة في الرسم البياني. لاستخدام القيم التلقائية لسلسلة ما، يجب تحديد عنصر فارغ {}. إذا لم يتم تحديد سلسلة أو قيمة، سيتم استخدام القيمة العامة. ويوفّر كل كائن السمات التالية:

  • color - اللون المطلوب استخدامه لهذه السلسلة. حدِّد سلسلة لون HTML صالحة.
  • labelInLegend - وصف السلسلة التي ستظهر في وسيلة إيضاح الرسم البياني.
  • lineWidth - لإلغاء قيمة lineWidth العامة لهذه السلسلة
  • pointShape - لإلغاء قيمة pointShape العامة لهذه السلسلة
  • pointSize - لإلغاء قيمة pointSize العامة لهذه السلسلة
  • pointsVisible - لإلغاء قيمة pointsVisible العامة لهذه السلسلة
  • visibleInLegend - قيمة منطقية، حيث تعني القيمة "صحيح" أنّ السلسلة يجب أن تشتمل على إدخال وسيلة إيضاح، في حين تعني القيمة "خطأ" أنّه يجب ألا تتضمّن السلسلة. الإعداد التلقائي صحيح.

يمكنك تحديد إما مصفوفة من العناصر، وينطبق كل منها على السلسلة بالترتيب المقدم، أو يمكنك تحديد كائن حيث يكون لكل فرع مفتاح رقمي يشير إلى السلسلة التي تنطبق عليها. على سبيل المثال، التعريفان التاليان متطابقان، ويشيران إلى أنّ السلسلة الأولى باللون الأسود ولا تظهر في وسيلة الإيضاح، والسلسلة الرابعة باللون الأحمر وبدونها من وسيلة الإيضاح: 

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
النوع: مصفوفة من العناصر أو الكائن الذي يضم كائنات متداخلة
تلقائي: {}
مظهر

المظهر هو مجموعة من قيم الخيارات المحدّدة مسبقًا التي تعمل معًا لتحقيق سلوك محدّد في الرسم البياني أو تأثير مرئي. يتوفّر مظهر واحد فقط في الوقت الحالي:

  • "maximized": لتكبير مساحة الرسم البياني ورسم وسيلة الإيضاح وجميع التصنيفات داخل مساحة الرسم البياني لضبط الخيارات التالية: 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
النوع: سلسلة
الإعداد التلقائي: قيمة خالية
title

النص المطلوب عرضه أعلى الرسم البياني

النوع: سلسلة
تلقائي: بلا عنوان
titlePosition

مكان وضع عنوان الرسم البياني، مقارنةً بمساحة الرسم البياني. القيم المسموح بها:

  • in - ارسم العنوان داخل منطقة المخطط.
  • out - ارسم العنوان خارج مساحة المخطط.
  • لا شيء - حذف العنوان.
النوع: سلسلة
القيمة التلقائية: "out"
titleTextStyle

كائن يحدد نمط نص العنوان. يحتوي الكائن على التنسيق التالي:

{ 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: كائن
الإعداد التلقائي: قيمة خالية
tooltip.ignoreBounds

في حال ضبط هذه السياسة على true، سيتم السماح لرسم تلميحات الأدوات بالتدفق خارج حدود الرسم البياني على جميع الجوانب.

ملاحظة: ينطبق هذا فقط على تلميحات HTML. في حال تفعيل هذه السياسة باستخدام تلميحات رسومات موجّهة يمكن تغيير حجمها (SVG)، سيتم اقتصاص أي تجاوز خارج حدود الرسم البياني. راجِع تخصيص محتوى التلميح لمعرفة مزيد من التفاصيل.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
tooltip.isHtml

في حال ضبط السياسة على "صحيح"، يمكنك استخدام تلميحات الأدوات المعروضة بتنسيق HTML (بدلاً من عرضها بتنسيق SVG). راجِع تخصيص محتوى التلميح لمعرفة مزيد من التفاصيل.

ملاحظة: لا يتيح العرض المرئي للرسم البياني الفقاعي تخصيص محتوى تلميح HTML من خلال دور بيانات عمود التلميح.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
tooltip.showColorCode

في حال اختيار القيمة، اعرض مربّعات ملوّنة بجانب معلومات السلسلة في التلميح.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
tooltip.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>}
tooltip.trigger

تفاعل المستخدِم الذي يتسبب في عرض التلميح:

  • "Focus" (التركيز): سيتم عرض التلميح عندما يمرِّر المستخدم مؤشر الماوس فوق العنصر.
  • 'none' - لن يتم عرض التلميح.
  • "الاختيار": سيتم عرض التلميح عندما يختار المستخدم العنصر.
النوع: سلسلة
تلقائي: "التركيز"
خطوط الاتجاه

تعرض خطوط الاتجاه على الرسوم البيانية التي تتوافق معها. وتُستخدم خطوط الاتجاه الخطية بشكل تلقائي، ولكن يمكن تخصيصها باستخدام الخيار trendlines.n.type.

يتم تحديد خطوط الاتجاه على أساس كل سلسلة، لذا ستبدو الخيارات في معظم الأحيان على النحو التالي: 

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
Type: كائن
الإعداد التلقائي: قيمة خالية
trendlines.n.color

لون خط الاتجاه ، ويتم التعبير عنه باسم لون إنجليزي أو سلسلة سداسية عشرية.

النوع: سلسلة
تلقائي: اللون التلقائي للسلسلة
trendlines.n.degree

بالنسبة إلى خطوط الاتجاه type: 'polynomial'، تكون درجة المتعدد الحدود (2 للخطوط التربيعية و3 للدالة التكعيبية، وما إلى ذلك). (قد تتغير الدرجة التلقائية من 3 إلى 2 في إصدار قادم من "مخطّطات Google").

النوع: رقم
تلقائي: 3
trendlines.n.labelInLegend

وفي حال ضبطها، سيظهر خط الاتجاه في وسيلة الإيضاح على شكل هذه السلسلة.

النوع: سلسلة
الإعداد التلقائي: قيمة خالية
trendlines.n.lineWidth

عرض خط خط الاتجاه ، بالبكسل.

النوع: رقم
الخيار التلقائي: 2
trendlines.n.opacity

تشير هذه السمة إلى شفافية خط الاتجاه من 0.0 (شفاف) إلى 1.0 (قيمة فارغة).

النوع: رقم
القيمة التلقائية: 1.0
trendlines.n.pointSize

يتم إنشاء خطوط الاتجاه من خلال ختم مجموعة من النقاط على الرسم البياني، ويتيح لك هذا الخيار الذي نادرًا ما يكون ضروريًا تخصيص حجم النقاط. يُفضَّل عادةً استخدام خيار lineWidth لخط الاتجاه. مع ذلك، ستحتاج إلى هذا الخيار إذا كنت تستخدم الخيار pointSize العام وتريد حجم نقاط مختلفًا لخطوط الاتجاه.

النوع: رقم
تلقائي: 1
trendlines.n.pointsVisible

يتم إنشاء خطوط الاتجاه من خلال ختم مجموعة من النقاط على الرسم البياني. يحدّد خيار pointsVisible لخط الاتجاه ما إذا كانت النقاط لخط اتجاه معيّن مرئية أم لا.

النوع: قيمة منطقية
القيمة التلقائية:صحيح
trendlines.n.showR2

تحديد ما إذا كان سيتم عرض معامل التحديد في تلميح وسيلة الإيضاح أو خط الاتجاه.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
trendlines.n.type

تحدّد هذه السمة ما إذا كانت خطوط الاتجاه هي 'linear' (القيمة التلقائية) أو 'exponential' أو 'polynomial'.

النوع: سلسلة
تلقائي: خطية
trendlines.n.visibleInLegend

ما إذا كانت معادلة خط الاتجاه تظهر في وسيلة الإيضاح. (سيظهر في تلميح خط الاتجاه).

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
vAxis

كائن يحتوي على أعضاء لضبط عناصر متعددة من المحور الرأسي. لتحديد خصائص هذا الكائن، يمكنك استخدام الترميز الحرفي للكائن على النحو الموضّح هنا: 

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type: كائن
الإعداد التلقائي: قيمة خالية
vAxis.baseline

سمة vAxis التي تحدد خط الأساس للمحور الرأسي. إذا كان الخط القاعدي أكبر من أعلى خط شبكي أو أصغر من أدنى خط شبكي، سيتم تقريبه إلى أقرب خط شبكة.

النوع: رقم
تلقائي: تلقائي
vAxis.baselineColor

لتحديد لون الخط القاعدي للمحور الرأسي. يمكن أن تكون أي سلسلة لون HTML، على سبيل المثال: 'red' أو '#00cc00'.

النوع: رقم
الوضع التلقائي: "أسود"
vAxis.direction

الاتجاه الذي تنمو به القيم على طول المحور الرأسي. تظهر القيم المنخفضة تلقائيًا في أسفل الرسم البياني. حدِّد -1 لعكس ترتيب القيم.

النوع: 1 أو -1
تلقائي: 1
vAxis.format

سلسلة تنسيق لتصنيفات المحور الرقمي. هذه مجموعة فرعية من مجموعة أنماط ICU . على سبيل المثال، سيعرض {format:'#,###%'} القيم "1,000%" و"750%" و "50%" للقيم 10 و7.5 و0.5. ويمكنك أيضًا توفير أيٍّ مما يلي:

  • {format: 'none'}: يعرض أرقامًا بدون تنسيق (مثل 8000000)
  • {format: 'decimal'}: تعرض الأرقام مع فواصل الآلاف (مثل 8,000,000)
  • {format: 'scientific'}: يعرض الأرقام بالترميز العلمي (مثل 8e6)
  • {format: 'currency'}: يعرض الأرقام بالعملة المحلية (مثل 8,000,000.00 دولار)
  • {format: 'percent'}: يعرض الأرقام كنسب مئوية (مثل 800,000,000%)
  • {format: 'short'}: يعرض الأرقام المختصرة (مثل 8 مليون)
  • {format: 'long'}: يعرض الأرقام ككلمات كاملة (مثل 8 مليون)

يتم اشتقاق التنسيق الفعلي المطبَّق على التصنيف من اللغة التي تم تحميل واجهة برمجة التطبيقات بها. لمزيد من التفاصيل، راجِع تحميل الرسوم البيانية بلغة معيّنة .

عند احتساب قيم التجزئة وخطوط الشبكة، سيتم النظر في عدة مجموعات بديلة من جميع خيارات خطوط الشبكة ذات الصلة وسيتم رفض البدائل إذا كانت تصنيفات علامات التجزئة المنسَّقة مكرّرة أو متداخلة. يمكنك تحديد format:"#" إذا كنت تريد عرض قيم علامات الأعداد الصحيحة فقط، ولكن انتبه إلى أنّه في حال عدم استيفاء أي بديل لهذا الشرط، لن يتم عرض أي خطوط للشبكة أو علامات.

النوع: سلسلة
الإعداد التلقائي: تلقائي
vAxis.gridlines

كائن يحتوي على أعضاء لضبط خطوط الشبكة على المحور الرأسي لاحظ أن خطوط الشبكة ذات المحور الرأسي يتم رسمها أفقيًا. لتحديد خصائص هذا الكائن، يمكنك استخدام التدوين الحرفي للكائن، كما هو موضّح هنا: 

{color: '#333', minSpacing: 20}
Type: كائن
الإعداد التلقائي: قيمة خالية
vAxis.gridlines.color

لون خطوط الشبكة الرأسية داخل منطقة الرسم البياني. حدِّد سلسلة لون HTML صالحة.

النوع: سلسلة
الإعداد التلقائي: " #CCC"
vAxis.gridlines.count

العدد التقريبي لخطوط الشبكة الأفقية داخل منطقة الرسم البياني. إذا حدّدت رقمًا موجبًا في السمة gridlines.count، سيتم استخدامه لاحتساب قيمة السمة minSpacing بين خطوط الشبكة. يمكنك تحديد القيمة 1 لرسم خط شبكة واحد فقط، أو 0 لرسم أي خطوط شبكة. حدِّد -1، وهو الإعداد التلقائي، لاحتساب عدد خطوط الشبكة تلقائيًا استنادًا إلى خيارات أخرى.

النوع: رقم
تلقائي: -1
vAxis.gridlines.units

لإلغاء التنسيق التلقائي لجوانب مختلفة من أنواع بيانات التاريخ/التاريخ/الوقت في اليوم عند استخدامها مع خطوط الشبكة المحسوبة في الرسم البياني. تتيح التنسيق بالسنوات والأشهر والأيام والساعات والدقائق والثواني والمللي ثانية.

التنسيق العام هو:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

يمكنك الاطّلاع على معلومات إضافية في التواريخ والأوقات.

Type: كائن
الإعداد التلقائي: قيمة خالية
vAxis.minorGridlines

كائن يحتوي على أعضاء لضبط خطوط الشبكة الصغيرة على المحور الرأسي، على غرار الخيار vAxis.gridlines.

Type: كائن
الإعداد التلقائي: قيمة خالية
vAxis.minorGridlines.color

لون خطوط الشبكة الرأسية الصغيرة داخل منطقة الرسم البياني. حدِّد سلسلة لون HTML صالحة.

النوع: سلسلة
الوضع التلقائي: مزيج من خطوط الشبكة وألوان الخلفية
vAxis.minorGridlines.count

يتم إيقاف خيار miniGridlines.count نهائيًا، باستثناء إيقاف خطوط الشبكة الثانوية من خلال ضبط العدد على 0. يعتمد عدد خطوط الشبكة الصغيرة على الفاصل بين خطوط الشبكة الرئيسية (راجِع vAxis.gridlines.interval) والحد الأدنى للمساحة المطلوبة (يمكنك الاطّلاع على vAxis.minorGridlines.minSpacing).

النوع: رقم
تلقائي: 1
vAxis.minorGridlines.units

تلغي هذه العلامة التنسيق التلقائي لجوانب مختلفة من أنواع بيانات التاريخ/التاريخ/الوقت في اليوم عند استخدامها مع الخطوط الصغيرة المحسوبة في الرسم البياني. تتيح التنسيق بالسنوات والأشهر والأيام والساعات والدقائق والثواني والمللي ثانية.

التنسيق العام هو:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

يمكنك الاطّلاع على معلومات إضافية في التواريخ والأوقات.

Type: كائن
الإعداد التلقائي: قيمة خالية
vAxis.logScale

إذا كانت القيمة هي true، يصبح المحور الرأسي مقياسًا لوغاريتميًا. ملاحظة: يجب أن تكون جميع القيم موجبة.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
vAxis.scaleType

السمة vAxis التي تجعل المحور الرأسي مقياسًا لوغاريتميًا. يمكن أن تكون الحالة واحدة مما يلي:

  • فارغ - لم يتم تنفيذ تحجيم لوغاريتمي.
  • "السجل" - التحجيم اللوغاريتمي. لا يتم رسم القيم السالبة والصفرية. هذا الخيار مماثل للإعداد vAxis: { logscale: true }.
  • "mirrorLog" - تحجيم لوغاريتمي يتم فيه رسم القيم السالبة والصفرية. القيمة المرسومة لعدد سالب هي سالب سجل القيمة المطلقة. يتم تمثيل القيم القريبة من 0 على مقياس خطي.
النوع: سلسلة
الإعداد التلقائي: قيمة خالية
vAxis.textPosition

موضع نص المحور الرأسي، بالنسبة إلى مساحة الرسم البياني القيم المسموح بها: 'out' و'in' و'none'.

النوع: سلسلة
القيمة التلقائية: "out"
vAxis.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>}
vAxis.ticks

لاستبدال علامات المحور ص التي يتم إنشاؤها تلقائيًا بالمصفوفة المحددة. ويجب أن يكون كل عنصر في المصفوفة عبارة عن قيمة تجزئة صالحة (مثل رقم أو تاريخ أو تاريخ ووقت أو وقت يوميًا) أو كائنًا. إذا كان كائنًا، يجب أن يتضمّن السمة v لقيمة علامة التجزئة، وسمة f الاختيارية التي تحتوي على السلسلة الحرفية ليتم عرضها كتصنيف.

وسيتم توسيع viewWindow تلقائيًا ليشمل الحدَّين الأدنى والأقصى لعلامتَي التجزئة ما لم تحدّد viewWindow.min أو viewWindow.max لإلغاء العملية.

أمثلة:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
النوع: مصفوفة من العناصر
الإعداد التلقائي: تلقائي
vAxis.title

السمة vAxis التي تحدد عنوانًا للمحور العمودي.

النوع: سلسلة
تلقائي: بلا عنوان
vAxis.titleTextStyle

كائن يحدد نمط نص عنوان المحور الرأسي. يحتوي الكائن على التنسيق التالي:

{ 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>}
vAxis.maxValue

نقل الحد الأقصى لقيمة المحور الرأسي إلى القيمة المحددة، ويكون هذا العمود للأعلى في معظم الرسومات البيانية. يتم تجاهل السياسة إذا تم ضبط هذه السمة على قيمة أصغر من قيمة الحد الأقصى لقيمة "ص" للبيانات. تلغي vAxis.viewWindow.max هذه السمة.

النوع: رقم
تلقائي: تلقائي
vAxis.minValue

نقل الحد الأدنى للقيمة للمحور العمودي إلى القيمة المحددة، وسيتحرك هذا القيمة إلى أسفل في معظم الرسوم البيانية. يتم تجاهل السياسة إذا تم ضبط هذه السمة على قيمة أكبر من قيمة الحد الأدنى لقيمة ص للبيانات. تلغي vAxis.viewWindow.min هذه السمة.

النوع: رقم
الإعداد التلقائي: قيمة خالية
vAxis.viewWindowMode

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

  • "pretty": تغيير حجم القيم العمودية ليتم عرض الحدَّين الأقصى والأدنى لقيم البيانات قليلاً في الجزء السفلي والأعلى من مساحة الرسم البياني. يتم توسيع viewWindow إلى أقرب خط شبكة رئيسي للأرقام، أو أقرب خط شبكة ثانوي للتواريخ والأوقات.
  • "maximized": تغيير حجم القيم الرأسية بحيث تتلاءم قيم البيانات القصوى والدنيا أعلى وأسفل مساحة الرسم البياني. سيؤدي ذلك إلى تجاهل السمتَين vaxis.viewWindow.min وvaxis.viewWindow.max.
  • "explicit": خيار تم إيقافه نهائيًا لتحديد قيم المقياس العلوي والسفلي لمنطقة الرسم البياني. (تم إيقافها نهائيًا لأنّها متكررة في vaxis.viewWindow.min وvaxis.viewWindow.max. وسيتم اقتصاص قيم البيانات خارج هذه القيم. وعليك تحديد عنصر vAxis.viewWindow يصف القيم القصوى والدنيا المراد عرضها.
النوع: سلسلة
الخيار التلقائي: تعادل هذه القيمة "pretty"، ولكن تكون الأولوية للسمتَين vaxis.viewWindow.min وvaxis.viewWindow.max في حال استخدامهما.
vAxis.viewWindow

لتحديد نطاق الاقتصاص للمحور العمودي.

Type: كائن
الإعداد التلقائي: قيمة خالية
vAxis.viewWindow.max

الحد الأقصى لقيمة بيانات موضع الإعلان المطلوب عرضها.

يتم تجاهل السياسة عندما تكون قيمة vAxis.viewWindowMode "جميلة" أو "مكثّفة".

النوع: رقم
الإعداد التلقائي: تلقائي
vAxis.viewWindow.min

الحد الأدنى لقيمة بيانات موضع الإعلان المطلوب عرضها.

يتم تجاهل السياسة عندما تكون قيمة vAxis.viewWindowMode "جميلة" أو "مكثّفة".

النوع: رقم
الإعداد التلقائي: تلقائي
العرض

عرض الرسم البياني بالبكسل

النوع: رقم
الإعداد التلقائي: عرض العنصر المتضمّن

الطُرق

الطريقة
draw(data, options)

لرسم الرسم البياني. لا يقبل الرسم البياني طلبات الطُرق الإضافية إلا بعد تنشيط حدث ready. Extended description.

نوع الإرجاع: لا شيء
getAction(actionID)

عرض كائن إجراء التلميح مع actionID المطلوب.

نوع الإرجاع: عنصر
getBoundingBox(id)

تعرض كائنًا يحتوي على يسار عنصر الرسم البياني id وأعلاه وعرضه وارتفاعه. لم يتم توثيق تنسيق id بعد (هذه هي القيم التي تعرضها معالِجات الأحداث)، ولكن إليك بعض الأمثلة:

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)

عرض الإحداثي السيني للبكسل 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()

يؤدي هذا الإجراء إلى محو الرسم البياني وتحرير جميع الموارد المخصّصة له.

نوع الإرجاع: لا شيء

الأحداث

لمزيد من المعلومات عن كيفية استخدام هذه الأحداث، اطّلِع على التفاعل الأساسي وأحداث المعالجة وأحداث التنشيط.

الاسم
animationfinish

يتم إطلاقه عند اكتمال الحركة الانتقالية.

الخصائص: غير محدّدة
click

يتم الإطلاق عندما ينقر المستخدم داخل الرسم البياني. ويمكن استخدامها لتحديد وقت النقر على العنوان أو عناصر البيانات أو إدخالات وسيلة الإيضاح أو المحاور أو خطوط الشبكة أو التصنيفات.

المواقع: targetID
error

يتم إطلاقه عند حدوث خطأ عند محاولة عرض الرسم البياني.

الخصائص: المعرّف والرسالة
legendpagination

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

المواقع: currentPageIndex، وtotalPages
onmouseover

يتم الإطلاق عندما يمرر المستخدم الماوس فوق كيان مرئي. ينقل فهارس الصفوف والأعمدة لعنصر جدول البيانات المقابل.

الخصائص: الصف والعمود
onmouseout

يتم إطلاقها عندما يوجِّه المستخدم الماوس بعيدًا عن كيان مرئي. ينقل فهارس الصفوف والأعمدة لعنصر جدول البيانات المقابل.

الخصائص: الصف والعمود
ready

الرسم البياني جاهز لاستدعاءات الطرق الخارجية. إذا كنت تريد التفاعل مع الرسم البياني وطرق الاتصال بعد رسمه، عليك إعداد أداة معالجة لهذا الحدث قبل استدعاء طريقة draw، وعدم الاتصال بها إلا بعد تنشيط الحدث.

الخصائص: غير محدّدة
select

يتم الإطلاق عندما ينقر المستخدم على عنصر مرئي. لمعرفة ما تم اختياره، يمكنك الاتصال بالرقم getSelection().

الخصائص: غير محدّدة

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

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