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

منهي العمل به

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

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

نظرة عامة

رسم بياني شريطي عمودي يتم عرضه داخل المتصفّح باستخدام تنسيق 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:["columnchart"]});
      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.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

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

جارٍ التحميل

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

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

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

  var visualization = new google.visualization.ColumnChart(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.
الألوان مصفوفة من السلاسل أو الكائنات الألوان التلقائية

يشير ذلك المصطلح إلى مصفوفة من الألوان يحدّد فيها كل عنصر لون سلسلة واحدة. يجب تحديد عنصر صفيف واحد لكل سلسلة.

  • إذا كانت is3D=false، تكون مصفوفة من ألوان HTML. مثال: color:['#00FF00','orange']
  • إذا كانت السمة is3D=true، تمثّل مصفوفة من ألوان HTML أو عناصر من هذا النوع: {color:face_color, darker:shade_color} حيث يكون color هو لون وجه العنصر وdarker هو لون الظل. مع ذلك، إذا حددت لون HTML لعنصر ثلاثي الأبعاد، سيكون الوجه والظل بنفس اللون، وسيتم تقليل التأثير الثلاثي الأبعاد. مثلاً: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean صحيح أمّا في حال ضبطها على "صحيح"، فسيتم عرض التلميحات عندما ينقر المستخدم على أحد الأعمدة.
focusBorderColor سلسلة أو كائن اللون التلقائي يشير إلى الحد حول عناصر الرسم البياني محل التركيز (يُشار إليه بالماوس). تكون القيم المحتملة مثل تلك الخاصة بخيار الإعداد backgroundColor.
الطول الرقم ارتفاع الحاوية ارتفاع الرسم البياني بالبكسل
is3D boolean false وفي حال ضبطها على "صحيح"، يتم عرض تغيير ثلاثي الأبعاد.
isStacked boolean false في حال ضبطها على "صحيح"، يتم تكديس قيم الأسطر (يتم التراكم).
أسطورة سلسلة "يمين" موضع ونوع وسيلة الإيضاح. يمكن أن تكون الحالة إحدى القيم التالية:
  • "right" - إلى يمين المخطط.
  • "يسار" - إلى يسار الرسم البياني
  • "أعلى" - أعلى الرسم البياني
  • "أسفل" - أسفل الرسم البياني.
  • 'none' - لا يتم عرض أي وسيلة إيضاح.
legendBackgroundColor سلسلة أو كائن اللون التلقائي لون الخلفية لمنطقة وسيلة الإيضاح في الرسم البياني تكون القيم المحتملة مثل تلك الخاصة بخيار الإعداد backgroundColor.
legendFontSize الرقم تلقائية حجم خط وسيلة الإيضاح، بالبكسل.
legendTextColor سلسلة أو كائن اللون التلقائي لون إدخالات النص في وسيلة الإيضاح. تكون القيم المحتملة مثل تلك الخاصة بخيار الإعداد backgroundColor.
logScale boolean false إذا كانت القيمة هي true، يجب ضبط حجم المحور الرئيسي لوغاريتميًا.
الحد الأقصى الرقم تلقائية تحدّد أعلى خط شبكة للمحور ص. سيكون خط الشبكة الفعلي أكبر من قيمتين: قيمة الخيار القصوى، أو أعلى قيمة بيانات، وسيتم تقريبها إلى علامة الشبكة الأعلى التالية.
دقيقة الرقم تلقائية تحدّد أقل خط شبكة للمحور ص. سيكون خط الشبكة الفعلي أسفل قيمتين: قيمة الخيار الأدنى أو أدنى قيمة بيانات، وسيتم تقريبها إلى أسفل إلى علامة الشبكة السفلى التالية .
reverseAxis boolean false في حال ضبطها على "صحيح"، سيتم رسم الفئات من اليمين إلى اليسار. الإعداد الافتراضي هو الرسم من اليسار إلى اليمين.
showCategories boolean صحيح إذا كانت القيمة هي true، سيتم عرض تصنيفات الفئات. وفي حال اختيار القيمة "false"، لن يتم إجراء ذلك.
title سلسلة بلا عنوان النص المطلوب عرضه أعلى الرسم البياني
titleX سلسلة بلا عنوان النص المطلوب عرضه أسفل المحور الأفقي.
titleY سلسلة بلا عنوان النص المطلوب عرضه على المحور العمودي.
titleColor سلسلة أو كائن اللون التلقائي لون عنوان الرسم البياني. تكون القيم المحتملة مثل تلك الخاصة بخيار الإعداد backgroundColor.
titleFontSize الرقم تلقائية حجم الخط لعنوان الرسم البياني، بالبكسل.

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

الطُرق

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

الأحداث

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

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

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