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

منهي العمل به

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

  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:["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);

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

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

خيارات الضبط

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

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

لحساب أحجام الشرائح، يتم ضم الزوايا الأولى الأصغر من pieJoinAngle إلى الشريحة "غير ذلك"، ثم يتم رسم جميع الشرائح الأكبر من pieMinimalAngle
العنوان سلسلة بلا عنوان النص المطلوب عرضه أعلى المخطط.
لون العنوان سلسلة أو كائن اللون التلقائي لون عنوان الرسم البياني. القيم المحتملة هي نفس قيم خيار تهيئة 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().

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

لا ينطبق

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

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