<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// 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 the data table.
var 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.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
//Div that will hold the pie chart
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
الخطوة الأخيرة هي رسم المخطط. يجب أولاً إنشاء مثيل لفئة الرسم البياني التي تريد استخدامها، ثم استدعاء الدالة draw() على هذه الفئة.
إنشاء مثيل للرسم البياني
يستند كل نوع من أنواع الرسوم البيانية إلى فئة مختلفة هي مدرَجة في مستندات الرسم البياني. على سبيل المثال، يستند الرسم البياني الدائري إلى الفئة google.visualization.PieChart، بينما يستند الرسم البياني الشريطي إلى الفئة google.visualization.BarChart، وهكذا. يتم تضمين كل من المخططات الدائرية والشريطية في حزمة Corechart التي قمت بتحميلها في بداية هذا البرنامج التعليمي. ومع ذلك، إذا كنت ترغب في الحصول على مخطط ثلاثي الأبعاد أو مخطط جغرافي على صفحتك، يجب إضافة حزم "الخريطة ثلاثية الأبعاد" أو "الخرائط الجغرافية".
تستخدم منصات إنشاء الرسوم البيانية في Google معلَمة واحدة: مرجع إلى عنصر DOM الذي يمكن فيه رسم التمثيل البصري.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
رسم الرسم البياني
بعد إعداد بياناتك وخياراتك، ستكون جاهزًا لرسم المخطط.
يجب أن تحتوي صفحتك على عنصر HTML (عادةً <div>) للاحتفاظ بالرسم البياني.
عليك تمرير مرجع من الرسم البياني إلى هذا العنصر،
لذا حدِّد له معرّفًا يمكنك استخدامه لاسترداد مرجع باستخدام document.getElementById().
سيتم استبدال أي شيء داخل هذا العنصر
بالمخطط عند رسمه. ننصحك بتحديد ما إذا كان عليك تحديد حجم عنصر <div> هذا بشكل صريح، ولكن في الوقت الحالي، حدِّد حجم الرسم البياني في ترميز HTML <div>.
يتيح كل رسم بياني طريقة draw() التي تستخدم قيمتَين: عنصر DataTable (أو DataView) يحتفظ ببياناتك، وكائن اختياري لخيارات الرسم البياني. كائن الخيارات غير مطلوب، ويمكنك تجاهله أو إدخال قيمة فارغة لاستخدام الخيارات الافتراضية للمخطط.
بعد طلب draw()، سيتم رسم الرسم البياني في الصفحة. عليك استدعاء الطريقة draw() في كل مرة تغيّر فيها البيانات أو الخيارات وتريد تعديل الرسم البياني.
طريقة draw() غير متزامنة، أي أنها يتم عرضها فورًا، ولكن قد لا يكون المثيل الذي تعرضه متاحًا في الحال. لا بأس في ذلك في العديد من الحالات، حيث سيتم رسم المخطط في النهاية. ومع ذلك، إذا كنت تريد ضبط قيم أو استردادها في رسم بياني بعد طلب draw()، عليك الانتظار إلى أن يتم طرح الحدث الجاهز، ما يشير إلى أنّه تمت تعبئته. سنتناول الاستماع إلى الأحداث في الصفحة التالية.
تحديد المشاكل وحلّها
إذا كان الرسم البياني لا يرسم على الصفحة، إليك بعض الأساليب التي قد تساعدك في حل المشاكل:
- ابحث عن الأخطاء الإملائية. تذكر أن JavaScript لغة حساسة لحالة الأحرف.
- استخدام برنامج تصحيح أخطاء JavaScript في Firefox، يمكنك استخدام وحدة تحكّم JavaScript أو Venkman Debugger أو إضافة Firebug. في Chrome، يمكنك استخدام أدوات المطوّرين (Shift + Ctl + J).
- ابحث عن مجموعة مناقشة واجهة برمجة التطبيقات Google Visualization API. إذا لم تتمكّن من العثور على مشاركة تجيب عن سؤالك، انشر سؤالك على المجموعة مع رابط يؤدي إلى صفحة ويب توضّح المشكلة.