نظرة عامة
رسم بياني 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'}],
<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 للإشارة إلى هذه الأعمدة.
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);
// 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 |
كائن يحتوي على أعضاء لضبط موضع مساحة الرسم البياني وحجمها (حيث يتم رسم الرسم البياني نفسه، باستثناء المحور ووسائل الإيضاح). يمكنك استخدام تنسيقَين: رقم أو
رقم متبوعًا بنسبة مئوية. والرقم البسيط هو قيمة بالبكسل، بينما يمثّل الرقم متبوعًا بنسبة مئوية
نسبة مئوية. مثلاً: Type: كائن
الإعداد التلقائي: قيمة خالية
|
chartArea.bottom |
مقدار المسافة لرسم الرسم البياني من الحد السفلي. النوع: رقم أو سلسلة
الإعداد التلقائي: تلقائي
|
chartArea.left |
مقدار المسافة لرسم الرسم البياني من الحد الأيسر. النوع: رقم أو سلسلة
الإعداد التلقائي: تلقائي
|
chartArea.right |
يشير ذلك المصطلح إلى مقدار المسافة التي يجب رسمها في الرسم البياني من الحدود اليمنى. النوع: رقم أو سلسلة
الإعداد التلقائي: تلقائي
|
chartArea.top |
مقدار المسافة لرسم الرسم البياني من الحد العلوي. النوع: رقم أو سلسلة
الإعداد التلقائي: تلقائي
|
chartArea.width |
عرض مساحة الرسم البياني النوع: رقم أو سلسلة
الإعداد التلقائي: تلقائي
|
chartArea.height |
ارتفاع مساحة الرسم البياني النوع: رقم أو سلسلة
الإعداد التلقائي: تلقائي
|
الطول |
تمثّل هذه السمة ارتفاع الرسم البياني بالبكسل. النوع: رقم
التلقائي: ارتفاع العنصر الذي يحتوي على الصورة
|
العرض |
عرض الرسم البياني بالبكسل النوع: رقم
الإعداد التلقائي: عرض العنصر المتضمّن
|
الطُرق
الطريقة | |
---|---|
draw(data, options) |
لرسم الرسم البياني. لا يقبل الرسم البياني طلبات الطُرق الإضافية إلا بعد تنشيط حدث نوع الإرجاع: لا شيء
|
getAction(actionID) |
عرض كائن إجراء التلميح مع نوع الإرجاع: عنصر
|
getBoundingBox(id) |
تعرض كائنًا يحتوي على يسار عنصر الرسم البياني
ترتبط القيم بحاوية الرسم البياني. وعليك باستدعاء هذا بعد رسم الرسم البياني. نوع الإرجاع: عنصر
|
getChartAreaBoundingBox() |
تعرض كائنًا يحتوي على يسار محتوى الرسم البياني وأعلاه وعرضه وارتفاعه (أي باستثناء التصنيفات والتسمية التوضيحية):
ترتبط القيم بحاوية الرسم البياني. وعليك باستدعاء هذا بعد رسم الرسم البياني. نوع الإرجاع: عنصر
|
getChartLayoutInterface() |
تعرض كائنًا يحتوي على معلومات حول موضع الرسم البياني وعناصره على الشاشة. يمكن استدعاء الطرق التالية للكائن الذي تم إرجاعه:
وعليك باستدعاء هذا بعد رسم الرسم البياني. نوع الإرجاع: عنصر
|
getHAxisValue(xPosition, optional_axis_index) |
تعرض قيمة البيانات الأفقية على مثال: وعليك باستدعاء هذا بعد رسم الرسم البياني. نوع الإرجاع: رقم
|
getImageURI() |
تعرض الرسم البياني المتسلسل كمعرّف الموارد المنتظم (URI) للصورة. وعليك باستدعاء هذا بعد رسم الرسم البياني. راجِع طباعة مخططات PNG. نوع الإرجاع: سلسلة
|
getSelection() |
تعرض صفيفًا من الكيانات المحددة في الرسم البياني.
بالنسبة إلى هذا الرسم البياني، يمكن اختيار كيان واحد فقط في أي وقت محدّد.
نوع الإرجاع: مصفوفة من عناصر الاختيار
|
getVAxisValue(yPosition, optional_axis_index) |
تعرض قيمة البيانات العمودية على مثال: وعليك باستدعاء هذا بعد رسم الرسم البياني. نوع الإرجاع: رقم
|
getXLocation(dataValue, optional_axis_index) |
عرض الإحداثي السيني للبكسل مثال: وعليك باستدعاء هذا بعد رسم الرسم البياني. نوع الإرجاع: رقم
|
getYLocation(dataValue, optional_axis_index) |
يتم عرض إحداثي y بكسل لـ مثال: وعليك باستدعاء هذا بعد رسم الرسم البياني. نوع الإرجاع: رقم
|
removeAction(actionID) |
إزالة إجراء التلميح باستخدام نوع الإرجاع:
none |
setAction(action) |
ضبط إجراء تلميح ليتم تنفيذه عندما ينقر المستخدم على نص الإجراء.
تستخدم طريقة
يجب ضبط كل إجراءات التلميحات قبل استدعاء طريقة نوع الإرجاع:
none |
setSelection() |
لاختيار العناصر المحددة في الرسم البياني يؤدي هذا الإجراء إلى إلغاء أي اختيار سابق.
بالنسبة إلى هذا الرسم البياني، يمكن اختيار كيان واحد فقط في كل مرة.
نوع الإرجاع: لا شيء
|
clearChart() |
يؤدي هذا الإجراء إلى محو الرسم البياني وتحرير جميع الموارد المخصّصة له. نوع الإرجاع: لا شيء
|
الأحداث
لمزيد من المعلومات عن كيفية استخدام هذه الأحداث، اطّلِع على التفاعل الأساسي وأحداث المعالجة وأحداث التنشيط.
الاسم | |
---|---|
animationfinish |
يتم إطلاقه عند اكتمال الحركة الانتقالية. الخصائص: غير محدّدة
|
click |
يتم الإطلاق عندما ينقر المستخدم داخل الرسم البياني. ويمكن استخدامها لتحديد وقت النقر على العنوان أو عناصر البيانات أو إدخالات وسيلة الإيضاح أو المحاور أو خطوط الشبكة أو التصنيفات. المواقع: targetID
|
error |
يتم إطلاقه عند حدوث خطأ عند محاولة عرض الرسم البياني. الخصائص: المعرّف والرسالة
|
legendpagination |
يتم الإطلاق عندما ينقر المستخدم على أسهم التقسيم على صفحات في وسيلة الإيضاح. تمرير فهرس الصفحة الحالي القائم على وسيلة إيضاح صفرية وإجمالي عدد الصفحات. المواقع: currentPageIndex، وtotalPages
|
onmouseover |
يتم الإطلاق عندما يمرر المستخدم الماوس فوق كيان مرئي. ينقل فهارس الصفوف والأعمدة لعنصر جدول البيانات المقابل. الخصائص: الصف والعمود
|
onmouseout |
يتم إطلاقها عندما يوجِّه المستخدم الماوس بعيدًا عن كيان مرئي. ينقل فهارس الصفوف والأعمدة لعنصر جدول البيانات المقابل. الخصائص: الصف والعمود
|
ready |
الرسم البياني جاهز لاستدعاءات الطرق الخارجية. إذا كنت تريد التفاعل مع الرسم البياني
وطرق الاتصال بعد رسمه، عليك إعداد أداة معالجة لهذا الحدث قبل
استدعاء طريقة الخصائص: غير محدّدة
|
select |
يتم الإطلاق عندما ينقر المستخدم على عنصر مرئي. لمعرفة ما تم اختياره، يمكنك الاتصال بالرقم
الخصائص: غير محدّدة
|
سياسة البيانات
تتم معالجة جميع الرموز والبيانات وعرضها في المتصفّح. ولا يتم إرسال أي بيانات إلى أي خادم.