مهم: لقد تم جزء رسمي من جزء مخططات الصور في أدوات مخطط Google اعتبارًا من 20 نيسان (أبريل) 2012. وسيستمر العمل بموجب سياسة الإيقاف.
نظرة عامة
رسم بياني مساحي يتم عرضه كصورة باستخدام واجهة برمجة تطبيقات مخططات 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:["imageareachart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var chart = new google.visualization.ImageAreaChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 240px;"></div>
</body>
</html>
جارٍ التحميل
اسم الحزمة google.charts.load هو "imageareachart"
google.charts.load('current', {packages: ['imageareachart']});
اسم فئة التمثيل البصري هو google.visualization.ImageAreaChart
var visualization = new google.visualization.ImageAreaChart(container);
تنسيق البيانات
يمثّل كل عمود خطًا في الرسم البياني، ويمثل كل إدخال قيمة المحور "ص" عند نقطة المحور "س" نفسها، ويربطها التمثيل البصري بخط مستقيم، ثم يملأ المنطقة تحت الخط.
تتم معالجة البيانات حسب العمود، بدءًا من العمود صفر وتزيد. يتعيّن عليك كتابة الأسطر الأعلى أولاً، ثم الأسطر السفلية، نظرًا لأنه إذا رسمت خطًا سفليًا أولاً، سيتم رسم خط أعلى وإخفاء أي خطوط سفلية. لذلك، حاوِل جعل العمود 1 يحتوي على نقاط أعلى من العمود 2 والعمود 2 أعلى من العمود 3، وهكذا. إذا كان العمود الأيمن يتضمّن نقطة أو نقطتين أعلى من العمود الأيسر، قد يؤدي ذلك إلى حجب السطر السفلي بشكل جزئي ولكنّه سيظل مرئيًا.
يجب أن تكون جميع البيانات من النوع الرقمي باستثناء النوع الأول، ويمكن أن تكون رقمية أو سلسلة. إذا كان العمود الأول من نوع السلسلة، سيتم عرض إدخالات العمود الأول كتصنيفات على X، وإذا كان العمود الأول رقمًا، لن يتم عرض أي تصنيفات للمحور X. يجب أن تكون جميع الأعمدة (باستثناء العمود الأول) أرقامًا. ليس هناك حد لعدد الأعمدة.
خيارات الضبط
| الاسم | النوع | القيمة التلقائية | الوصف |
|---|---|---|---|
| لون الخلفية | سلسلة | '#FFFFFF' (أبيض) | لون خلفية الرسم البياني بتنسيق لون واجهة برمجة التطبيقات للرسم البياني. |
| ألوان | مصفوفة<string> | تلقائي | استخدِم هذا الإعداد لتخصيص ألوان محدّدة لكل سلسلة بيانات. ويتم تحديد الألوان بالتنسيق اللوني لواجهة برمجة تطبيقات الرسم البياني.
يُستخدم اللون i لعمود البيانات i، مع الالتفاف حول بدايته إذا كان عدد أعمدة البيانات أكبر من عدد الألوان. إذا كانت الصيغ ذات اللون الواحد
مقبولة لجميع السلاسل، استخدِم الخيار color
بدلاً من ذلك. |
| تمكين الأحداث | منطقي | خطأ | يتسبب في عرض المخططات لأحداث من إنشاء المستخدم مثل النقر أو الماوس. غير متاح إلا لأنواع محددة من المخططات. راجع الأحداث أدناه. |
| الارتفاع | number | ارتفاع الحاوية | ارتفاع المخطط بالبكسل. |
| أسطورة | سلسلة | 'لليمين' | موضع ونوع وسيلة الإيضاح. يمكن أن تكون الحالة إحدى القيم التالية:
|
| الحد الأقصى | number | تلقائي | الحد الأقصى للقيمة المطلوب عرضها في المحور "ص". |
| دقيقة | number | تلقائي | القيمة الدنيا المطلوب عرضها في المحور "ص". |
| showCategoryLabels | منطقي | صواب | في حال الضبط على "خطأ"، تتم إزالة تصنيفات الفئات (تصنيفات المحور "س"). |
| showValueLabels | منطقي | صواب | وعند الضبط على "خطأ"، تتم إزالة تصنيفات القيم (تصنيفات المحور "ص"). |
| العنوان | سلسلة | بلا عنوان | النص المطلوب عرضه أعلى المخطط. |
| فاصل زمني للتصنيفات | number | تلقائي | الفاصل الزمني الذي يتم فيه عرض تصنيفات محور القيمة. على سبيل المثال، إذا كانت قيمة min هي 0 وmax هي 100 وvalueLabelsInterval
20، سيعرض الرسم البياني تصنيفات المحور على الرقم (0 و20 و40 و60 و80 100). |
| width | number | عرض الحاوية | عرض المخطط بالبكسل. |
الطرق
| الطريقة | نوع القيمة التي يتم عرضها | الوصف |
|---|---|---|
draw(data, options) |
لا ينطبق | لرسم المخطط. |
الأحداث
يمكنك التسجيل لسماع الأحداث الموضحة على صفحة مخطط الصور العامة.
سياسة البيانات
يُرجى الرجوع إلى سياسة تسجيل واجهة برمجة التطبيقات للرسم البياني.