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

منهي العمل به

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

  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:["piechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
  </head>

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

جارٍ التحميل

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

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

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

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

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

عمودين. يجب أن يكون العمود الأول سلسلة، وأن يحتوي على تسمية الشرائح. ويجب أن يكون العمود الثاني رقمًا وأن يحتوي على قيمة الشريحة.

خيارات الضبط

الاسم النوع القيمة التلقائية الوصف
backgroundColor سلسلة أو كائن اللون التلقائي لون الخلفية للمنطقة الرئيسية من الرسم البياني. أحد الخيارات التالية:
  • سلسلة لونها متوافقة مع HTML، على سبيل المثال "red" أو "#00cc00" أو أو
  • وصف لكائن n بالسمات التالية:
    • stroke - سلسلة لون HTML تصف لون حد الرسم البياني.
    • fill - سلسلة لون HTML تصف لون خلفية الرسم البياني.
    • strokeSize - رقم يصف سُمك حدود الرسم البياني بالبكسل. إذا لم يكن هناك حد، يمكن ضبطه على 0.
      مثال: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}.
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 في حال ضبطها على "صحيح"، يتم عرض رسم بياني ثلاثي الأبعاد.
أسطورة سلسلة "يمين" موضع ونوع وسيلة الإيضاح. يمكن أن تكون الحالة إحدى القيم التالية:
  • "right" - إلى يمين المخطط.
  • "يسار" - إلى يسار الرسم البياني
  • "أعلى" - أعلى الرسم البياني
  • "أسفل" - أسفل الرسم البياني.
  • 'label' - تصنيفات بالقرب من الشرائح.
  • 'none' - لا يتم عرض أي وسيلة إيضاح.
legendBackgroundColor سلسلة أو كائن اللون التلقائي لون الخلفية لمنطقة وسيلة الإيضاح في الرسم البياني تكون القيم المحتملة مثل تلك الخاصة بخيار الإعداد backgroundColor.
legendFontSize الرقم تلقائية حجم خط وسيلة الإيضاح، بالبكسل.
legendTextColor سلسلة أو كائن اللون التلقائي لون نص وسيلة الإيضاح. تكون القيم المحتملة مثل تلك الخاصة بخيار الإعداد backgroundColor.
pieJoinAngle الرقم 0 سيتم دمج أي شريحة أصغر من هذه الزاوية في شريحة عامة تحمل التصنيف "غير ذلك".
pieMinimalAngle الرقم 0

ولن يتم رسم أي شريحة أصغر من هذه الزاوية في الرسم البياني الدائري (على الرغم من أنّها ستحصل على إدخال وسيلة الإيضاح). ستتوسع الشرائح المتبقية لملء المخطط الدائري بنسبة ثابتة. ملاحظة: يمكن أن يؤدي ذلك إلى تشويه القيم الواضحة، لا سيما عندما يكون هذا الرقم كبيرًا، لأنّه تتم إزالة الكمية من المخطط الدائري.

لحساب أحجام الشرائح، يتم ضم الزوايا الأصغر من piejoinAngle إلى الشريحة "Other" (أخرى)، ثم يتم رسم جميع الشرائح الأكبر حجمًا من pieMinimalAngle

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

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

الطُرق

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

الأحداث

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

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

ملاحظة: لا يؤدي النقر على شريحة إلى التبديل بين اختيار خلية وإلغاء اختيارها، لأنّ النقر على الشريحة يؤدي دائمًا إلى اختيارها. من ناحية أخرى، يؤدي النقر على إدخال وسيلة إيضاح إلى التبديل بين تحديد الصف وإلغاء اختياره.

لا ينطبق

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

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