مهم: لقد تم جزء رسمي من جزء مخططات الصور في أدوات مخطط Google اعتبارًا من 20 نيسان (أبريل) 2012. وسيستمر العمل بموجب سياسة الإيقاف.
نظرة عامة
مخطط الصور العام هو برنامج تضمين عام لجميع المخططات التي تنتجها واجهة برمجة تطبيقات مخطط Google. يُرجى قراءة مستندات واجهة برمجة التطبيقات للرسم البياني قبل محاولة استخدام هذا التمثيل البصري. تجدر الإشارة إلى أنّه يمكنك إرسال ما يصل إلى 16 ألف بيانات باستخدام هذا التمثيل البصري، على عكس الحدّ الأقصى المسموح به الذي يبلغ 2 كيلو بايت في الطلبات المباشرة على واجهة برمجة التطبيقات للرسم البياني.
ويتم تمرير كل البيانات إلى المخططات باستخدام جدول بيانات أو DataView. إضافةً إلى ذلك، يتم تمرير بعض التصنيفات كأعمدة في جدول البيانات.
يتم تمرير جميع معلمات عناوين URL الأخرى لواجهة برمجة التطبيقات للرسم البياني (باستثناء chd) كخيارات.
بواسطة: Google
أمثلة
في ما يلي أمثلة على عدة أنواع مختلفة من الرسومات البيانية.
رسم بياني خطي
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addColumn('string');
// Row data is [chl, data point, point label]
dataTable.addRows([
['January',40,undefined],
['February',60,'Initial recall'],
['March',60,'Product withdrawn'],
['April',45,undefined],
['May',47,'Relaunch'],
['June',75,undefined],
['July',70,undefined],
['August',72,undefined]
]);
var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};
var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='line_div'></div>
</body>
</html>
رسم بياني شريطي عمودي
ملاحظة: في الرسوم البيانية الشريطية المُلتفّة، لا تحتاج إلى تحديد chxt='x' كما تفعل في حالة استدعاء الرسم البياني بنفسك، وإذا لم تحدّد محورًا، سيحاول الرسم البياني العام للصور إعداد الرسم البياني بشكل صحيح تلقائيًا.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};
var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='bar_div'></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", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['January',12],
['February',8],
['March',3]
]);
var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
colors:['#3399CC','#00FF00','#0000FF']};
var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='pie_div'></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", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[100,10],
[80,20],
[60,30],
[30,40],
[25,50],
[20,60],
[10,70]
]);
var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));
var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='radar_div'></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", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['DZ',0],
['EG',50],
['MG',50],
['GM',35],
['KE',100],
['ZA',100]
]);
var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='map_div'></div>
</body>
</html>
جارٍ التحميل
اسم الحزمة google.charts.load هو "imagechart"
google.charts.load('current', {'packages': ['imagechart']});
اسم فئة التمثيل البصري هو google.visualization.ImageChart
var visualization = new google.visualization.ImageChart(container_div);
تنسيق البيانات
هناك تنسيقان عامّان للبيانات: أحدهما لمخططات الخرائط، والآخر لجميع الرسوم البيانية الأخرى. تجدر الإشارة إلى أنّ التنسيق الرقمي الوحيد المتاح للبيانات هو نوع رقم JavaScript.
ملاحظة يجب عدم ترميز عنوان URL لأي قيم لسلسلة يتم تمريرها كبيانات أو خيارات.
مخططات الخرائط
يأخذ مخطط الخريطة جدول بيانات يتضمن عمودين مطلوبين:
- العمود الأول - [string] رمز البلد أو الولاية/المقاطعة.
- العمود الثاني - [number] قيمة هذا البلد أو الولاية.
اطّلِع على مستندات الرسم البياني للخريطة للحصول على مزيد من المعلومات.
الرسوم البيانية غير المتعلقة بالخرائط
تستخدم الرسوم البيانية التي لا تستند إلى خريطة جدولاً للبيانات يتضمّن عمودَين اختياريَين (عمود في البداية وآخر في النهاية) وعمودًا واحدًا أو أكثر للبيانات في ما يلي:
- العمود الأول - [اختيارية، السلسلة] يمثل كل إدخال تصنيفًا مستخدَمًا على المحور "س" (يعادل المعلَمة
chlأوchxl) للرسوم البيانية التي تتيح ذلك. - الأعمدة التالية - أي عدد من الأعمدة الرقمية، يمثل كل منها سلسلة بيانات.
- الأعمدة الأخيرة - [اختيارية، سلسلة] أي عدد من أعمدة السلسلة
بعد أعمدة البيانات، حيث يمثل كل إدخال تصنيف
نقطة بيانات للرسوم البيانية التي تتيحه. إذا كنت تريد استخدام هذا العمود،
يجب تحديد الخيار
annotationColumns.
سيتم عرض البيانات بطرق مختلفة، بناءً على نوع الرسم البياني. راجِع مستندات الرسم البياني.
ملاحظة حول فهارس الأعمدة: يزيل الرسم البياني العام للرسم البياني أعمدة السلسلة من جدول البيانات قبل إرسال الجدول إلى خدمة واجهة برمجة التطبيقات للرسم البياني. لذلك، تتضمّن فهارس الأعمدة في الخيارات والأساليب والأحداث المحدّدة في هذه الصفحة أعمدة السلسلة في عدد الفهارس، ولكن تتجاهل فهارس الأعمدة في أي خيارات يتم معالجتها من خلال خدمة Chart API (على سبيل المثال، الخيار chm) أعمدة السلسلة في عدد الفهرس.
خيارات الضبط
تم تحديد الخيارات التالية لهذا التمثيل البصري. ويمكنك تحديدها في كائن الخيارات
الذي يتم تمريره إلى طريقة draw() للتمثيل البصري.
ليست كل الخيارات التالية متوافقة مع جميع أنواع الرسوم البيانية. راجِع المستندات الخاصة بنوع الرسم البياني الثابت للصور. يمكنك تمرير أي معلمة عنوان URL لواجهة برمجة التطبيقات للرسم البياني كخيار. على سبيل المثال، سيتم تحديد معلَمة عنوان URL chg=50,50 من التمثيل البياني على النحو التالي: options['chg'] = '50,50'.
ملاحظة عن الألوان: يتم تحديد خيارات الألوان
مثل colors وcolor وbackgroundColor
بتنسيق لون واجهة برمجة التطبيقات للرسم البياني.
يشبه هذا التنسيق تنسيق #RRGGBB باستثناء أنه يتضمن رقمًا سداسيًا عشريًا رابعًا اختياريًا للإشارة إلى الشفافية. لا يمكن استخدام ألوان يمكن للمستخدمين قراءتها، مثل
"أحمر" و"أخضر" و"أزرق" وغيرها. إنّ تنسيق الألوان في "واجهة برمجة التطبيقات للرسم البياني"
لا يتضمن الرمز البادئ #، ولكن ستقبل خيارات العرض المرئي للرسم البياني العام
رموز الألوان التي تتضمّن علامة # أو بدونها.
| الاسم | النوع | القيمة التلقائية | الوصف |
|---|---|---|---|
| أعمدة التعليقات التوضيحية | المصفوفة<object> | لا ينطبق | تصنيفات نقاط البيانات لمختلف أنواع الرسوم البيانية. هذه مصفوفة من الكائنات، يعيّن كل منها تصنيفًا منسقًا لنقطة بيانات واحدة على الرسم البياني. لا يتوفّر هذا الخيار إلا للرسوم البيانية التي تتيح استخدام نقاط البيانات (راجِع الموضوع المرتبط لمعرفة أي منها)، ويجب أن يحتوي جدول البيانات على عمود واحد على الأقل من أعمدة تصنيف السلسلة. يحتوي كل كائن في المصفوفة على الخصائص التالية:
مثال - يحدد هذا المقتطف تصنيفًا نصًا أسود بدقة 12 بكسل، مع نص مأخوذ من العمود 0، ومعدًا لنقطة البيانات في العمود 2 للصف نفسه: |
| لون الخلفية | سلسلة | '#FFFFFF' (أبيض) | لون خلفية الرسم البياني بتنسيق لون واجهة برمجة التطبيقات للرسم البياني. |
| لون | سلسلة | تلقائي | لتحديد لون أساسي لاستخدامه في جميع السلاسل، وستكون كل سلسلة تدرجًا للون محدّد. يتم تحديد الألوان في تنسيق لون واجهة برمجة التطبيقات للرسم البياني.
يتم التجاهل إذا تم تحديد colors. |
| ألوان | مصفوفة<string> | تلقائي | استخدِم هذا الإعداد لتخصيص ألوان محدّدة لكل سلسلة بيانات. ويتم تحديد الألوان بالتنسيق اللوني لواجهة برمجة تطبيقات الرسم البياني.
يُستخدم اللون i لعمود البيانات i، مع الالتفاف حول بدايته إذا كان عدد أعمدة البيانات أكبر من عدد الألوان. إذا كانت الصيغ ذات اللون الواحد
مقبولة لجميع السلاسل، استخدِم الخيار color
بدلاً من ذلك. |
| تمكين الأحداث | منطقي | خطأ | يتسبب في عرض المخططات لأحداث من إنشاء المستخدم مثل النقر أو الماوس. غير متاح إلا لأنواع محددة من المخططات. راجع الأحداث أدناه. |
| fill | منطقي | خطأ | في حال التعيين على "true"، يتم ملء المنطقة تحت كل سطر. متاحة فقط للمخططات الخطية. |
| العمود المخفي الأول | number | لا ينطبق | فهرس عمود البيانات. لن يتم استخدام العمود المُدرَج بالإضافة إلى جميع الأعمدة التالية لرسم عناصر سلسلة الرسوم البيانية الرئيسية (مثل الخطوط على الرسم البياني الخطي أو الأشرطة على الرسم البياني الشريطي)، ولكن يتم استخدامه كبيانات للعلامات والعلامات التوضيحية الأخرى. يُرجى العِلم أنّه يتم تضمين أعمدة السلسلة في حساب الفهرس هذا. |
| الارتفاع | number | 200 | ارتفاع المخطط بالبكسل. وفي حال عدم توفّر النطاق المقبول أو عدم توفره، يتم استخدام ارتفاع العنصر المتضمّن. وإذا كان هذا خارج النطاق المقبول أيضًا، سيتم استخدام الارتفاع التلقائي. |
| تصنيفات | سلسلة | "لا شيء" | [المخطط الدائري فقط] ما هو التصنيف الذي سيتم عرضه لكل شريحة، إن وُجد. اختَر من بين القيم التالية:
|
| أسطورة | سلسلة | 'لليمين' | مكان عرض وسيلة إيضاح الرسم البياني بالنسبة إلى الرسم البياني حدِّد أحد الخيارات التالية: "top" و"bottom" و"left" و"right" و"none". ويتم تجاهله في الرسوم البيانية التي لا تتضمن وسيلة إيضاح (مثل مخططات الخريطة). |
| الحد الأقصى | number | الحد الأقصى لقيمة البيانات | الحد الأقصى للقيمة المعروضة على المقياس. تم تجاهلها للمخططات الدائرية. والقيمة التلقائية هي الحد الأقصى لقيمة البيانات، باستثناء الرسوم البيانية الشريطية، حيث تكون القيمة التلقائية هي الحد الأقصى لقيمة البيانات. ويتم تجاهل هذا في المخططات الشريطية عندما يحتوي الجدول على أكثر من عمود بيانات واحد. |
| دقيقة | number | الحد الأدنى لقيمة البيانات | تمثل هذه الخاصية الحد الأدنى للقيمة المعروضة على المقياس. تم تجاهلها للمخططات الدائرية. والقيمة التلقائية هي الحد الأدنى لقيمة البيانات، باستثناء الرسوم البيانية الشريطية، حيث تكون القيمة التلقائية صفرًا. ويتم تجاهل هذا في المخططات الشريطية عندما يحتوي الجدول على أكثر من عمود بيانات واحد. |
| showCategoryLabels | منطقي | صواب | لتحديد ما إذا كان يجب أن تظهر التصنيفات في محور الفئة (أي الصف). وتتوفّر هذه الميزة للرسم البياني الخطي والشريطي فقط. |
| showValueLabels | منطقي | صواب | تعرض "صحيح" تصنيفًا على محور القيمة. وتتوفّر هذه الميزة فقط للمخططات الشريطية والخطية. |
| عرض عمود واحد | number | لا ينطبق | عرض عمود البيانات المحدّد فقط. ويكون هذا الرقم عبارة عن فهرس يستند إلى الصفر في الجدول، حيث يمثل الصفر عمود البيانات الأول. اللون المعيّن للعمود الواحد هو نفسه الذي يظهر عند عرض جميع الأعمدة. لا يمكن استخدامها مع المخططات الدائرية أو مخططات الخرائط. |
| العنوان | سلسلة | سلسلة فارغة | عنوان الرسم البياني. وإذا لم يتم تحديده، فلن يتم عرض أي عنوان. معلمة الرسم البياني المكافئة هي chtt. |
| فاصل زمني للتصنيفات | number | تلقائي | الفاصل الزمني الذي يتم فيه عرض تصنيفات محور القيمة. على سبيل المثال، إذا كانت قيمة min هي 0 وmax هي 100 وvalueLabelsInterval
20، سيعرض الرسم البياني تصنيفات المحور على الرقم (0 و20 و40 و60 و80 100). |
| width | number | 400 | عرض المخطط بالبكسل. في حال عدم توفّر النطاق المقبول أو عدم توفره، يتم استخدام عرض العنصر المتضمّن. وإذا كان ذلك أيضًا خارج النطاق المقبول، سيتم استخدام العرض التلقائي. |
الطرق
| الطريقة | نوع القيمة التي يتم عرضها | الوصف |
|---|---|---|
draw(data, options) |
لا ينطبق | لرسم الخريطة. |
getImageUrl() |
سلسلة | لعرض عنوان URL لواجهة برمجة التطبيقات لمخطط Google المستخدم لطلب الرسم البياني. ويُرجى العِلم بأنّ هذا الاسم يمكن أن يتضمّن أكثر من 2,000 حرف. يمكنك الاطّلاع على Google Chart API للحصول على مزيد من التفاصيل. |
الأحداث
إذا ضبطت السمة enableEvents على "صحيح"، ستعرض الرسوم البيانية الداعمة
أحداث المستخدم المدرجة في الجدول أدناه. تعرض جميع هذه الأحداث
عنصر event مع الخصائص التالية:
type- سلسلة تمثل نوع الحدث.region: رقم تعريف المنطقة المتأثرة أضِف المعلَمةchof=jsonإلى نوع الرسم البياني الأولي للاطّلاع على قائمة بالأسماء المتاحة. يمكنك الاطّلاع علىchof=jsonللحصول على مزيد من التفاصيل.
| الاسم | الوصف | كتابة القيمة |
|---|---|---|
error |
يتم الإطلاق عند حدوث خطأ عند محاولة عرض الرسم البياني. | id، رسالة |
onmouseover |
يتم الإطلاق عندما يحرك المستخدم الماوس فوق عنصر المخطط. | "تمرير الماوس" |
onmouseout |
يتم الإطلاق عندما يمرر المستخدم بعيدًا عن عنصر في الرسم البياني. | "الماوس" |
onclick |
يتم الإطلاق عندما ينقر أحد المستخدمين على عنصر في الرسم البياني. | "النقر" |
ما هي الرسوم البيانية التي تتيح الأحداث؟
تتيح أي رسوم بيانية تتيح استخدام المعلّمة chof=json عرض الأحداث (أي كل الرسوم البيانية باستثناء الرسوم البيانية الخاصة، مثل
رموز الاستجابة السريعة).
مثال على معالجة الحدث
في ما يلي مثال يوضح شريطًا يسجل نقرات الماوس.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Image Events Sample
</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
// Assign event handler
google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
}
google.charts.setOnLoadCallback(drawVisualization);
// Define an event handler
function mouseEventHandler(event) {
document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
<div id="debugger"></div>
</body>
</html>
سياسة البيانات
يتم إرسال البيانات إلى خدمة Google Chart API.
الأقلمة
يتيح هذا التمثيل البصري أي تطويع للسوق المحلية متاح من خلال خدمة "الرسم البياني من Google".