تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

ملاحظة مهمة: لقد تم إيقاف جزء "مخططات الصور" في "أدوات مخططات Google" رسميًا اعتبارًا من 20 نيسان (أبريل) 2012. وسيبقى بإمكانك استخدامه وفقًا لسياسة الإيقاف المتّبعة لدينا.

Overview
مثال
جارٍ التحميل
تنسيق البيانات
خيارات الإعداد
الطُرق
الأحداث
سياسة البيانات

نظرة عامة

رسم بياني دائري يتم عرضه كصورة باستخدام Google Charts API.

مثال

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagepiechart"]});
      google.charts.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.ImagePieChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

جارٍ التحميل

اسم حزمة "google.charts.load" هو "imagepiechart":

  google.charts.load('current', {packages: ['imagepiechart']});

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

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

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

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

خيارات الضبط

يمكنك تحديد الخيارات التالية كجزء من كائن options الذي يتم تمريره إلى طريقة draw() للتمثيل البصري.

الاسم	النوع	القيمة التلقائية	الوصف
backgroundColor	سلسلة	'#FFFFFF' (أبيض)	لون خلفية الرسم البياني في تنسيق ألوان Chart API
اللون	سلسلة	تلقائية	تحدد لونًا أساسيًا لاستخدامه في كل السلاسل، وستكون كل سلسلة تدرجًا للون المحدد. ويتم تحديد الألوان في تنسيق ألوان Chart API. يتم تجاهل السياسة إذا تم تحديد `colors`.
الألوان	مصفوفة<string>	تلقائية	استخدِم هذا الخيار لتحديد ألوان معيّنة لكل سلسلة بيانات. ويتم تحديد الألوان في تنسيق ألوان Chart API. يُستخدم اللون i في عمود البيانات i، والذي يلتف حول البداية إذا كان هناك أعمدة بيانات أكثر من الألوان. إذا كانت صيغ اللون الواحد مقبولة لكل السلاسل، استخدِم الخيار `color` بدلاً من ذلك.
enableEvents	boolean	false	يؤدي إلى طرح الرسوم البيانية للأحداث التي يشغّلها المستخدم، مثل النقر أو الماوس. لا تتوفّر هذه الميزة إلا لأنواع محددة من الرسوم البيانية. يمكنك الاطّلاع على الأحداث أدناه.
الطول	الرقم	ارتفاع الحاوية	ارتفاع الرسم البياني بالبكسل
is3D	boolean	false	في حال ضبطها على "صحيح"، يتم عرض رسم بياني ثلاثي الأبعاد.
تصنيفات	سلسلة	"بدون"	التصنيف، إن وجد، الذي سيظهر لكل شريحة. اختَر من بين القيم التالية: 'none' - لا توجد تصنيفات. "القيمة" - استخدام قيمة الشريحة كتسمية. "الاسم" - استخدم اسم الشريحة (اسم العمود).
أسطورة	سلسلة	"يمين"	موقع وسيلة الإيضاح على الرسم البياني. اختَر إحدى القيم التالية: 'top' أو 'bottom' أو 'left' أو 'right' أو 'none'.
title	سلسلة	بلا عنوان	النص المطلوب عرضه أعلى الرسم البياني
العرض	الرقم	عرض الحاوية	عرض الرسم البياني بالبكسل.

الطُرق

الطريقة	نوع القيمة التي يتم عرضها	الوصف
`draw(data, options)`	لا ينطبق	لرسم الرسم البياني.

الأحداث

يمكنك التسجيل للاستماع إلى الفعاليات الموضّحة في صفحة الرسم البياني العام للصور.

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

يُرجى الرجوع إلى سياسة التسجيل في Chart API.