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

نظرة عامة

رسم بياني دائري يتم عرضه داخل المتصفّح باستخدام SVG أو VML عرض تلميحات أدوات عند تمرير مؤشّر الماوس فوق الشرائح

مثال

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      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 options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

إنشاء مخطط دائري ثلاثي الأبعاد

إذا تم ضبط خيار is3D على true، سيتم رسم المخطط الدائري كما لو كان يحتوي على ثلاثة أبعاد:

تكون قيمة is3D هي false تلقائيًا، لذلك نضبطها هنا بشكل صريح على true: 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      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 options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

إنشاء رسم بياني دائري مجوف

الرسم البياني الكعكي هو رسم بياني دائري يحتوي على ثقب في المنتصف. يمكنك إنشاء مخططات دائرية مجوفة باستخدام الخيار pieHole:

يجب ضبط الخيار pieHole على رقم بين 0 و1، حسب نسبة نصف القطر بين الفتحة والرسم البياني. ستظهر الأرقام التي تتراوح بين 0.4 و0.6 بشكل أفضل في معظم الرسوم البيانية. سيتم تجاهل القيم التي تساوي أو تزيد عن 1، وستؤدي القيمة 0 إلى إغلاق الثقب تمامًا.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      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 options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

لا يمكنك الجمع بين الخيارين pieHole وis3D، وإذا فعلت ذلك، سيتم تجاهل pieHole.

لاحظ أن مخططات Google تحاول وضع التسمية بالقرب من مركز الشريحة قدر الإمكان. إذا كان لديك مخطط دائري مجوف بشريحة واحدة فقط، فقد يقع مركز الشريحة في ثقب الكعكة. في هذه الحالة، قم بتغيير لون التسمية:
الخيارات
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
رمز HTML الكامل
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donut_single" style="width: 900px; height: 500px;"></div>
  </body>
</html>

تدوير مخطط دائري

بشكل افتراضي، تبدأ المخططات الدائرية بالحافة اليسرى للشريحة الأولى التي تشير إلى أعلى مستقيم. يمكنك تغيير ذلك باستخدام الخيار pieStartAngle:

ندير هنا الرسم البياني بزاوية 100 درجة في اتجاه عقارب الساعة باستخدام الخيار pieStartAngle: 100. (لذلك تم اختيارها لأن هذه الزاوية الخاصة تصادف أن تجعل التسمية "الإيطالية" تتناسب داخل الشريحة.)

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

تفجير شريحة

يمكنك فصل الشرائح الدائرية عن بقية الرسم البياني باستخدام السمة offset للخيار slices:

لفصل شريحة، أنشئ كائن slices وخصِّص رقم الشريحة المناسب offset بين 0 و1. في ما يلي، نخصّص إزاحة أكبر تدريجيًا للشرائح 4 (الغوجاراتية) و12 (المراثية) و14 (الأوريا) و15 (البنجابية): 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

إزالة الشرائح

لحذف شريحة، غيِّر اللون إلى 'transparent':

لقد استخدمنا أيضًا pieStartAngle لتدوير الرسم البياني بزاوية 135 درجة، وpieSliceText لإزالة النص من الشرائح، وtooltip.trigger لإيقاف التلميحات:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="pacman" style="width: 900px; height: 500px;"></div>
  </body>
</html>

الحد الأدنى لمستوى ظهور الشريحة

يمكنك ضبط قيمة كحدّ لعرض الشريحة الدائرية بشكل فردي. وتتطابق هذه القيمة مع جزء من الرسم البياني (على أن تكون القيمة 1 للرسم البياني بأكمله. لضبط هذا الحدّ كنسبة مئوية من المجموع الكلي، اقسِم النسبة المئوية المطلوبة على 100 (إذا كانت قيمة الحد الأدنى %20، ستكون القيمة 0.2). 

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

يتم دمج أي شرائح أصغر من هذا الحدّ في شريحة واحدة "غير ذلك"، وتكون القيمة المجمّعة لكل الشرائح أقل من الحدّ المعيّن. 

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

جارٍ التحميل

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

  google.charts.load("current", {packages: ["corechart"]});

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

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

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

الصفوف: يمثّل كل صف في الجدول شريحة.

الأعمدة:

  العمود 0 العمود 1 ... العمود N (اختياري)
الغرض: تصنيفات الشرائح قيم التقطيع ... الأدوار الاختيارية
نوع البيانات: سلسلة الرقم ...
الدور: نطاق البيانات ...
أدوار الأعمدة الاختيارية: بدون قفل بدون قفل ...

خيارات الضبط

الاسم
backgroundColor

لون الخلفية للمنطقة الرئيسية من الرسم البياني. يمكن أن تكون إما سلسلة لون HTML بسيطة، على سبيل المثال: 'red' أو '#00cc00'، أو كائنًا بالسمات التالية.

النوع: سلسلة أو كائن
الوضع التلقائي: "أبيض"
backgroundColor.stroke

لون حد الرسم البياني، كسلسلة لون HTML.

النوع: سلسلة
تلقائي: '#666'
backgroundColor.strokeWidth

عرض الحدود بالبكسل.

النوع: رقم
القيمة التلقائية: 0
backgroundColor.fill

لون تعبئة الرسم البياني، كسلسلة لون HTML.

النوع: سلسلة
الوضع التلقائي: "أبيض"
chartArea

كائن يحتوي على أعضاء لضبط موضع مساحة الرسم البياني وحجمها (حيث يتم رسم الرسم البياني نفسه، باستثناء المحور ووسائل الإيضاح). يمكنك استخدام تنسيقَين: رقم أو رقم متبوعًا بنسبة مئوية. والرقم البسيط هو قيمة بالبكسل، بينما يمثّل الرقم متبوعًا بنسبة مئوية نسبة مئوية. مثلاً: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: كائن
الإعداد التلقائي: قيمة خالية
chartArea.backgroundColor
لون خلفية الرسم البياني عند استخدام سلسلة، يمكن أن تكون إما سلسلة سداسية عشرية (مثل '#fdc') أو اسم لون إنجليزي. وعند استخدام كائن، يمكن توفير السمات التالية:
  • stroke: اللون، يتم تقديمه كسلسلة سداسية عشرية أو اسم اللون الإنجليزي.
  • strokeWidth: في حال توفّره، يتم رسم حدود حول مساحة الرسم البياني للعرض المحدَّد (وبلون stroke).
النوع: سلسلة أو كائن
الوضع التلقائي: "أبيض"
chartArea.left

مقدار المسافة لرسم الرسم البياني من الحد الأيسر.

النوع: رقم أو سلسلة
الإعداد التلقائي: تلقائي
chartArea.top

مقدار المسافة لرسم الرسم البياني من الحد العلوي.

النوع: رقم أو سلسلة
الإعداد التلقائي: تلقائي
chartArea.width

عرض مساحة الرسم البياني

النوع: رقم أو سلسلة
الإعداد التلقائي: تلقائي
chartArea.height

ارتفاع مساحة الرسم البياني

النوع: رقم أو سلسلة
الإعداد التلقائي: تلقائي
الألوان

الألوان المراد استخدامها لعناصر الرسم البياني تمثّل هذه السمة مصفوفة من السلاسل يكون فيها كل عنصر سلسلة لون HTML، على سبيل المثال: colors:['red','#004411'].

النوع: مصفوفة من السلاسل
تلقائي: الألوان التلقائية
enableInteractivity

ما إذا كان الرسم البياني يعرض أحداثًا مستندة إلى المستخدمين أو يتفاعل مع تفاعل المستخدم إذا كانت القيمة "false"، لن يعرض الرسم البياني الأحداث "select" أو غيرها من الأحداث المستندة إلى التفاعل (ولكنه سيعرض أحداثًا جاهزة أو يعرض أخطاء)، ولن يعرض النصّ التمريري أو يتغيّر استنادًا إلى البيانات التي أدخلها المستخدِم.

النوع: قيمة منطقية
القيمة التلقائية:صحيح
fontSize

حجم الخط الافتراضي بالبكسل لجميع النص في الرسم البياني. ويمكنك إلغاء هذا الإجراء باستخدام سمات لعناصر محدَّدة في الرسم البياني.

النوع: رقم
تلقائي: تلقائي
fontName

واجهة الخط التلقائية لكل النص في الرسم البياني ويمكنك إلغاء هذا الإجراء باستخدام سمات لعناصر محدَّدة في الرسم البياني.

النوع: سلسلة
القيمة التلقائية: "Arial"
forceIFrame

لرسم الرسم البياني داخل إطار مضمّن. (يُرجى ملاحظة أنّه في IE8، يتم تجاهل هذا الخيار، ويتم رسم كل مخططات IE8 بالإطارات i-frames).

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
الطول

تمثّل هذه السمة ارتفاع الرسم البياني بالبكسل.

النوع: رقم
التلقائي: ارتفاع العنصر الذي يحتوي على الصورة
is3D

إذا كانت القيمة هي true، سيتم عرض رسم بياني ثلاثي الأبعاد.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
أسطورة

كائن يحتوي على أعضاء لضبط جوانب مختلفة من وسيلة الإيضاح. لتحديد خصائص هذا الكائن، يمكنك استخدام الترميز الحرفي للكائن على النحو الموضّح هنا: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: كائن
الإعداد التلقائي: قيمة خالية
legend.alignment

محاذاة وسيلة الإيضاح. يمكن أن تكون الحالة واحدة مما يلي:

  • 'start' - تتم محاذاتها مع بداية المنطقة المخصصة للوسيلة الإيضاح.
  • 'center' - تكون متمركزة في المنطقة المخصصة للوسيلة الإيضاح.
  • 'end' - تمت محاذاته مع نهاية المنطقة المخصصة للوسيلة الإيضاح.

ترتبط البداية والوسط والنهاية بالنمط - رأسي أو أفقي - للوسيلة الإيضاح. على سبيل المثال، في وسيلة الإيضاح "الأيمن"، تظهر "البدء" و"النهاية" في الأعلى والأسفل على التوالي، وبالنسبة إلى وسيلة الإيضاح "الأعلى"، تظهر "البداية" و"النهاية" على يسار المساحة ويمينها، على التوالي.

وتعتمد القيمة الافتراضية على موضع وسيلة الإيضاح. وبالنسبة إلى وسائل الإيضاح "الأسفل"، يكون الإعداد التلقائي هو "المركز"، فيما تكون وسائل الإيضاح الأخرى هي "البدء".

النوع: سلسلة
تلقائي: تلقائي
legend.position

موضع وسيلة الإيضاح. يمكن أن تكون الحالة واحدة مما يلي:

  • 'bottom' - يعرض وسيلة الإيضاح أسفل الرسم البياني.
  • "labeled" - رسم خطوط تربط الشرائح بقيم البيانات الخاصة بها
  • 'left' - يعرض وسيلة الإيضاح على يسار الرسم البياني.
  • 'none' - لا يعرض أي وسيلة إيضاح.
  • 'right' - يعرض وسيلة الإيضاح على يمين المخطط.
  • "أعلى" - لعرض وسيلة الإيضاح أعلى الرسم البياني
النوع: سلسلة
الوضع التلقائي: "اليمين"
legend.maxLines

الحد الأقصى لعدد الأسطر في وسيلة الإيضاح. اضبط هذا على رقم أكبر من واحد لإضافة أسطر إلى وسيلة الإيضاح. ملاحظة: لا يزال المنطق الدقيق المستخدَم لتحديد العدد الفعلي للسطر المعروض قيد التغير.

لا يعمل هذا الخيار حاليًا إلا عندما تكون ميزة "أفضل موضع" متاحة في "الأعلى".

النوع: رقم
تلقائي: 1
legend.textStyle

كائن يحدد نمط نص وسيلة الإيضاح. يحتوي الكائن على التنسيق التالي:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

يمكن أن تكون السمة color أي سلسلة لون HTML، على سبيل المثال: 'red' أو '#00cc00'. اطّلِع أيضًا على fontName وfontSize.

Type: كائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieHole

إذا كانت القيمة بين 0 و1، تعرض مخططًا دائريًا. الثقب الذي يبلغ نصف قطره يساوي number مضروبًا في نصف قطر الرسم البياني.

النوع: رقم
القيمة التلقائية: 0
pieSliceBorderColor

لون حدود الشريحة. لا ينطبق هذا الإجراء إلا عندما يكون الرسم البياني ثنائي الأبعاد.

النوع: سلسلة
الوضع التلقائي: "أبيض"
pieSliceText

محتوى النص المعروض على الشريحة يمكن أن تكون الحالة واحدة مما يلي:

  • 'percentage' - النسبة المئوية لحجم الشريحة من الإجمالي.
  • 'value' - القيمة الكمية للشريحة.
  • 'label' - اسم الشريحة
  • "بدون" - لا يتم عرض أي نص.
النوع: سلسلة
القيمة التلقائية: "النسبة المئوية"
pieSliceTextStyle

كائن يحدد نمط نص الشريحة. يحتوي الكائن على التنسيق التالي:

{color: <string>, fontName: <string>, fontSize: <number>}

يمكن أن تكون السمة color أي سلسلة لون HTML، على سبيل المثال: 'red' أو '#00cc00'. اطّلِع أيضًا على fontName وfontSize.

Type: كائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieStartAngle

الزاوية، بالدرجات، لتدوير المخطط بها. أمّا الإعدادات التلقائية للسمة 0، فسيتم توجيه الحافة العلوية اليسرى من الشريحة الأولى نحو الأعلى مباشرةً.

النوع: رقم
تلقائي: 0
reverseCategories

إذا كانت القيمة هي true، يتم رسم الشرائح عكس عقارب الساعة. الإعداد التلقائي هو الرسم في اتجاه عقارب الساعة.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
pieResidueSliceColor

لون شريحة الدمج التي تحتوي على كل الشرائح أسفل slice visibilityThreshold

النوع: سلسلة
الإعداد التلقائي: '#ccc'
pieResidueSliceLabel

تصنيف لشريحة الدمج التي تحتوي على كل الشرائح أسفل sliceVisibilityThreshold

النوع: سلسلة
تلقائي: "غير ذلك"
شرائح

مصفوفة من الكائنات، يصف كل منها تنسيق الشريحة المقابلة في الشكل الدائري. لاستخدام القيم التلقائية لشريحة، حدِّد كائنًا فارغًا (أي {}). إذا لم يتم تحديد شريحة أو قيمة، سيتم استخدام القيمة العامة. ويوفّر كل كائن السمات التالية:

  • color - اللون المطلوب استخدامه لهذه الشريحة حدِّد سلسلة لون HTML صالحة.
  • offset - مقدار المسافة لفصل الشريحة عن باقي الدائرة من 0.0 (على الإطلاق) إلى 1.0 (نصف قطر الدائرة).
  • textStyle - لإلغاء pieSliceTextStyle العامة لهذه الشريحة

يمكنك تحديد إما مصفوفة من الكائنات، ينطبق كل منها على الشريحة بالترتيب المحدد، أو يمكنك تحديد كائن حيث يكون لكل فرع مفتاح رقمي يشير إلى الشريحة التي تنطبق عليها. على سبيل المثال، التعريفان التاليان متطابقان، ويشيران إلى أنّ الشريحة الأولى باللون الأسود والرابعة باللون الأحمر: 

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
النوع: مصفوفة من العناصر أو الكائن الذي يضم كائنات متداخلة
تلقائي: {}
sliceVisibilityThreshold

القيمة الكسرية للرسم الدائري، والتي لن تظهر الشريحة أسفلها بشكل منفرد. يتم دمج جميع الشرائح التي لم تتجاوز هذا الحدّ في شريحة "أخرى" واحدة، يمثّل حجمها مجموع أحجامها. الخيار التلقائي هو عدم عرض أي شريحة أصغر من نصف درجة بشكل فردي. 

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
النوع: رقم
القيمة التلقائية: نصف درجة (.5/360 أو 1/720 أو .0014)
title

النص المطلوب عرضه أعلى الرسم البياني

النوع: سلسلة
تلقائي: بلا عنوان
titleTextStyle

كائن يحدد نمط نص العنوان. يحتوي الكائن على التنسيق التالي:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

يمكن أن تكون السمة color أي سلسلة لون HTML، على سبيل المثال: 'red' أو '#00cc00'. اطّلِع أيضًا على fontName وfontSize.

Type: كائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
تلميح

كائن يحتوي على أعضاء لضبط عناصر تلميح مختلفة. لتحديد خصائص هذا الكائن، يمكنك استخدام الترميز الحرفي للكائن، كما هو موضّح هنا: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type: كائن
الإعداد التلقائي: قيمة خالية
tooltip.ignoreBounds

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

ملاحظة: ينطبق هذا فقط على تلميحات HTML. في حال تفعيل هذه السياسة باستخدام تلميحات رسومات موجّهة يمكن تغيير حجمها (SVG)، سيتم اقتصاص أي تجاوز خارج حدود الرسم البياني. راجِع تخصيص محتوى التلميح لمعرفة مزيد من التفاصيل.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
tooltip.isHtml

في حال ضبط السياسة على "صحيح"، يمكنك استخدام تلميحات الأدوات المعروضة بتنسيق HTML (بدلاً من عرضها بتنسيق SVG). راجِع تخصيص محتوى التلميح لمعرفة مزيد من التفاصيل.

ملاحظة: لا يتيح العرض المرئي للرسم البياني الفقاعي تخصيص محتوى تلميح HTML من خلال دور بيانات عمود التلميح.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
tooltip.showColorCode

في حال اختيار القيمة "true"، يمكنك عرض مربّعات ملوّنة بجانب معلومات الشريحة في التلميح.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
tooltip.text

المعلومات التي يجب عرضها عندما يمرِّر المستخدم مؤشر الماوس فوق شريحة دائرية القيم التالية متوافقة:

  • كلاهما - [تلقائي] يعرض القيمة المطلقة للشريحة والنسبة المئوية للشرائح.
  • "القيمة" - لعرض القيمة المطلقة للشريحة فقط.
  • "النسبة المئوية" - لا تعرض سوى النسبة المئوية من الكل التي تمثلها الشريحة.
النوع: سلسلة
تلقائي: "كلاهما"
tooltip.textStyle

كائن يحدد نمط نص التلميح. يحتوي الكائن على التنسيق التالي:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

يمكن أن تكون السمة color أي سلسلة لون HTML، على سبيل المثال: 'red' أو '#00cc00'. اطّلِع أيضًا على fontName وfontSize.

Type: كائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

تفاعل المستخدِم الذي يتسبب في عرض التلميح:

  • "Focus" (التركيز): سيتم عرض التلميح عندما يمرِّر المستخدم مؤشر الماوس فوق العنصر.
  • 'none' - لن يتم عرض التلميح.
  • "الاختيار": سيتم عرض التلميح عندما يختار المستخدم العنصر.
النوع: سلسلة
تلقائي: "التركيز"
العرض

عرض الرسم البياني بالبكسل

النوع: رقم
الإعداد التلقائي: عرض العنصر المتضمّن

الطُرق

الطريقة
draw(data, options)

لرسم الرسم البياني. لا يقبل الرسم البياني طلبات الطُرق الإضافية إلا بعد تنشيط حدث ready. Extended description.

نوع الإرجاع: لا شيء
getAction(actionID)

عرض كائن إجراء التلميح مع actionID المطلوب.

نوع الإرجاع: عنصر
getBoundingBox(id)

تعرض كائنًا يحتوي على يسار عنصر الرسم البياني id وأعلاه وعرضه وارتفاعه. لم يتم توثيق تنسيق id بعد (هذه هي القيم التي تعرضها معالِجات الأحداث)، ولكن إليك بعض الأمثلة:

var cli = chart.getChartLayoutInterface();

ارتفاع مساحة الرسم البياني
cli.getBoundingBox('chartarea').height
عرض الشريط الثالث في السلسلة الأولى من رسم بياني شريطي أو عمودي
cli.getBoundingBox('bar#0#2').width
مربع ربط الإسفين الخامس لمخطط دائري
cli.getBoundingBox('slice#4')
مربع ربط بيانات المخطط العمودي (على سبيل المثال، عمودي):
cli.getBoundingBox('vAxis#0#gridline')
مربع ربط بيانات المخطط لمخطط أفقي (على سبيل المثال، شريطي):
cli.getBoundingBox('hAxis#0#gridline')

ترتبط القيم بحاوية الرسم البياني. وعليك باستدعاء هذا بعد رسم الرسم البياني.

نوع الإرجاع: عنصر
getChartAreaBoundingBox()

تعرض كائنًا يحتوي على يسار محتوى الرسم البياني وأعلاه وعرضه وارتفاعه (أي باستثناء التصنيفات والتسمية التوضيحية):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

ترتبط القيم بحاوية الرسم البياني. وعليك باستدعاء هذا بعد رسم الرسم البياني.

نوع الإرجاع: عنصر
getChartLayoutInterface()

تعرض كائنًا يحتوي على معلومات حول موضع الرسم البياني وعناصره على الشاشة.

يمكن استدعاء الطرق التالية للكائن الذي تم إرجاعه:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

وعليك باستدعاء هذا بعد رسم الرسم البياني.

نوع الإرجاع: عنصر
getHAxisValue(xPosition, optional_axis_index)

تعرض قيمة البيانات الأفقية على xPosition، وهي إزاحة بكسل من الحافة اليسرى لحاوية الرسم البياني. يمكن أن تكون سلبية.

مثال: chart.getChartLayoutInterface().getHAxisValue(400)

وعليك باستدعاء هذا بعد رسم الرسم البياني.

نوع الإرجاع: رقم
getImageURI()

تعرض الرسم البياني المتسلسل كمعرّف الموارد المنتظم (URI) للصورة.

وعليك باستدعاء هذا بعد رسم الرسم البياني.

راجِع طباعة مخططات PNG.

نوع الإرجاع: سلسلة
getSelection()

تعرض صفيفًا من الكيانات المحددة في الرسم البياني. الكيانات القابلة للاختيار هي شرائح وإدخالات وسيلة الإيضاح. بالنسبة إلى هذا الرسم البياني، يمكن اختيار كيان واحد فقط في أي وقت محدّد. Extended description .

نوع الإرجاع: مصفوفة من عناصر الاختيار
getVAxisValue(yPosition, optional_axis_index)

تعرض قيمة البيانات العمودية على yPosition، وهي قيمة إزاحة بكسل من الحافة العلوية لحاوية الرسم البياني. يمكن أن تكون سلبية.

مثال: chart.getChartLayoutInterface().getVAxisValue(300)

وعليك باستدعاء هذا بعد رسم الرسم البياني.

نوع الإرجاع: رقم
getXLocation(dataValue, optional_axis_index)

عرض الإحداثي السيني للبكسل dataValue بالنسبة إلى الحافة اليسرى لحاوية الرسم البياني.

مثال: chart.getChartLayoutInterface().getXLocation(400)

وعليك باستدعاء هذا بعد رسم الرسم البياني.

نوع الإرجاع: رقم
getYLocation(dataValue, optional_axis_index)

يتم عرض إحداثي y بكسل لـ dataValue بالنسبة إلى الحافة العلوية لحاوية الرسم البياني.

مثال: chart.getChartLayoutInterface().getYLocation(300)

وعليك باستدعاء هذا بعد رسم الرسم البياني.

نوع الإرجاع: رقم
removeAction(actionID)

إزالة إجراء التلميح باستخدام actionID المطلوب من الرسم البياني.

نوع الإرجاع: none
setAction(action)

ضبط إجراء تلميح ليتم تنفيذه عندما ينقر المستخدم على نص الإجراء.

تستخدم طريقة setAction كائنًا كمعلمة الإجراء الخاصة به. ويجب أن يحدّد هذا الكائن 3 سمات، وهي: id، رقم تعريف الإجراء الذي يتم ضبطه، وtext، النص الذي يجب أن يظهر في التلميح الخاص بالإجراء، وaction الوظيفة التي يجب تشغيلها عندما ينقر المستخدم على نص الإجراء.

يجب ضبط كل إجراءات التلميحات قبل استدعاء طريقة draw() للرسم البياني. الوصف الموسّع:

نوع الإرجاع: none
setSelection()

لاختيار العناصر المحددة في الرسم البياني يؤدي هذا الإجراء إلى إلغاء أي اختيار سابق. الكيانات القابلة للاختيار هي شرائح وإدخالات وسيلة الإيضاح. بالنسبة إلى هذا الرسم البياني، يمكن اختيار كيان واحد فقط في كل مرة. Extended description .

نوع الإرجاع: لا شيء
clearChart()

يؤدي هذا الإجراء إلى محو الرسم البياني وتحرير جميع الموارد المخصّصة له.

نوع الإرجاع: لا شيء

الأحداث

لمزيد من المعلومات عن كيفية استخدام هذه الأحداث، اطّلِع على التفاعل الأساسي وأحداث المعالجة وأحداث التنشيط.

الاسم
click

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

المواقع: targetID
error

يتم إطلاقه عند حدوث خطأ عند محاولة عرض الرسم البياني.

الخصائص: المعرّف والرسالة
onmouseover

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

الخصائص: الصف والعمود
onmouseout

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

الخصائص: الصف والعمود
ready

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

الخصائص: غير محدّدة
select

يتم الإطلاق عندما ينقر المستخدم على عنصر مرئي. لمعرفة ما تم اختياره، يمكنك الاتصال بالرقم getSelection().

الخصائص: غير محدّدة

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

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