تسرد هذه الصفحة الطرق المختلفة التي يمكنك من خلالها إنشاء مثيل ورسم مخطط على الصفحة. ولكل طريقة مزايا وعيوب، كما هو موضح أدناه.
المحتويات
chart.draw()
هذه هي الطريقة الأساسية التي يتناولها مثال Hello Chart! في هذا المستند. الخطوات الأساسية:
- تحميل برنامج تحميل مكتبة gstatic ومؤثرات عرض مرئية من Google ومكتبات المخططات
- إعداد بياناتك
- إعداد أي خيارات للرسم البياني
- إنشاء مثيل لفئة الرسم البياني، وتمرير مؤشر إلى عنصر حاوية الصفحة
- يمكنك التسجيل بشكل اختياري لتلقّي أي أحداث في الرسم البياني. إذا كنت تنوي استدعاء الطرق في الرسم البياني، يجب الاستماع إلى الحدث "جاهز".
- يمكنك الاتصال بالرقم
chart.draw()
، مع تمرير البيانات والخيارات.
المزايا:
- يمكنك التحكم بشكل كامل في كل خطوة من خطوات العملية.
- ويمكنك التسجيل للاستماع إلى جميع الأحداث المعروضة في الرسم البياني.
العيوب:
- سجل مطوّل
- يجب تحميل جميع مكتبات الرسوم البيانية المطلوبة بشكل صريح.
- في حال إرسال طلبات بحث، يجب تنفيذها يدويًا لمعاودة الاتصال، والتحقق من النجاح، واستخراج
DataTable
المعروضة، وتمريرها إلى الرسم البياني.
مثال:
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> var data; var chart; // Load the Visualization API and the piechart package. google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create our data table. data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Set chart options var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300}; // Instantiate and draw our chart, passing in some options. chart = new google.visualization.PieChart(document.getElementById('chart_div')); google.visualization.events.addListener(chart, 'select', selectHandler); chart.draw(data, options); } function selectHandler() { var selectedItem = chart.getSelection()[0]; var value = data.getValue(selectedItem.row, 0); alert('The user selected ' + value); } </script> </head> <body> <!--Div that will hold the pie chart--> <div id="chart_div" style="width:400; height:300"></div> </body> </html>
ChartWrapper
ChartWrapper
هي فئة ملائمة تتيح لك تحميل جميع مكتبات الرسوم البيانية المناسبة لك، كما تبسِّط عملية إرسال طلبات البحث إلى مصادر بيانات أدوات الرسومات البيانية.
المزايا:
- تعليمات برمجية أقل بكثير
- تحميل كل مكتبات الرسوم البيانية المطلوبة لك
- تسهِّل هذه الميزة عملية الاستعلام عن مصادر البيانات من خلال إنشاء كائن
Query
ومعالجة طلب الاستدعاء نيابةً عنك. - مرِّر معرف عنصر الحاوية ويستدعي getElementByID لك.
- يمكن إرسال البيانات بتنسيقات متنوعة: كمصفوفة من القيم أو كسلسلة JSON حرفية أو معرِّف
DataTable
.
العيوب:
- لا تنشر الدالة
ChartWrapper
حاليًا سوى أحداث التحديد والجاهز والخطأ. للاطّلاع على أحداث أخرى، عليك الحصول على اسم معرِّف في الرسم البياني الملفوف والاشتراك في الأحداث فيه. راجِع مستنداتChartWrapper
للحصول على أمثلة.
أمثلة:
في ما يلي مثال على رسم بياني عمودي باستخدام بيانات تم إنشاؤها محليًا تم تحديدها كمصفوفة. لا يمكنك تحديد تصنيفات الرسوم البيانية أو قيم التاريخ والوقت باستخدام بنية المصفوفة، ولكن يمكنك إنشاء عنصر DataTable
يدويًا بهذه القيم وتمريرها إلى السمة dataTable
.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); // Don't need to specify chart libraries! google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrapper = new google.visualization.ChartWrapper({ chartType: 'ColumnChart', dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'], ['', 700, 300, 400, 500, 600, 800]], options: {'title': 'Countries'}, containerId: 'vis_div' }); wrapper.draw(); } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="vis_div" style="width: 600px; height: 400px;"></div> </body> </html>
فيما يلي مثال على مخطط خطي يحصل على بياناته عن طريق الاستعلام عن جدول بيانات Google. تجدر الإشارة إلى أنّ الرمز لا يحتاج إلى معالجة عملية معاودة الاتصال.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrapper = new google.visualization.ChartWrapper({ chartType: 'LineChart', dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', query: 'SELECT A,D WHERE D > 100 ORDER BY D', options: {'title': 'Countries'}, containerId: 'vis_div' }); wrapper.draw() // No query callback handler needed! } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="vis_div" style="width: 600px; height: 400px;"></div> </body> </html>
وبالاقتران مع التحميل التلقائي، يمكن أن يؤدي ذلك إلى إنشاء رموز برمجية مضغوطة للغاية:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); // Don't need to specify chart libraries! google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrapper = new google.visualization.ChartWrapper({ chartType: 'LineChart', dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', query: 'SELECT A,D WHERE D > 100 ORDER BY D', options: {'title': 'Countries'}, containerId: 'vis_div' }); wrapper.draw() } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="vis_div" style="width: 600px; height: 400px;"></div> </body> </html>
استخدام محرر المخطط مع ChartWrapper
يمكنك استخدام مربّع حوار "محرِّر الرسم البياني" المضمّن في جداول بيانات Google لتصميم رسم بياني، ثم طلب سلسلة ChartWrapper
المتسلسلة التي تمثّل الرسم البياني. يمكنك بعد ذلك نسخ هذه السلسلة ولصقها واستخدامها كما
هو موضّح أعلاه في ChartWrapper
.
يمكنك تضمين محرّر الرسم البياني في صفحتك الخاصة وعرض الطرق للمستخدمين للاتصال بمصادر بيانات أخرى وعرض سلسلة ChartWrapper
. اطّلِع على مستندات ChartEditor
المرجعية للحصول على مزيد من المعلومات.
DrawChart()
DrawChart
هي طريقة ثابتة عمومية تلتف حول ChartWrapper
.
المزايا:
- مثل
ChartWrapper
، لكن استخدامه أقصر قليلاً.
العيوب:
- لا يؤدي هذا الإجراء إلى إرجاع مؤشر إلى برنامج تضمين وبالتالي لن تتمكن من معالجة أي أحداث.
<DOCTYPE html> <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); // Don't need to specify chart libraries! google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { google.visualization.drawChart({ "containerId": "visualization_div", "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1", "query":"SELECT A,D WHERE D > 100 ORDER BY D", "refreshInterval": 5, "chartType": "Table", "options": { "alternatingRowStyle": true, "showRowNumber" : true } }); } google.charts.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization_div" style="width: 600px; height: 400px;"></div> </body> </html>