التمثيل البصري: رسم بياني مساحي (الإصدار القديم)

منهي العمل به

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

نظرة عامة

رسم بياني مساحي يتم عرضه داخل المتصفح باستخدام 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);

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

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

خيارات الضبط

الاسم النوع القيمة التلقائية الوصف
لون المحور سلسلة أو كائن اللون التلقائي لون المحور. القيم المحتملة هي نفس قيم خيار تهيئة backgroundColor.
لون خلفية المحور سلسلة أو كائن اللون التلقائي الحد حول خلفية المحور. القيم المحتملة هي نفس قيم خيار تهيئة backgroundColor.
حجم خط المحور number تلقائي حجم خط نص محور الرسم البياني، بالبكسل.
لون الخلفية سلسلة أو كائن اللون التلقائي لون الخلفية للمنطقة الرئيسية من المخطط. وقد يكون أحد الخيارات التالية:
  • سلسلة لونها متوافق مع HTML، على سبيل المثال "أحمر" أو "#00cc00"
  • عنصر يحتوي على الخاصيتين stroke fill وstrokeSize. يجب أن تكون السمة stroke وfill سلسلة لون. ويُذكر أنّ StrikeSize عبارة عن رقم. على سبيل المثال: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1} لاستخدام التعبئة فقط، بدون شطب، استخدم stroke:null, strokeSize: 0.
لون اللون الحدي سلسلة أو كائن اللون التلقائي الحد حول عناصر المخطط. القيم المحتملة هي نفس قيم خيار تهيئة backgroundColor.
ألوان مصفوفة من السلاسل الألوان التلقائية الألوان التي يمكن استخدامها لعناصر الرسم البياني. مصفوفة من السلاسل. كل عنصر عبارة عن سلسلة تكون لونًا متوافقًا مع HTML، على سبيل المثال "أحمر" أو "#00cc00".
تمكين التلميح منطقي صواب وفي حال ضبطها على "صحيح"، تظهر تلميحات الأدوات عندما ينقر المستخدم على نقطة بيانات.
التركيز على حد اللون سلسلة أو كائن اللون التلقائي الحد حول عناصر الرسم البياني محل التركيز (يُشار إليه بالماوس). القيم المحتملة هي نفس قيم خيار تهيئة backgroundColor.
الارتفاع number ارتفاع الحاوية ارتفاع المخطط بالبكسل.
مكدس منطقي خطأ وفي حال ضبطها على "صحيح"، يتم تجميع قيم الأسطر (المتراكمة).
أسطورة سلسلة 'لليمين' موضع ونوع وسيلة الإيضاح. يمكن أن تكون الحالة إحدى القيم التالية:
  • "right" - يسار المخطط.
  • "left" - يسار الرسم البياني.
  • "أعلى" - أعلى المخطط.
  • "bottom" - أسفل المخطط.
  • "لا شيء" - لا يتم عرض تسمية توضيحية.
لون خلفية التسمية التوضيحية سلسلة أو كائن اللون التلقائي لون خلفية منطقة التسمية التوضيحية في الرسم البياني. القيم المحتملة هي نفس قيم خيار تهيئة backgroundColor.
حجم خط التسمية التوضيحية number تلقائي حجم خط التسمية التوضيحية بالبكسل.
لون نص التسمية التوضيحية سلسلة أو كائن اللون التلقائي لون نص التسمية التوضيحية القيم المحتملة هي نفس قيم خيار تهيئة backgroundColor.
حجم الخط number 2 عرض الخط بالبكسل. استخدم الصفر لإخفاء كل الخطوط وعرض النقاط فقط.
مقياس لوغاريتمي منطقي خطأ في حال الضبط على "true"، يجب تحديد المقياس الرئيسي لوغاريتميًا.
الحد الأقصى number تلقائي لتحديد أعلى خط شبكة محور ص. سيكون سطر الشبكة الفعلي أكبر من قيمتَين: قيمة الحدّ الأقصى للخيار أو أعلى قيمة بيانات، ويتم تقريبها إلى علامة الشبكة الأعلى التالية.
دقيقة number تلقائي لتحديد خط الشبكة للمحور الصادي الأدنى. وسيكون سطر الشبكة الفعلي هو القيمة الأدنى لقائمتين: قيمة خيار الحد الأدنى، أو أدنى قيمة بيانات، مع التقريب إلى علامة الشبكة السفلية التالية.
حجم النقطة number 3 حجم النقاط المعروضة بالبكسل. استخدم الصفر لإخفاء كل النقاط.
المحور العكسي منطقي خطأ عند التعيين على "true"، سيتم رسم الفئات من اليمين إلى اليسار. الإعداد الافتراضي هو الرسم من اليسار إلى اليمين.
فئات العرض منطقي صواب إذا كانت القيمة "true"، ستعرض تصنيفات الفئات. إذا كانت القيمة "false"، لن تفعل.
العنوان سلسلة بلا عنوان النص المطلوب عرضه أعلى المخطط.
العنوان س سلسلة بلا عنوان نص للعرض أسفل المحور الأفقي.
العنوان ص سلسلة بلا عنوان النص المطلوب عرضه حسب المحور الرأسي.
لون العنوان سلسلة أو كائن اللون التلقائي لون عنوان الرسم البياني. القيم المحتملة هي نفس قيم خيار تهيئة backgroundColor.
titlefontSize number تلقائي حجم خط عنوان المخطط بالبكسل.

tooltipFontSize		 number 11 حجم خط نص تلميحات الأدوات. ويمكن تقليل هذا إذا كان التلميح صغيرًا جدًا بحيث لا يمكن استيعاب النص في الخط المحدّد.
ارتفاع التلميح
 number 60 ارتفاع التلميح بالبكسل. تم تثبيت ارتفاع التلميح؛ فلن ينمو أو يتقلّص ليتلاءم مع طول النص أو حجم الخط. ولكن سيتم اقتصاص أي عنصر أكبر من ثلث ارتفاع الرسم البياني.
عرض التلميح number 120 عرض التلميح بالبكسل. عرض التلميح ثابت؛ ولن ينمو أو يتقلّص ليتلاءم مع طول النص أو حجم الخط. ولكن سيتم اقتصاص أي شيء أكبر من عرض الرسم البياني.
width number عرض الحاوية عرض المخطط بالبكسل.

الطرق

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

الأحداث

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

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

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