التصور: مخطط مساحي (صورة)

ملاحظة مهمة: لقد تم إيقاف جزء "مخططات الصور" في "أدوات مخططات Google" رسميًا اعتبارًا من 20 نيسان (أبريل) 2012. وسيبقى بإمكانك استخدامه وفقًا لسياسة الإيقاف المتّبعة لدينا.

  1. Overview
  2. مثال
  3. جارٍ التحميل
  4. تنسيق البيانات
  5. خيارات الإعداد
  6. الطُرق
  7. الأحداث
  8. سياسة البيانات

نظرة عامة

رسم بياني مساحي يتم عرضه كصورة باستخدام Google Charts API

مثال

 
<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، وإذا كان العمود الأول رقمًا، لن يتم عرض أي تصنيفات للمحور س. يجب أن تكون جميع الأعمدة (باستثناء العمود الأول) أرقامًا. وليس هناك حدّ أقصى لعدد الأعمدة.

خيارات الضبط

الاسم النوع القيمة التلقائية الوصف
backgroundColor سلسلة '#FFFFFF' (أبيض) لون خلفية الرسم البياني في تنسيق ألوان Chart API
الألوان مصفوفة<string> تلقائية استخدِم هذا الخيار لتحديد ألوان معيّنة لكل سلسلة بيانات. ويتم تحديد الألوان في تنسيق ألوان Chart API. يُستخدم اللون i في عمود البيانات i، والذي يلتف حول البداية إذا كان هناك أعمدة بيانات أكثر من الألوان. إذا كانت صيغ اللون الواحد مقبولة لكل السلاسل، استخدِم الخيار color بدلاً من ذلك.
enableEvents boolean false يؤدي إلى طرح الرسوم البيانية للأحداث التي يشغّلها المستخدم، مثل النقر أو الماوس. لا تتوفّر هذه الميزة إلا لأنواع محددة من الرسوم البيانية. يمكنك الاطّلاع على الأحداث أدناه.
الطول الرقم ارتفاع الحاوية ارتفاع الرسم البياني بالبكسل
أسطورة سلسلة "يمين" موضع ونوع وسيلة الإيضاح. يمكن أن تكون الحالة إحدى القيم التالية:
  • "right" - إلى يمين المخطط.
  • "يسار" - إلى يسار الرسم البياني
  • "أعلى" - أعلى الرسم البياني
  • "أسفل" - أسفل الرسم البياني.
  • 'none' - لا يتم عرض أي وسيلة إيضاح.
الحد الأقصى الرقم تلقائية الحد الأقصى للقيمة المراد عرضها في المحور "ص"
دقيقة الرقم تلقائية أدنى قيمة يمكن عرضها في المحور ص.
showCategoryLabels boolean صحيح في حال الضبط على "خطأ"، ستتم إزالة تسميات الفئات (تصنيفات المحور س).
showValueLabels boolean صحيح إذا تم التعيين على "false"، فستتم إزالة تسميات القيم (تصنيفات المحور ص).
title سلسلة بلا عنوان النص المطلوب عرضه أعلى الرسم البياني
valueLabelsInterval الرقم تلقائية الفاصل الزمني الذي يتم خلاله إظهار تصنيفات محور القيمة. على سبيل المثال، إذا كانت قيمة السمة min هي 0 والقيمة max هي 100 والقيمة valueLabelsInterval هي 20، سيعرض الرسم البياني تصنيفات المحاور على القيم التالية: (0 و20 و40 و60 و80 100).
العرض الرقم عرض الحاوية عرض الرسم البياني بالبكسل.

الطُرق

الطريقة نوع القيمة التي يتم عرضها الوصف
draw(data, options) لا ينطبق لرسم الرسم البياني.

الأحداث

يمكنك التسجيل للاستماع إلى الفعاليات الموضّحة في صفحة الرسم البياني للصور العامة.

سياسة البيانات

يُرجى الرجوع إلى سياسة التسجيل في Chart API.