التمثيل البصري: مخطط المنطقة (الإصدار القديم)

منهي العمل به

تم استبدال هذا العرض المرئي بإصدار جديد. يُرجى استخدامه بدلاً من ذلك. لتسهيل نقل البيانات، يُرجى الرجوع إلى صفحة ملاحظات الإصدار.

نظرة عامة

رسم بياني مساحي يتم عرضه داخل المتصفّح باستخدام الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) أو VML يتم عرض النصائح عند النقر على النقاط. يحرّك الخطوط عند النقر على إدخالات وسيلة الإيضاح.

بواسطة: Google

مثال

أنشِئ رموزًا برمجية بنفسك على مساحة اللعب المرئي

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["areachart"]});
      google.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.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

جارٍ التحميل

اسم حزمة "google.load" هو "areachart".

  google.load("visualization", "1", {packages: ["areachart"]});

اسم فئة العرض المرئي هو google.visualization.AreaChart. 

  var visualization = new google.visualization.AreaChart(container);

تنسيق البيانات

يجب أن يكون العمود الأول سلسلة، وأن يحتوي على تسمية الفئة. يمكن أن يتبع هذا العدد أي عدد من الأعمدة، ولكن يجب أن تكون جميعها رقمية. يتم عرض كل عمود كخط منفصل.

خيارات الضبط

الاسم النوع القيمة التلقائية الوصف
axisColor سلسلة أو كائن اللون التلقائي لون المحور. تكون القيم المحتملة مثل تلك الخاصة بخيار الإعداد backgroundColor.
axisBackgroundColor سلسلة أو كائن اللون التلقائي الحدود حول خلفية المحور تكون القيم المحتملة مثل تلك الخاصة بخيار الإعداد backgroundColor.
axisFontSize الرقم تلقائية حجم الخط لنص محور الرسم البياني بالبكسل
backgroundColor سلسلة أو كائن اللون التلقائي لون الخلفية للمنطقة الرئيسية من الرسم البياني. وقد يكون أحد الخيارات التالية:
  • سلسلة لونها مدعومة بتنسيق HTML، على سبيل المثال "أحمر" أو " #00cc00"
  • كائن ذو السمتَين stroke fill وstrokeSize يجب أن يكون stroke وfill سلسلة ذات لون، المَعلمة المَعلمة StrSize هو رقم. مثلاً: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1} لاستخدام التعبئة فقط، بدون ضغط، استخدم stroke:null, strokeSize: 0.
borderColor سلسلة أو كائن اللون التلقائي الحدود حول عناصر الرسم البياني تكون القيم المحتملة مثل تلك الخاصة بخيار الإعداد backgroundColor.
الألوان مصفوفة من السلاسل الألوان التلقائية الألوان المراد استخدامها لعناصر الرسم البياني مصفوفة من السلاسل. ويكون كل عنصر عبارة عن سلسلة لون متوافق مع HTML، على سبيل المثال "red" أو "#00cc00".
enableTooltip boolean صحيح في حال ضبط هذه السياسة على "صحيح"، يتم عرض تلميحات الأدوات عندما ينقر المستخدم على نقطة بيانات.
focusBorderColor سلسلة أو كائن اللون التلقائي يشير إلى الحد حول عناصر الرسم البياني محل التركيز (يُشار إليه بالماوس). تكون القيم المحتملة مثل تلك الخاصة بخيار الإعداد backgroundColor.
الطول الرقم ارتفاع الحاوية ارتفاع الرسم البياني بالبكسل
isStacked boolean false في حال ضبطها على "صحيح"، يتم تكديس قيم الأسطر (يتم التراكم).
أسطورة سلسلة "يمين" موضع ونوع وسيلة الإيضاح. يمكن أن تكون الحالة إحدى القيم التالية:
  • "right" - إلى يمين المخطط.
  • "يسار" - إلى يسار الرسم البياني
  • "أعلى" - أعلى الرسم البياني
  • "أسفل" - أسفل الرسم البياني.
  • 'none' - لا يتم عرض أي وسيلة إيضاح.
legendBackgroundColor سلسلة أو كائن اللون التلقائي لون الخلفية لمنطقة وسيلة الإيضاح في الرسم البياني تكون القيم المحتملة مثل تلك الخاصة بخيار الإعداد backgroundColor.
legendFontSize الرقم تلقائية حجم خط وسيلة الإيضاح، بالبكسل.
legendTextColor سلسلة أو كائن اللون التلقائي لون نص وسيلة الإيضاح. تكون القيم المحتملة مثل تلك الخاصة بخيار الإعداد backgroundColor.
lineSize الرقم 2 عرض الخط بالبكسل استخدِم الصفر لإخفاء جميع الأسطر وعرض النقاط فقط.
logScale boolean false إذا كانت القيمة هي true، يجب ضبط حجم المحور الرئيسي لوغاريتميًا.
الحد الأقصى الرقم تلقائية تحدّد أعلى خط شبكة للمحور ص. سيكون خط الشبكة الفعلي أكبر من قيمتين: قيمة الخيار القصوى، أو أعلى قيمة بيانات، وسيتم تقريبها إلى علامة الشبكة الأعلى التالية.
دقيقة الرقم تلقائية تحدّد أقل خط شبكة للمحور ص. سيكون خط الشبكة الفعلي أسفل قيمتين: قيمة الخيار الأدنى أو أدنى قيمة بيانات، وسيتم تقريبها إلى علامة الشبكة السفلى التالية.
pointSize الرقم 3 حجم النقاط المعروضة بالبكسل. استخدِم صفرًا لإخفاء جميع النقاط.
reverseAxis boolean false في حال ضبطها على "صحيح"، سيتم رسم الفئات من اليمين إلى اليسار. الإعداد الافتراضي هو الرسم من اليسار إلى اليمين.
showCategories boolean صحيح إذا كانت القيمة هي true، سيتم عرض تصنيفات الفئات. وفي حال اختيار القيمة "false"، لن يتم إجراء ذلك.
title سلسلة بلا عنوان النص المطلوب عرضه أعلى الرسم البياني
titleX سلسلة بلا عنوان النص المطلوب عرضه أسفل المحور الأفقي.
titleY سلسلة بلا عنوان النص المطلوب عرضه على المحور العمودي.
titleColor سلسلة أو كائن اللون التلقائي لون عنوان الرسم البياني. تكون القيم المحتملة مثل تلك الخاصة بخيار الإعداد backgroundColor.
titleFontSize الرقم تلقائية حجم الخط لعنوان الرسم البياني، بالبكسل.

tooltipFontSize		 الرقم 11 حجم خط نص التلميح. قد يتم تصغير هذا الحجم إذا كان التلميح صغيرًا جدًا بحيث لا يمكنه الاحتفاظ بالنص بالخط المحدّد.
tooltipHeight
 الرقم 60 تمثّل هذه السمة ارتفاع التلميح بالبكسل. يكون ارتفاع التلميح ثابتًا، ولن يزداد أو يتقلّص أبدًا ليلائم طول النص أو حجم خطه. وسيتم اقتصاص أي مقياس يزيد عن 1/3 ارتفاع الرسم البياني.
tooltipWidth الرقم 120 عرض التلميح بالبكسل يكون عرض التلميح ثابتًا، ولن يزداد أو يتقلّص أبدًا ليلائم طول النص أو حجم خطه. مع ذلك، سيتم اقتصاص أي جزء يزيد عن عرض الرسم البياني.
العرض الرقم عرض الحاوية عرض الرسم البياني بالبكسل.

الطُرق

الطريقة نوع القيمة التي يتم عرضها الوصف
draw(data, options) لا ينطبق لرسم الرسم البياني.
getSelection() مصفوفة عناصر الاختيار تنفيذ عادي getSelection(). العناصر المحدّدة هي عناصر الأعمدة والخلايا. يمكن للمستخدم اختيار عمود أو خلية واحدة فقط في كل مرة.
setSelection() لا ينطبق هي عملية تنفيذ عادية لـ setSelection()، ولكنها تتيح اختيار عنصر واحد فقط. يتم التعامل مع كل إدخال تحديد كعمود أو تحديد خلية. يُرجى العِلم أنّه لا يمكن اختيار عمود التصنيف.

الأحداث

الاسم الوصف أماكن إقامة
onmouseover يتم إطلاقها عندما يمرر المستخدم مؤشر الماوس فوق نقطة ويمر في فهارس الصف والعمود للخلية المقابلة. صف، عمود
onmouseout يتم إطلاقها عندما يتحرك المستخدم بعيدًا عن نقطة، ويمر في فهارس الصف والعمود للخلية المقابلة. صف، عمود
ready الرسم البياني جاهز لاستدعاءات الطرق الخارجية. إذا كنت تريد التفاعل مع الرسم البياني وطرق الاتصال بعد رسمه، عليك إعداد أداة استماع لهذا الحدث قبل استدعاء طريقة draw، وعدم الاتصال بها إلا بعد تنشيط الحدث. لا ينطبق
select يتم الإطلاق عندما ينقر المستخدم على نقطة أو وسيلة إيضاح. عند تحديد نقطة، يتم اختيار الخلية المقابلة في جدول البيانات، وعند اختيار وسيلة إيضاح، يتم اختيار العمود المقابل في جدول البيانات. لمعرفة ما تم اختياره، يمكنك الاتصال بالرقم getSelection(). لا ينطبق

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

تتم معالجة جميع الرموز والبيانات وعرضها في المتصفّح. ولا يتم إرسال أي بيانات إلى أي خادم.