نظرة عامة
VegaChart هو أحد التمثيلات البصرية المحتملة التي يمكن إنشاؤها باستخدام قاعدة التمثيل البصري لـ Vega، وهي لغة تعريفية لإنشاء تصميمات التمثيل البصري التفاعلية وحفظها ومشاركتها. باستخدام Vega، يمكنك وصف المظهر المرئي والسلوك التفاعلي للتمثيل البصري بتنسيق JSON، وإنشاء عروض مستندة إلى الويب باستخدام "لوحة الرسم" أو SVG.
عند رسم مخطط VegaChart، يجب تضمين خيارات حول المواصفات المتعلقة بكيفية إنشاء الرسم البياني في قواعد التمثيل البصري لـ Vega. وفي ما يلي بعض الأمثلة على هذه المواصفات. ويمكن العثور على عدة أمثلة أخرى في صفحة أمثلة VegaChart.
ملاحظة: على الرغم من أنّ Google VegaChart يمكن أن يرسم أي رسم بياني Vega يمكنك تحديده باستخدام Vega JSON Specification (بما في ذلك جميع العناصر في معرض النماذج)، لا تتوفّر ميزات إضافية تتطلب استدعاء Vega API بعد.
مثال بسيط على الرسم البياني الشريطي
في ما يلي مثال بسيط على مخطط VegaChart الذي يرسم مخططًا شريطيًا. (يمكنك الاطّلاع على المثال الأصلي وبرنامج تعليمي مفصل والمخطط الشريطي في محرّر الرسم البياني Vega).
تمثّل هذه الخطوة طريقة أخرى لإنتاج رسم بياني شريطي في "مخطّطات Google"، ولكننا نخطِّط لدمج جميع ميزات الرسوم البيانية الشريطية والعمودية الأخرى في عملية تنفيذ جديدة استنادًا إلى مخطط VegaChart هذا.
في هذا المثال، يُرجى ملاحظة أن خيار "البيانات" سيتم استبداله بما يلي، الذي يستخدم "جدول البيانات" الذي تم توفيره في طلب الرسم باعتباره "المصدر" لكائن بيانات آخر يُسمى "الجدول"، ويتم استخدام "الجدول" في باقي مواصفات 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 المحدد.
على سبيل المثال، يتم إنشاء جدول البيانات التالي باستخدام أعمدة تتضمّن أرقام تعريف للسمتَين
'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".
في هذه الأثناء، يمكنك تحديد أي بيانات إضافية تحتاج إلى استخدامها في الخيار
'vega'
'data'
، إما من خلال
تضمينها أو عن طريق تحميلها من عنوان URL.
ويمكن الاطلاع على أمثلة لكلٍّ منهما أدناه.
خيارات الضبط
الاسم | |
---|---|
منطقة الرسم البياني |
كائن به أعضاء لضبط موضع وحجم منطقة الرسم البياني (حيث يتم رسم الرسم البياني نفسه، باستثناء المحور والتسمية التوضيحية). هناك تنسيقان متوافقان: رقم أو رقم متبوع بعلامة %. الرقم البسيط هو قيمة بوحدات البكسل، ويكون الرقم متبوعًا بعلامة النسبة المئوية نسبة مئوية. مثال: النوع: الكائن
تلقائي: null
|
مخطط إقليمي |
مقدار رسم الرسم البياني من الحد السفلي. النوع: رقم أو سلسلة
تلقائي: تلقائي
|
منطقة الرسم البياني اليسرى |
مقدار رسم الرسم البياني من الحد الأيسر. النوع: رقم أو سلسلة
تلقائي: تلقائي
|
الرسم البياني لمنطقة. |
مقدار رسم الرسم البياني من الحد الأيمن. النوع: رقم أو سلسلة
تلقائي: تلقائي
|
منطقة الرسم البياني العليا |
مقدار رسم المخطط من الحد العلوي. النوع: رقم أو سلسلة
تلقائي: تلقائي
|
مخطط منطقة العرض |
عرض منطقة الرسم البياني. النوع: رقم أو سلسلة
تلقائي: تلقائي
|
ارتفاع الرسم البياني |
رسم بياني لمنطقة ارتفاع. النوع: رقم أو سلسلة
تلقائي: تلقائي
|
الارتفاع |
ارتفاع المخطط بالبكسل. النوع: الرقم
افتراضي: ارتفاع العنصر المضمن
|
width |
عرض المخطط بالبكسل. النوع: الرقم
افتراضي: عرض العنصر المضمن
|
الطرق
الطريقة | |
---|---|
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) |
لعرض الإحداثي x لوحدة البكسل مثال: وعليك باستدعاء هذا بعد رسم المخطط. نوع الإرجاع: رقم
|
getYLocation(dataValue, optional_axis_index) |
لعرض الإحداثي الصادي لبكسل وحدة البكسل مثال: وعليك باستدعاء هذا بعد رسم المخطط. نوع الإرجاع: رقم
|
removeAction(actionID) |
إزالة إجراء تلميح الأداة نوع الإرجاع:
none |
setAction(action) |
تُحدِّد إجراء تلميح لتنفيذه عندما ينقر المستخدم على نص الإجراء.
تستخدم الطريقة
يجب ضبط جميع إجراءات التلميحات قبل استدعاء طريقة الرسم البياني نوع الإرجاع:
none |
setSelection() |
لاختيار كيانات الرسم البياني المحددة. لإلغاء أي اختيار سابق.
بالنسبة إلى هذا الرسم البياني، لا يمكن اختيار سوى كيان واحد في كل مرة.
نوع الإرجاع: لا شيء
|
clearChart() |
محو الرسم البياني وإصدار جميع الموارد المخصّصة له نوع الإرجاع: لا شيء
|
الأحداث
للحصول على مزيد من المعلومات عن كيفية استخدام هذه الأحداث، يمكنك الاطّلاع على التفاعل الأساسي والتعامل مع الأحداث وتنشيط الأحداث.
الاسم | |
---|---|
animationfinish |
يتم الإطلاق عند اكتمال الرسوم المتحركة للنقل. الخصائص: بلا
|
click |
يتم الإطلاق عندما ينقر المستخدم داخل الرسم البياني. ويمكن استخدامها لتحديد وقت النقر على العنوان أو عناصر البيانات أو إدخالات وسيلة الإيضاح أو المحاور أو خطوط الشبكة أو التصنيفات. الخصائص: targetID
|
error |
يتم الإطلاق عند حدوث خطأ عند محاولة عرض الرسم البياني. الخصائص: رقم التعريف، الرسالة
|
legendpagination |
يتم الإطلاق عندما ينقر المستخدم على أسهم ترقيم الصفحات. لإرجاع فهرس الصفحة الحالي المستند إلى الصفر وإجمالي عدد الصفحات. الخصائص: currentPageIndex, totalPages
|
onmouseover |
يتم الإطلاق عندما يمرر المستخدم الماوس فوق وحدة مرئية. لإرجاع فهارس الصفوف والأعمدة الخاصة بعنصر جدول البيانات المقابل. الخصائص: صف، عمود
|
onmouseout |
يتم الإطلاق عندما يمرر المستخدم بعيدًا عن وحدة مرئية. لإرجاع فهارس الصفوف والأعمدة الخاصة بعنصر جدول البيانات المقابل. الخصائص: صف، عمود
|
ready |
المخطط جاهز لاستدعاءات الطرق الخارجية. إذا كنت تريد التفاعل مع الرسم البياني وطرق الاتصال بعد رسمه، عليك إعداد مستمع لهذا الحدث قبل طلب طريقة الخصائص: بلا
|
select |
يتم الإطلاق عندما ينقر المستخدم على كيان مرئي. للاطّلاع على ما تم اختياره، يمكنك الاتصال
الخصائص: بلا
|
سياسة البيانات
تتم معالجة جميع الرموز والبيانات وعرضها في المتصفح. ولا يتم إرسال أي بيانات إلى أي خادم.