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

منهي العمل به

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

  1. نظرة عامة
  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:["barchart"]});
      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.BarChart(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 هو "barchart" 

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

اسم فئة التمثيل البصري هو google.visualization.BarChart 

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

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

يمثل كل صف في الجدول مجموعة من الأشرطة المجاورة.

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

تتحكم القيمة في صف وعمود معيّن في ارتفاع الشريط المفرد الذي يمثّله هذا الصف والعمود.

خيارات الضبط

الاسم النوع القيمة التلقائية الوصف
لون المحور سلسلة أو كائن اللون التلقائي لون المحور. القيم المحتملة هي نفس قيم خيار تهيئة backgroundColor.
لون خلفية المحور سلسلة أو كائن اللون التلقائي الحد حول خلفية المحور. القيم المحتملة هي نفس قيم خيار تهيئة backgroundColor.
حجم خط المحور number تلقائي حجم خط نص محور الرسم البياني، بالبكسل.
لون الخلفية سلسلة أو كائن اللون التلقائي لون الخلفية للمنطقة الرئيسية من المخطط. وقد يكون أحد الخيارات التالية:
  • سلسلة لونها متوافق مع HTML، على سبيل المثال "أحمر" أو "#00cc00"
  • عنصر يحتوي على الخاصيتين stroke fill وstrokeSize. يجب أن تكون السمة stroke وfill سلسلة لون. ويُذكر أنّ StrikeSize عبارة عن رقم. على سبيل المثال: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1} لاستخدام التعبئة فقط، بدون شطب، استخدم stroke:null, strokeSize: 0.
لون اللون الحدي سلسلة أو كائن اللون التلقائي الحد حول عناصر المخطط. القيم المحتملة هي نفس قيم خيار تهيئة backgroundColor.
ألوان مصفوفة السلاسل أو الكائنات الألوان التلقائية

مصفوفة من الألوان، حيث يحدد كل عنصر لون سلسلة واحدة. يجب عليك تحديد عنصر مصفوفة واحد لكل سلسلة.

  • إذا كانت السمة is3D=false، تمثّل هذه السمة مصفوفة من ألوان HTML. مثال: colors[[#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'}]}
تمكين التلميح منطقي صواب وفي حال ضبطها على "صحيح"، تظهر تلميحات الأدوات عندما ينقر المستخدم على شريط.
التركيز على حد اللون سلسلة أو كائن اللون التلقائي الحد حول عناصر الرسم البياني محل التركيز (يُشار إليه بالماوس). القيم المحتملة هي نفس قيم خيار تهيئة backgroundColor.
الارتفاع number ارتفاع الحاوية ارتفاع المخطط بالبكسل.
ثلاثية الأبعاد منطقي خطأ وعند ضبطها على "صحيح"، يتم عرض تغيير ثلاثي الأبعاد.
مكدس منطقي خطأ وفي حال ضبطها على "صحيح"، يتم تجميع قيم الأسطر (المتراكمة).
أسطورة سلسلة 'لليمين' موضع ونوع وسيلة الإيضاح. يمكن أن تكون الحالة إحدى القيم التالية:
  • "right" - يسار المخطط.
  • "left" - يسار الرسم البياني.
  • "أعلى" - أعلى المخطط.
  • "bottom" - أسفل المخطط.
  • "لا شيء" - لا يتم عرض تسمية توضيحية.
لون خلفية التسمية التوضيحية سلسلة أو كائن اللون التلقائي لون خلفية منطقة التسمية التوضيحية في الرسم البياني. القيم المحتملة هي نفس قيم خيار تهيئة backgroundColor.
حجم خط التسمية التوضيحية number تلقائي حجم خط التسمية التوضيحية بالبكسل.
لون نص التسمية التوضيحية سلسلة أو كائن اللون التلقائي لون نص التسمية التوضيحية القيم المحتملة هي نفس قيم خيار تهيئة backgroundColor.
مقياس لوغاريتمي منطقي خطأ في حال الضبط على "true"، يجب تحديد المقياس الرئيسي لوغاريتميًا.
الحد الأقصى number تلقائي لتحديد أعلى خط شبكة محور ص. سيكون سطر الشبكة الفعلي أكبر من قيمتَين: قيمة الحدّ الأقصى للخيار أو أعلى قيمة بيانات، ويتم تقريبها إلى علامة الشبكة الأعلى التالية.
دقيقة number تلقائي لتحديد خط الشبكة للمحور الصادي الأدنى. وسيكون سطر الشبكة الفعلي هو القيمة الأدنى لقائمتين: قيمة خيار الحد الأدنى، أو أدنى قيمة بيانات، مع التقريب إلى علامة الشبكة السفلية التالية.
المحور العكسي منطقي صواب في حال الضبط على "صحيح" (الخيار التلقائي)، سيتم رسم الفئات من أعلى لأسفل. في حال الضبط على "خطأ"، سيتم رسم الأشرطة من أسفل إلى أعلى.
فئات العرض منطقي صواب إذا كانت القيمة "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(). لا ينطبق

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

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