التصور: مخطط مساحي

نظرة عامة

رسم بياني مساحي يتم عرضه داخل المتصفح باستخدام 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([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

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

مناطق التكديس

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

في الجانب الأيمن، يتم ضبط isStacked على القيمة "false" (الخيار التلقائي)، ويتم ضبطه على true على اليمين:

لاحظ أن ترتيب إدخالات التسمية التوضيحية مختلف. في الرسم البياني المكدّس الثاني، يتم عكس الترتيب، مع وضع السلسلة 0 في الأسفل، للتوافق بشكل أفضل مع تكديس عناصر السلسلة، ما يجعل التسمية التوضيحية متوافقة مع البيانات.

تتيح أيضًا الرسوم البيانية المساحية المكدّسة التكديس بنسبة 100%، حيث تتم إعادة ضبط حزم العناصر في كل قيمة نطاق بحيث تزيد بنسبة 100%. والخيارات المخصّصة لذلك هي isStacked: 'percent'، وهي تنسيق كل قيمة كنسبة مئوية 100% و isStacked: 'relative'، وهي تنسيق كل قيمة ككسر من 1. هناك أيضًا خيار isStacked: 'absolute'، وهو مكافئ وظيفي للخاصية isStacked: true.

في الرسم البياني المكدّس بنسبة 100% على يسار الصفحة، تستند قيم المؤشرات إلى مقياس نسبي من 0 إلى 1 ككسر 1.

مكدّسة
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };
    
100% مكدّس
        var options_fullStacked = {
          isStacked: 'relative',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

لنفترض أن إحدى السلاسل لا تحتوي على بيانات لبعض قيم x. على سبيل المثال، في المخططات الواردة أعلاه، نفترض أن الطائرات بدون طيار ليست متاحة حتى عام 2015، وأن Segways ليست متاحة في عام 2014. تجدر الإشارة إلى أننا نستخدم قيمًا فارغة حيث تكون البيانات مفقودة، ولذلك سيبدو المخطط كما يلي:

إذا لم يتم استئناف هذه الاستثناءات، فيمكنك استبدال الأصفار بالقيم الفارغة و/أو ضبط خيار interpolateNulls على true:

جارٍ التحميل

اسم الحزمة google.charts.load هو "corechart".

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

اسم فئة التمثيل البصري هو google.visualization.AreaChart.

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

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

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

الأعمدة:

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

 

خيارات الضبط

الاسم
هدف التجميع
كيفية تجميع اختيارات البيانات المتعددة في تلميحات الأدوات:
  • 'category': تجميع البيانات المحدّدة حسب قيمة x.
  • 'series': يمكنك تجميع البيانات المختارة حسب السلسلة.
  • 'auto': جمِّع البيانات المحدَّدة حسب x-value إذا كانت جميع الاختيارات لها القيمة 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',
};
    
النوع: سلسلة
تلقائي: 'auto'
.GIF

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

النوع: الرقم
القيمة التلقائية: 0
رسم متحرك.

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

  • "خطي" - سرعة ثابتة
  • 'in' - Easy in - البدء ببطء والسرعة.
  • 'out' - راحة - البدء بسرعة وإبطاء.
  • 'inAndOut' - إرخاء للداخل والخارج - البدء ببطء، تسريع، تقليل البطء.
النوع: سلسلة
افتراضي: "خطي"
تشغيل الصور المتحركة.

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

النوع: منطقي
افتراضي
تعليقات توضيحية.مربع النمط

بالنسبة إلى الرسوم البيانية التي تتيح استخدام التعليقات التوضيحية، يتحكّم الكائن 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
      }
    }
  }
};
    

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

النوع: الكائن
تلقائي: null
تعليقات توضيحية.مرجع
بالنسبة إلى الرسوم البيانية التي تتيح استخدام التعليقات التوضيحية، يتيح لك الكائن annotations.datum إلغاء اختيار "المخطّطات من Google" للتعليقات التوضيحية المقدَّمة لعناصر البيانات الفردية (مثل القيم التي تظهر مع كل شريط على الرسم البياني الشريطي). يمكنك التحكم في اللون باستخدام annotations.datum.stem.color، وطول الجذعية باستخدام annotations.datum.stem.length، والنمط باستخدام annotations.datum.style.
النوع: الكائن
تلقائي: اللون "أسود"، والطول 12، النمط هو "نقطة".
تعليقات توضيحية.نطاق
بالنسبة إلى الرسوم البيانية التي تتيح استخدام التعليقات التوضيحية، يتيح لك الكائن annotations.domain إلغاء خيار "خرائط Google" للتعليقات التوضيحية المقدّمة لنطاق (المحور الرئيسي في الرسم البياني، مثل المحور "س" على رسم بياني خطي عادي). يمكنك التحكم في اللون باستخدام annotations.domain.stem.color، وطول الجذعية باستخدام annotations.domain.stem.length، والنمط باستخدام annotations.domain.style.
النوع: الكائن
افتراضي: اللون "أسود"، والطول 5، النمط هو "نقطة".
تعليق توضيحي.highContrast
بالنسبة إلى الرسوم البيانية التي تتيح التعليقات التوضيحية، تتيح لك العلامة المنطقية annotations.highContrast إلغاء اختيار "رسومات Google البيانية" للون التعليق التوضيحي. ويتم ضبط annotations.highContrast على "صحيح" تلقائيًا، ما يجعل الرسوم البيانية تختار لون التعليق التوضيحي بدرجة تباين جيدة: الألوان الفاتحة على الخلفيات الداكنة والألوان الداكنة على الإضاءة. إذا ضبطت السمة annotations.highContrast على "خطأ" ولم تحدّد لون التعليق التوضيحي الخاص بك، ستستخدم مخططات Google لون السلسلة التلقائي الخاص بالتعليقات التوضيحية:
النوع: منطقي
افتراضي: صحيح
تعليقات توضيحية.
بالنسبة إلى الرسوم البيانية التي تتيح التعليقات التوضيحية، يتيح لك الكائن annotations.stem إلغاء اختيار الرسوم البيانية في "مخططات Google" للنمط الجذري. يمكنك التحكم في اللون باستخدام annotations.stem.color وطول الجذعية باستخدام annotations.stem.length. يُرجى العِلم بأنّ خيار طول الجذع ليس له أي تأثير على التعليقات التوضيحية ذات النمط 'line': بالنسبة إلى التعليقات التوضيحية للمرجع 'line'، يكون طول الجذعية دائمًا مماثلاً للنص، وبالنسبة إلى التعليقات التوضيحية لنطاق 'line'، يمتد الساق عبر المخطط بأكمله.
النوع: الكائن
افتراضي: اللون "أسود"، والطول 5 للتعليقات التوضيحية للنطاق و12 اللون للتعليقات التوضيحية المرجعة.
تعليقات توضيحية.
بالنسبة إلى الرسوم البيانية التي تتيح التعليقات التوضيحية، يتيح لك الخيار annotations.style إلغاء اختيار نوع الرسوم التوضيحية في "مخطّطات Google". ويمكن أن تكون القيمة 'line' أو 'point'.
النوع: سلسلة
تلقائي: "نقطة"
تعليقات توضيحية.نمط النص
بالنسبة إلى الرسوم البيانية التي تتيح استخدام التعليقات التوضيحية، يتحكّم العنصر 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
    }
  }
};
    

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

النوع: الكائن
تلقائي: null
تعتيم المنطقة

التعتيم التلقائي للمنطقة الملوّنة أسفل سلسلة رسم بياني مساحي، حيث تكون القيمة 0.0 شفافة بالكامل و1.0 معتمة تمامًا. لتحديد مستوى التعتيم لسلسلة فردية، اضبط قيمة regionOpacity في السمة series.

النوع: رقم، 0.0–1.0
تلقائي: 0.3
موضع العناوين

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

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

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

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

لون حد المخطط، كسلسلة لون HTML.

النوع: سلسلة
الافتراضي: '#666'
عرض لون الخلفية.الشطب

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

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

لون تعبئة المخطط، كسلسلة لون HTML.

النوع: سلسلة
تلقائي: "أبيض"
منطقة الرسم البياني

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

النوع: الكائن
تلقائي: null
لون الرسم البياني لمنطقة الخلفية
لون خلفية منطقة الرسم البياني. عند استخدام سلسلة، يمكن أن تكون سلسلة سداسية عشرية (مثل "#fdc") أو اسم اللون الإنجليزي. عند استخدام كائن، يمكن توفير الخصائص التالية:
  • stroke: اللون، يتم تقديمه كسلسلة سداسية عشرية أو اسم اللون الإنجليزي.
  • strokeWidth: في حالة تقديمه، يرسم حدًا حول منطقة المخطط بعرض محدد (واللون stroke).
النوع: سلسلة أو كائن
تلقائي: "أبيض"
منطقة الرسم البياني اليسرى

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

النوع: رقم أو سلسلة
تلقائي: تلقائي
منطقة الرسم البياني العليا

مقدار رسم المخطط من الحد العلوي.

النوع: رقم أو سلسلة
تلقائي: تلقائي
مخطط منطقة العرض

عرض منطقة الرسم البياني.

النوع: رقم أو سلسلة
تلقائي: تلقائي
ارتفاع الرسم البياني

رسم بياني لمنطقة ارتفاع.

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

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

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

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

النوع: الكائن
تلقائي: null
لون متقاطع

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

النوع: سلسلة
النوع: التلقائي
التركيز على الشعر المتقاطع

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

النوع: الكائن
افتراضي: تلقائي
تقاطع الشعر

تعتيم التقاطع، مع إظهار 0.0 للشفافية بشكل كامل وتعتيم 1.0 بشكل كامل.

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

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

النوع: سلسلة
تلقائي: 'both'
تم التحديد

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

النوع: الكائن
افتراضي: تلقائي
تقاطع.

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

النوع: سلسلة
تلقائي: 'both'
تعتيم البيانات

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

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

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

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

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

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

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

النوع: الكائن
تلقائي: null
explorer.actions

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

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

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

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

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

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

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

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

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

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

عند إجراء المستخدمين للتكبير أو التصغير، تحدد explorer.zoomDelta مقدار التكبير. وكلما كان الرقم أصغر، كان التكبير أكثر سلاسة وأبطأ.

النوع: الرقم
الإعداد التلقائي: 1.5
استهداف الهدف

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

  • "مرجع" - التركيز على نقطة بيانات واحدة. يرتبط بخلية في جدول البيانات.
  • 'category' - التركيز على تجميع كل نقاط البيانات على المحور الرئيسي. يرتبط بصف في جدول البيانات.

في focusTarget 'category'، يعرض التلميح كل قيم الفئات. وقد يكون هذا الإجراء مفيدًا عند مقارنة قيم سلاسل مختلفة.

النوع: سلسلة
تلقائي: "مرجع"
حجم الخط

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

النوع: الرقم
افتراضي: تلقائي
اسم الخط

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

النوع: سلسلة
افتراضي: 'Arial'
فرض إطار

لرسم المخطط داخل إطار مضمن. (تجدر الإشارة إلى أنه يتم تجاهل هذا الخيار في IE8، ويتم رسم جميع الرسوم البيانية لـ IE8 في إطارات i.)

النوع: منطقي
تلقائي: خطأ
محور محوري

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

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
النوع: الكائن
تلقائي: null
خط الأساس hAxis.base

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

لا يتوفّر هذا الخيار إلا للمحور continuous.

النوع: الرقم
افتراضي: تلقائي
لون hAxis.baseline

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

لا يتوفّر هذا الخيار إلا للمحور continuous.

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

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

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

سلسلة تنسيق لتصنيفات محور التاريخ الرقمي أو الرقمي.

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

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

بالنسبة إلى تصنيفات محاور التاريخ، تُمثِّل هذه مجموعة فرعية من تنسيق التاريخ تعيين نمط وحدة العناية المركزة . على سبيل المثال، سيعرض {format:'MMM d, y'} القيمة "1 يوليو 2011" لتاريخ تموز (يوليو) الأول من 2011.

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

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

لا يتوفّر هذا الخيار إلا للمحور continuous.

النوع: سلسلة
تلقائي: تلقائي
خطوط hAxis.gridlines

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

{color: '#333', minSpacing: 20}

لا يتوفّر هذا الخيار إلا للمحور continuous.

النوع: الكائن
تلقائي: null
hAxis.gridlines.color

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

النوع: سلسلة
الافتراضي: '#CCC'
hAxis.gridlines.count

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

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

مصفوفة أحجام (كقيم بيانات وليست وحدات بكسل) بين خطوط الشبكة المجاورة. هذا الخيار مخصص فقط للمحاور الرقمية في الوقت الحالي، ولكنه مماثل لخيارات gridlines.units.<unit>.interval التي يتم استخدامها للتواريخ والأوقات فقط. وبالنسبة إلى المقاييس الخطية، يكون الإعداد التلقائي هو [1, 2, 2.5, 5]، ما يعني أن قيم خطوط الشبكة يمكن أن تقع على كل وحدة (1) أو على وحدات زوجية (2) أو على مضاعفات العدد 2.5 أو 5. يتم أيضًا أخذ أي قيمة تبلغ 10 أضعاف هذه القيم في الاعتبار (على سبيل المثال [10، 20، 25، 50] و [1.، 2.، 25.، 5.]). بالنسبة إلى المقاييس اللوغاريتمية، تكون القيمة التلقائية [1, 2, 5].

النوع: رقم يتراوح من 1 إلى 10، ولا يتضمن 10.
افتراضي: محسوب
hAxis.gridlines.minSpacing

الحد الأدنى لمساحة الشاشة، بالبكسل، بين خطوط الشبكة الرئيسية في محور محوري. الإعداد التلقائي لخطوط الشبكة الرئيسية هو 40 للمقاييس الخطية و20 للمقاييس اللوغاريتمية. إذا حدّدت السمة count وليس السمة minSpacing، سيتم احتساب الحدّ الأدنى للمساحة الزمنية من العدد. وبالعكس، إذا حدّدت السمة minSpacing وليس السمة count، يتم احتساب العدد من minSpacing. وإذا حدّدت كليهما، يتمّ إلغاء minSpacing.

النوع: الرقم
افتراضي: محسوب
hAxis.gridlines.multiple

يجب أن تكون كل قيم خطوط الشبكة والتحديد عبارة عن مضاعف لقيمة هذا الخيار. ويُرجى العِلم أنّه لا يمكن أخذ الأسبقية على الأسطوانات الناتجة عن المضاعف لـ 10 مرات، على عكس الفواصل. لذلك يمكنك فرض أن تكون المؤشرات أعدادًا صحيحة عن طريق تحديد gridlines.multiple = 1، أو فرض أن تكون المضاعفات لمضاعفات العدد 1000 من خلال تحديد gridlines.multiple = 1000.

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

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

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

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*/]},
  }
}
    

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

النوع: الكائن
تلقائي: null
hAxis.minorGridlines

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

لا يتوفّر هذا الخيار إلا للمحور continuous.

النوع: الكائن
تلقائي: null
hAxis.minorGridlines.color

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

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

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

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

يشبه خيار التي تظهر على شكل خطوط الشبكة الثانوية خيار الفاصل الزمني لخطوط الشبكة الرئيسية، ولكن الفاصل الزمني الذي يتم اختياره سيكون دائمًا مقامًا متساويًا للفاصل الزمني لخطوط الشبكة الرئيسية. الفاصل الزمني التلقائي للمقاييس الخطية هو [1, 1.5, 2, 2.5, 5]، وللمقاييس اللوغاريتمية [1, 2, 5].

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

الحد الأدنى من المساحة المطلوبة، بالبكسل، بين خطوط الشبكة الثانوية المجاورة، وبين خطوط الشبكة الثانوية والثانوية وتكون القيمة الافتراضية هي 1/2 ثواني minSpacing لخطوط الشبكة الرئيسية للمقاييس الخطية، و1/5 the minSpacing للمقاييس اللوغاريتمية.

النوع: الرقم
افتراضي:محسوب
hAxis.minorGridlines.multiple

كما هو الحال مع gridlines.multiple الرئيسية.

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

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

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

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*/]},
  }
}
    

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

النوع: الكائن
تلقائي: null
hAxis.logScale

الخاصية hAxis التي تجعل المحور الأفقي مقياسًا لوغاريتميًا (يتطلب ذلك أن تكون جميع القيم موجبة). اضبِط القيمة على "true" للتعبير عن نعم.

لا يتوفّر هذا الخيار إلا للمحور continuous.

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

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

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

لا يتوفّر هذا الخيار إلا للمحور continuous.

النوع: سلسلة
القيمة التلقائية: فارغة
hAxis.textPosition

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

النوع: سلسلة
تلقائي: "out"
hAxis.textStyle

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

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

يمكن أن يكون color أي سلسلة لون HTML، على سبيل المثال: 'red' أو '#00cc00'. ويمكنك أيضًا الاطّلاع على fontName وfontSize.

النوع: الكائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

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

وسيتم توسيع viewViewdow تلقائيًا لتضمين علامات الحد الأقصى والحد الأقصى إلا في حال تحديد 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] }

لا يتوفّر هذا الخيار إلا للمحور continuous.

النوع: مصفوفة من العناصر
تلقائي: تلقائي
hAxis.title

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

النوع: سلسلة
تلقائي: null
hAxis.titleTextStyle

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

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

يمكن أن يكون color أي سلسلة لون HTML، على سبيل المثال: 'red' أو '#00cc00'. ويمكنك أيضًا الاطّلاع على fontName وfontSize.

النوع: الكائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.allowContainerBoundaryTextCutoff

في حال اختيار القيمة "false"، سيتم إخفاء التصنيفات الخارجية بدلاً من السماح باقتصاصها بواسطة حاوية الرسم البياني. في حال الضبط على "true"، سيتم السماح باقتصاص التصنيف.

لا يتوفّر هذا الخيار إلا للمحور discrete.

النوع: منطقي
تلقائي: خطأ
hAxis.slantedText

في حال الضبط على "true"، ارسم نص المحور الأفقي في زاوية للمساعدة في احتواء المزيد من النص على المحور، وفي حال التعيين على "false"، ارسم نص المحور الأفقي في وضع مستقيم. ويكون السلوك التلقائي هو النص المائل إذا تعذّر تطبيقه بالكامل عند رسمه في وضع عمودي. ملاحظة: لا يتوفّر هذا الخيار إلا عند ضبط السمة hAxis.textPosition على "out" (وهو الخيار التلقائي). وتكون القيمة التلقائية false للتواريخ والأوقات.

النوع: منطقي
افتراضي: تلقائي
زاوية محور محوري slantedTextAngle

زاوية نص المحور الأفقي، إذا كان مرسومًا مائلاً. ويتم تجاهله إذا كان hAxis.slantedText هو false أو إذا كان في الوضع التلقائي، وقرّر الرسم البياني رسم النص أفقيًا. إذا كانت الزاوية موجبة، تكون التدوير عكس اتجاه عقارب الساعة، وإذا كانت سالبة، تكون عقارب الساعة.

النوع: رقم، -90 - 90
الافتراضي: 30
hAxis.maxAlternation

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

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

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

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

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

النوع: الرقم
القيمة التلقائية: قيمة hAxis.textStyle.fontSize
hAxis.showTextEvery

عدد تصنيفات المحور الأفقي المطلوب عرضها، حيث يعني الرقم 1 عرض كل تصنيف، بينما يعني الرقم 2 عرض كل تصنيف آخر، وهكذا. الإعداد التلقائي هو محاولة عرض أكبر عدد ممكن من التصنيفات بدون تداخل.

النوع: الرقم
افتراضي: تلقائي
hAxis.maxValue

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

لا يتوفّر هذا الخيار إلا للمحور continuous.

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

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

لا يتوفّر هذا الخيار إلا للمحور continuous.

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

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

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

لا يتوفّر هذا الخيار إلا للمحور continuous.

النوع: سلسلة
تلقائي: مكافئة لـ "pretty"، ولكن يكون لـ haxis.viewWindow.min وhaxis.viewWindow.max الأولوية في حال استخدامها.
hAxis.viewWindow

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

النوع: الكائن
تلقائي: null
HAxis.viewWindow.max
  • بالنسبة إلى محور continuous :

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

  • بالنسبة إلى محور discrete:

    فهرس الصف المستند إلى الصفر حيث تنتهي نافذة الاقتصاص. سيتم اقتصاص نقاط البيانات في هذا الفهرس والمستويات الأعلى. إلى جانب vAxis.viewWindowMode.min، تُحدّد هذه السياسة نطاقًا بنصف القيمة [min, max) يشير إلى فهارس العناصر المطلوب عرضها. بمعنى آخر، سيتم عرض كل فهرس بحيث يتم عرض min <= index < max.

يتم التجاهل عندما تكون قيمة hAxis.viewWindowMode هي "pretty" أو "maxied".

النوع: الرقم
تلقائي: تلقائي
hAxis.viewWindow.min
  • بالنسبة إلى محور continuous:

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

  • بالنسبة إلى محور discrete:

    فهرس الصف المستند إلى الصفر حيث تبدأ نافذة الاقتصاص. سيتم اقتصاص نقاط البيانات في المؤشرات الأقل من هذا. إلى جانب vAxis.viewWindowMode.max، تُحدّد هذه السياسة نطاقًا بنصف القيمة [min, max) يشير إلى فهارس العناصر المطلوب عرضها. وبعبارة أخرى، سيتم عرض كل فهرس بحيث يتم عرض min <= index < max.

يتم التجاهل عندما تكون قيمة hAxis.viewWindowMode هي "pretty" أو "maxied".

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

ارتفاع المخطط بالبكسل.

النوع: الرقم
افتراضي: ارتفاع العنصر المضمن
InterpolateNulls

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

لا يتوافق هذا مع مخططات المنطقة التي تحتوي على الخيار isStacked: true/'percent'/'relative'/'absolute'.

النوع: منطقي
تلقائي: خطأ
مكدس

في حال الضبط على "true"، تتكدس العناصر لكل السلسلة في كل قيمة نطاق. ملاحظة: في الرسوم البيانية لكل من العمود والمنطقة وSteppedArea، تعكس مخططات Google ترتيب عناصر التسمية التوضيحية لكي يتوافق بشكل أفضل مع تكديس عناصر السلسلة (على سبيل المثال، ستكون السلسلة 0 هي العنصر الأكثر أهمية في أسفل الصفحة). لا لا تنطبق على Bar الرسوم البيانية.

يوفّر الخيار isStacked أيضًا إمكانية التكديس بنسبة 100%، حيث يتم تغيير حجم مجموعات العناصر في كل قيمة نطاق لإضافة ما يصل إلى 100%.

خيارات isStacked هي:

  • false — لن يتم تكديس العناصر. وتجدر الإشارة إلى أنّ هذا هو الخيار التلقائي.
  • true — تكديس العناصر لجميع السلاسل في كل قيمة نطاق.
  • 'percent' — تكديس العناصر لجميع السلاسل في كل قيمة نطاق وتعيد تغيير حجمها بحيث تزيد عن 100٪، مع حساب قيمة كل عنصر كنسبة مئوية من 100٪.
  • 'relative' — تكدس العناصر لكل سلسلة في كل قيمة نطاق وتعيد تغيير حجمها بحيث تضيف ما يصل إلى 1، مع حساب قيمة كل عنصر ككسر من 1.
  • 'absolute' — تعمل مثل isStacked: true.

بالنسبة إلى التكديس 100%، ستظهر القيمة المحسوبة لكل عنصر في التلميح بعد قيمته الفعلية.

سيتم ضبط القيمة المستهدفة للمحور المستهدَف تلقائيًا على قيم من القيم بناءً على مقياس من 0 إلى 1 نسبي ككسور من 1 لـ 'relative' ومن 0 إلى 100% في 'percent' (ملاحظة: عند استخدام خيار 'percent'، يتم عرض قيم المحور/الإشارة كنسب مئوية، إلا أن القيم الفعلية هي قيم نسبية من 0 إلى 1. ويرجع ذلك إلى أن مؤشرات النسبة المئوية للمحور هي نتيجة تطبيق التنسيق "#.##%" على القيم النسبية للمقياس 0-1. عند استخدام السمة isStacked: 'percent'، احرص على تحديد أي خطوط/خطوط خطوط باستخدام قيم المقياس النسبية من 0 إلى 1. يمكنك تخصيص خطوط الشبكة وقيم المؤشرات والتنسيق باستخدام خيارات hAxis/vAxis المناسبة.

لا تعتمد ميزة التكديس 100% إلا على قيم البيانات من النوع number، ويجب أن يكون لها أساس بقيمة صفرية.

النوع: قيمة منطقية/سلسلة
تلقائي: خطأ
أسطورة

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

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
النوع: الكائن
تلقائي: null
محاذاة

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

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

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

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

النوع: سلسلة
افتراضي: تلقائي
وسيلة الإيضاح.maxLines

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

لا يعمل هذا الخيار حاليًا إلا عندما تكون وسيلة الإيضاح "top".

النوع: الرقم
تلقائي: 1
مؤشر التسمية التوضيحية

تم اختيار مبدئي فهرس الصفحات الصفري المستند إلى الصفر.

النوع: الرقم
القيمة التلقائية: 0
وضع التسمية التوضيحية

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

  • "bottom" - أسفل المخطط.
  • "left" - على يمين الرسم البياني، شريطة أن لا يتضمن المحور الأيسر أي سلسلة مرتبطة به. وبالتالي، إذا كنت تريد التسمية التوضيحية على اليمين، فاستخدم الخيار targetAxisIndex: 1.
  • "in" - داخل المخطط، أعلى اليمين.
  • "لا شيء" - لا يتم عرض تسمية توضيحية.
  • "right" - يسار المخطط. غير متوافق مع خيار vAxes.
  • "أعلى" - أعلى المخطط.
النوع: سلسلة
تلقائي: 'يمين'
وسيلة الإيضاح

كائن يحدد نمط نص التسمية التوضيحية. ويكون الكائن بهذا التنسيق:

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

يمكن أن يكون color أي سلسلة لون HTML، على سبيل المثال: 'red' أو '#00cc00'. ويمكنك أيضًا الاطّلاع على fontName وfontSize.

النوع: الكائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
نمط خط الرسم

نمط التشغيل وإيقاف التشغيل للخطوط المتقطعة. على سبيل المثال، سيكرّر [4, 4] شرطات من 4 طول متبوعة بفجوات من 4 طول، وسيكرر [5, 1, 3] شرطة من 5 طول وفجوة من 1 طول وشرطة من 3 طول وفجوة من 5 طول وشرطة من 1 طول و3 فجوة من 3 طول. للحصول على مزيد من المعلومات، يمكنك الاطّلاع على الخطوط المحطّة.

النوع: مصفوفة أرقام
تلقائي: null
عرض الخط

عرض خط البيانات بالبكسل. استخدم الصفر لإخفاء كل الخطوط وعرض النقاط فقط. يمكنك إلغاء القيم لسلسلة فردية باستخدام السمة series.

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

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

النوع: سلسلة
تلقائي: "أفقية"
شكل نقطة

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

النوع: سلسلة
افتراضي: 'circle'
حجم النقطة

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

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

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

ويمكن أيضًا تجاوز ذلك باستخدام دور النمط على شكل "point {visible: true}".

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

في حال الضبط على "true"، سيتم رسم سلسلة من اليمين إلى اليسار. الإعداد الافتراضي هو الرسم من اليسار إلى اليمين.

لا يتوفّر هذا الخيار إلا للمحور discrete major.

النوع: منطقي
تلقائي: خطأ
وضع التحديد

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

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

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

  • annotations - عنصر يتم تطبيقه على التعليقات التوضيحية لهذه السلسلة. يمكن استخدام ذلك للتحكّم في textStyle للسلسلة، على سبيل المثال:

    series: {
      0: {
        annotations: {
          textStyle: {fontSize: 12, color: 'red' }
        }
      }
    }
              

    يمكنك الاطّلاع على خيارات annotations المتعدّدة للحصول على قائمة أكثر اكتمالاً بالعناصر التي يمكن تخصيصها.

  • areaOpacity - لإلغاء areaOpacity العالمي لهذه السلسلة.
  • color: اللون المستخدَم في هذه السلسلة حدد سلسلة لون HTML صالحة.
  • labelInLegend - وصف المسلسل الذي سيظهر في وسيلة إيضاح الرسم البياني.
  • lineDashStyle - تتجاوز قيمة lineDashStyle العامة لهذه السلسلة.
  • lineWidth - لإلغاء قيمة lineWidth العامة لهذه السلسلة.
  • pointShape - تتجاوز قيمة pointShape العامة لهذه السلسلة.
  • pointSize - لإلغاء قيمة pointSize العامة لهذه السلسلة.
  • pointsVisible - تتجاوز قيمة pointsVisible العامة لهذه السلسلة.
  • targetAxisIndex - المحور المطلوب تعيينه لهذه السلسلة، حيث 0 هو المحور التلقائي، و1 هو المحور المقابل. القيمة التلقائية هي 0، ويتم ضبطها على 1 لتحديد رسم بياني يتم فيه عرض سلسلة مختلفة على محاور مختلفة. يتم تخصيص سلسلة واحدة على الأقل إلى المحور التلقائي. يمكنك تحديد مقياس مختلف لمحاور مختلفة.
  • visibleInLegend - قيمة منطقية، حيث تعني القيمة الصحيحة أن السلسلة يجب أن يكون لها إدخال تسمية توضيحية، وتعني القيمة false أنّه يجب ألا يكون للسلسلة. الإعداد التلقائي صحيح.

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

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'}
            
النوع: سلسلة
تلقائي: null
العنوان

النص المطلوب عرضه أعلى المخطط.

النوع: سلسلة
تلقائي: بدون عنوان
titleالموضع

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

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

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

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

يمكن أن يكون color أي سلسلة لون HTML، على سبيل المثال: 'red' أو '#00cc00'. ويمكنك أيضًا الاطّلاع على fontName وfontSize.

النوع: الكائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
تلميح

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
النوع: الكائن
تلقائي: null
tooltip.ignoreBounds

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

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

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

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

ملاحظة: لا يمكن تخصيص محتوى تلميح HTML عبر دور بيانات عمود تلميحات الأدوات من خلال التمثيل البصري لمخطط الفقاعات التفسيرية.

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

إذا كان ذلك صحيحًا، فاعرض المربعات الملونة بجوار معلومات السلسلة في تلميح الأداة. ويتم ضبط القيمة التلقائية على "صحيح" عند ضبط focusTarget على "الفئة"، وبخلاف ذلك يتم ضبط القيمة التلقائية على "خطأ".

النوع: منطقي
افتراضي: تلقائي
tooltip.textStyle

كائن يحدد نمط نص التلميح. ويكون الكائن بهذا التنسيق:

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

يمكن أن يكون color أي سلسلة لون HTML، على سبيل المثال: 'red' أو '#00cc00'. ويمكنك أيضًا الاطّلاع على fontName وfontSize.

النوع: الكائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

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

  • 'focus' - سيتم عرض التلميح عندما يمرر المستخدم مؤشر الماوس فوق العنصر.
  • 'none' - لن يتم عرض التلميح.
  • 'التحديد' - سيتم عرض التلميح عندما يحدد المستخدم العنصر.
النوع: سلسلة
تلقائي: "التركيز"
فؤوس

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

لتحديد رسم بياني يحتوي على محاور عمودية متعددة، عليك أولاً تحديد محور جديد باستخدام series.targetAxisIndex، ثم ضبط المحور باستخدام vAxes. يعيّن المثال التالي السلسلة 2 للمحور الأيمن ويحدّد عنوانًا ونمط نص مخصّصين له:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

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

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
النوع: مصفوفة كائن أو كائن به كائنات فرعية
تلقائي: null
محور محوري

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

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
النوع: الكائن
تلقائي: null
إصدار vAxis.baseline

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

النوع: الرقم
افتراضي: تلقائي
لون vAxis.baseline

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

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

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

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

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

  • {format: 'none'}: يتم عرض الأرقام بدون تنسيق (على سبيل المثال، 8000000)
  • {format: 'decimal'}: يعرض أرقامًا بفاصلات الآلاف (مثل 8000000)
  • {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}
النوع: الكائن
تلقائي: null
vAxis.gridlines.color

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

النوع: سلسلة
الافتراضي: '#CCC'
vAxis.gridlines.count

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

النوع: الرقم
تلقائي: -1
الإصدار vAxis.gridlines.interval

مصفوفة أحجام (كقيم بيانات وليست وحدات بكسل) بين خطوط الشبكة المجاورة. هذا الخيار مخصص فقط للمحاور الرقمية في الوقت الحالي، ولكنه مماثل لخيارات gridlines.units.<unit>.interval التي يتم استخدامها للتواريخ والأوقات فقط. وبالنسبة إلى المقاييس الخطية، يكون الإعداد التلقائي هو [1, 2, 2.5, 5]، ما يعني أن قيم خطوط الشبكة يمكن أن تقع على كل وحدة (1) أو على وحدات زوجية (2) أو على مضاعفات العدد 2.5 أو 5. يتم أيضًا أخذ أي قيمة تبلغ 10 أضعاف هذه القيم في الاعتبار (على سبيل المثال [10، 20، 25، 50] و [1.، 2.، 25.، 5.]). بالنسبة إلى المقاييس اللوغاريتمية، تكون القيمة التلقائية [1, 2, 5].

النوع: رقم يتراوح من 1 إلى 10، ولا يتضمن 10.
افتراضي: محسوب
vAxis.gridlines.minSpacing

الحد الأدنى لمساحة الشاشة، بالبكسل، بين خطوط الشبكة الرئيسية في محور محوري. الإعداد التلقائي لخطوط الشبكة الرئيسية هو 40 للمقاييس الخطية و20 للمقاييس اللوغاريتمية. إذا حدّدت السمة count وليس السمة minSpacing، سيتم احتساب الحدّ الأدنى للمساحة الزمنية من العدد. وبالعكس، إذا حدّدت السمة minSpacing وليس السمة count، يتم احتساب العدد من minSpacing. وإذا حدّدت كليهما، يتمّ إلغاء minSpacing.

النوع: الرقم
افتراضي: محسوب
vAxis.gridlines.multiple

يجب أن تكون كل قيم خطوط الشبكة والتحديد عبارة عن مضاعف لقيمة هذا الخيار. ويُرجى العِلم أنّه لا يمكن أخذ الأسبقية على الأسطوانات الناتجة عن المضاعف لـ 10 مرات، على عكس الفواصل. لذلك يمكنك فرض أن تكون المؤشرات أعدادًا صحيحة عن طريق تحديد gridlines.multiple = 1، أو فرض أن تكون المضاعفات لمضاعفات العدد 1000 من خلال تحديد gridlines.multiple = 1000.

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

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

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

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*/]}
  }
}
    

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

النوع: الكائن
تلقائي: null
vAxis.minorGridlines

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

النوع: الكائن
تلقائي: null
vAxis.minorGridlines.color

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

النوع: سلسلة
افتراضي: مزيج من خطوط الشبكة وألوان الخلفية
الإصدار vAxis.minorGridlines.interval

يشبه خيار التي تظهر على شكل خطوط الشبكة الثانوية خيار الفاصل الزمني لخطوط الشبكة الرئيسية، ولكن الفاصل الزمني الذي يتم اختياره سيكون دائمًا مقامًا متساويًا للفاصل الزمني لخطوط الشبكة الرئيسية. الفاصل الزمني التلقائي للمقاييس الخطية هو [1, 1.5, 2, 2.5, 5]، وللمقاييس اللوغاريتمية [1, 2, 5].

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

الحد الأدنى من المساحة المطلوبة، بالبكسل، بين خطوط الشبكة الثانوية المجاورة، وبين خطوط الشبكة الثانوية والثانوية وتكون القيمة الافتراضية هي 1/2 ثواني minSpacing لخطوط الشبكة الرئيسية للمقاييس الخطية، و1/5 the minSpacing للمقاييس اللوغاريتمية.

النوع: الرقم
افتراضي:محسوب
vAxis.minorGridlines.multiple

كما هو الحال مع gridlines.multiple الرئيسية.

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

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

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

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

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

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*/]},
  }
}
    

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

النوع: الكائن
تلقائي: null
vAxis.logScale

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

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

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

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

لا يتوفّر هذا الخيار إلا للمحور continuous.

النوع: سلسلة
تلقائي: null
vAxis.textPosition

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

النوع: سلسلة
تلقائي: "out"
vAxis.textStyle

كائن يحدد نمط نص المحور العمودي. ويكون الكائن بهذا التنسيق:

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

يمكن أن يكون color أي سلسلة لون HTML، على سبيل المثال: 'red' أو '#00cc00'. ويمكنك أيضًا الاطّلاع على fontName وfontSize.

النوع: الكائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
الإصدار vAxis.ticks

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

وسيتم توسيع viewViewdow تلقائيًا لتضمين علامات الحد الأقصى والحد الأقصى إلا في حال تحديد 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.

النوع: الكائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

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

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

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

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

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

  • "pretty" - تغيير حجم القيم الرأسية بحيث يتم عرض الحد الأقصى والحد الأدنى لقيم البيانات قليلاً داخل أسفل وأعلى منطقة الرسم البياني. يتم توسيع viewViewdow إلى أقرب خط شبكة رئيسي للأرقام، أو أقرب خط شبكة ثانوي للتواريخ والأوقات.
  • '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

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

النوع: الكائن
تلقائي: null
vAxis.viewWindow.max

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

يتم التجاهل عندما تكون قيمة vAxis.viewWindowMode هي "pretty" أو "maxied".

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

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

يتم التجاهل عندما تكون قيمة vAxis.viewWindowMode هي "pretty" أو "maxied".

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

عرض المخطط بالبكسل.

النوع: الرقم
افتراضي: عرض العنصر المضمن

الطرق

الطريقة
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)

لعرض الإحداثي x لوحدة البكسل dataValue بالنسبة إلى الحافة اليسرى لحاوية الرسم البياني.

مثال: chart.getChartLayoutInterface().getXLocation(400)

وعليك باستدعاء هذا بعد رسم المخطط.

نوع الإرجاع: رقم
getYLocation(dataValue, optional_axis_index)

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

الخصائص: بلا

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

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