تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

مخطط نباتي

Overview
مثال بسيط
جارٍ التحميل
تنسيق البيانات
خيارات الإعداد
الطُرق
الأحداث
سياسة البيانات

نظرة عامة

رسم بياني VegaChart هو أحد التمثيلات البصرية العديدة التي يمكن إنشاؤها باستخدام Vega Visualization Grammar، وهي لغة تعريفية لإنشاء تصاميم مرئية تفاعلية وحفظها ومشاركتها. من خلال Vega، يمكنك وصف المظهر المرئي والسلوك التفاعلي للمرئيات بتنسيق JSON، وإنشاء طرق عرض مستندة إلى الويب باستخدام Canvas أو SVG.

عند رسم VegaChart، يجب تضمين مواصفات حول كيفية إنشاء الرسم البياني في قواعد التمثيل البصري لـ Vega. يمكنك الاطّلاع أدناه على بعض الأمثلة على هذه المواصفات، ويمكنك العثور على العديد من الأمثلة الإضافية في الصفحة أمثلة على VegaChart.

ملاحظة: يمكن أن يرسم مخطط Vega في "مخططات Google" الرسم البياني الذي يمكنك تحديده باستخدام مواصفات Vega JSON (بما في ذلك كل المحتوى المتوفّر في Example Gallery)، لكنّ الميزات الإضافية التي تتطلّب طلبات إلى Vega API ليست متاحة بعد.

مثال بسيط، المخطط الشريطي

فيما يلي مثال بسيط على VegaChart الذي يرسم مخطط شريطي. (اطّلِع على المثال الأصلي ودليل تعليمي مفصّل وأداة تعديل الرسم البياني الشريطي في رسم بياني Vega).

ومع أنّ هذه الطريقة تمثّل طريقة أخرى لإنتاج رسم بياني شريطي في "مخططات Google البيانية"، نخطّط لدمج جميع ميزات الرسومات البيانية الشريطية والعمودية الأخرى في عملية تنفيذ جديدة استنادًا إلى هذا الرسم البياني VegaChart.

في هذا المثال، يُرجى العلم أنّه يتم استبدال الخيار "data" بما يلي، والذي يستخدم "datatable" الذي يوفّره طلب الرسم باعتباره "المصدر" لكائن بيانات آخر يُسمى "table"، ويتم استخدام "table" في باقي مواصفات Vega.

  'data': [{'name': 'table', 'source': 'datatable'}],

google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);

function drawChart() {
        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', 'id': 'category'});
        dataTable.addColumn({type: 'number', 'id': 'amount'});
        dataTable.addRows([
          ['A', 28],
          ['B', 55],
          ['C', 43],
          ['D', 91],
          ['E', 81],
          ['F', 53],
          ['G', 19],
          ['H', 87],
        ]);

const options = {
          "vega": {
            "$schema": "https://vega.github.io/schema/vega/v4.json",
            "width": 500,
            "height": 200,
            "padding": 5,

'data': [{'name': 'table', 'source': 'datatable'}],

"signals": [
              {
                "name": "tooltip",
                "value": {},
                "on": [
                  {"events": "rect:mouseover", "update": "datum"},
                  {"events": "rect:mouseout",  "update": "{}"}
                ]
              }
            ],

"scales": [
              {
                "name": "xscale",
                "type": "band",
                "domain": {"data": "table", "field": "category"},
                "range": "width",
                "padding": 0.05,
                "round": true
              },
              {
                "name": "yscale",
                "domain": {"data": "table", "field": "amount"},
                "nice": true,
                "range": "height"
              }
            ],

"axes": [
              { "orient": "bottom", "scale": "xscale" },
              { "orient": "left", "scale": "yscale" }
            ],

"marks": [
              {
                "type": "rect",
                "from": {"data":"table"},
                "encode": {
                  "enter": {
                    "x": {"scale": "xscale", "field": "category"},
                    "width": {"scale": "xscale", "band": 1},
                    "y": {"scale": "yscale", "field": "amount"},
                    "y2": {"scale": "yscale", "value": 0}
                  },
                  "update": {
                    "fill": {"value": "steelblue"}
                  },
                  "hover": {
                    "fill": {"value": "red"}
                  }
                }
              },
              {
                "type": "text",
                "encode": {
                  "enter": {
                    "align": {"value": "center"},
                    "baseline": {"value": "bottom"},
                    "fill": {"value": "#333"}
                  },
                  "update": {
                    "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
                    "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
                    "text": {"signal": "tooltip.amount"},
                    "fillOpacity": [
                      {"test": "datum === tooltip", "value": 0},
                      {"value": 1}
                    ]
                  }
                }
              }
            ]
          }
        };

const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
      }

<html>
  <head>
    <script src='https://www.gstatic.com/charts/loader.js'></script>
    <script>
      google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);

      function drawChart() {
        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', 'id': 'category'});
        dataTable.addColumn({type: 'number', 'id': 'amount'});
        dataTable.addRows([
          ['A', 28],
          ['B', 55],
          ['C', 43],
          ['D', 91],
          ['E', 81],
          ['F', 53],
          ['G', 19],
          ['H', 87],
        ]);

        const options = {
          "vega": {
            "$schema": "https://vega.github.io/schema/vega/v4.json",
            "width": 500,
            "height": 200,
            "padding": 5,

            'data': [{'name': 'table', 'source': 'datatable'}],

            "signals": [
              {
                "name": "tooltip",
                "value": {},
                "on": [
                  {"events": "rect:mouseover", "update": "datum"},
                  {"events": "rect:mouseout",  "update": "{}"}
                ]
              }
            ],

            "scales": [
              {
                "name": "xscale",
                "type": "band",
                "domain": {"data": "table", "field": "category"},
                "range": "width",
                "padding": 0.05,
                "round": true
              },
              {
                "name": "yscale",
                "domain": {"data": "table", "field": "amount"},
                "nice": true,
                "range": "height"
              }
            ],

            "axes": [
              { "orient": "bottom", "scale": "xscale" },
              { "orient": "left", "scale": "yscale" }
            ],

            "marks": [
              {
                "type": "rect",
                "from": {"data":"table"},
                "encode": {
                  "enter": {
                    "x": {"scale": "xscale", "field": "category"},
                    "width": {"scale": "xscale", "band": 1},
                    "y": {"scale": "yscale", "field": "amount"},
                    "y2": {"scale": "yscale", "value": 0}
                  },
                  "update": {
                    "fill": {"value": "steelblue"}
                  },
                  "hover": {
                    "fill": {"value": "red"}
                  }
                }
              },
              {
                "type": "text",
                "encode": {
                  "enter": {
                    "align": {"value": "center"},
                    "baseline": {"value": "bottom"},
                    "fill": {"value": "#333"}
                  },
                  "update": {
                    "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
                    "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
                    "text": {"signal": "tooltip.amount"},
                    "fillOpacity": [
                      {"test": "datum === tooltip", "value": 0},
                      {"value": 1}
                    ]
                  }
                }
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>

  <body>
    <div id="chart-div" style="width: 700px; height: 250px;"></div>
  </body>

</html>

جارٍ التحميل

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

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

اسم فئة العرض المرئي هو google.visualization.VegaChart.

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

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

يمكن تمرير البيانات إلى VegaChart بطريقة مشابهة جدًا لـ "مخططات Google" الأخرى، وذلك باستخدام DataTable (أو DataView). يتمثل الاختلاف الرئيسي في أنه بدلاً من الاعتماد على ترتيب الأعمدة لتحديد كيفية استخدامها، يعتمد VegaChart على أن يكون معرّف كل عمود هو نفسه المتوقع لتصور Vega المحدد الذي حددته. على سبيل المثال، يتم إنشاء DataTable التالي باستخدام أعمدة تحتوي على أرقام تعريف لـ 'category' و'amount'، ويتم استخدام المعرّفات نفسها ضمن الخيار vega للإشارة إلى هذه الأعمدة.

مع DataTable

        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', 'id': 'category'});
        dataTable.addColumn({type: 'number', 'id': 'amount'});
        dataTable.addRows([
          ['A', 28],
          ['B', 55],
          ['C', 43],
        ]);

        const options = {
          'vega': {
            ...
            // Here we create the Vega data object named 'datatable',
            // which will be passed in via the draw() call with a DataTable.
            'data': {'name': 'datatable'},

            'scales': [
              {
                'name': 'yscale',
                // Here is an example of how to use the 'amount' field from 'datatable'.
                'domain': {'data': 'datatable', 'field': 'amount'},
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(
          document.getElementById('chart-div'));
        chart.draw(dataTable, options);

باستخدام بيانات Vega المضمّنة

        // A DataTable is required, but it may be empty.
        const dataTable = new google.visualization.DataTable();
        const options = {
          'vega': {
            // Here the data is specified inline in the Vega specification.
            "data": [
              {
               "name": "table",
                "values": [
                  {"category": "A", "amount": 28},
                  {"category": "B", "amount": 55},
                  {"category": "C", "amount": 43},
                ]
              }
            ],

            'scales': [
              {
                'name': 'yscale',
                // Here is how Vega normally uses the 'amount' field from 'table'.
                "domain": {"data": "table", "field": "category"},
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(
          document.getElementById('chart-div'));
        chart.draw(dataTable, options);

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

في الوقت الحالي، يمكنك تحديد أي بيانات إضافية تحتاج إلى استخدامها في خيار 'data' 'vega'، إما من خلال تضمينها أو تحميلها من عنوان URL. يمكنك العثور على أمثلة لكل منهما أدناه.

خيارات الضبط

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

الطُرق

الطريقة
`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()`. الخصائص: غير محدّدة

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

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