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

نظرة عامة

رسم بياني دائري يتم عرضه داخل المتصفّح باستخدام 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 (اختياري)
الغرض: تصنيفات الشرائح قيم الشرائح ... الأدوار الاختيارية
نوع البيانات: سلسلة number ...
الدور: نطاق البيانات ...
أدوار الأعمدة الاختيارية: بدون قفل بدون قفل ...

خيارات الضبط

الاسم
لون الخلفية

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

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

لون حد المخطط، كسلسلة لون HTML.

النوع: سلسلة
الافتراضي: '#666'
عرض لون الخلفية.الشطب

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

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

لون تعبئة المخطط، كسلسلة لون HTML.

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

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

النوع: الكائن
تلقائي: null
لون الرسم البياني لمنطقة الخلفية
لون خلفية منطقة الرسم البياني. عند استخدام سلسلة، يمكن أن تكون سلسلة سداسية عشرية (مثل "#fdc") أو اسم اللون الإنجليزي. عند استخدام كائن، يمكن توفير الخصائص التالية:
  • stroke: اللون، يتم تقديمه كسلسلة سداسية عشرية أو اسم اللون الإنجليزي.
  • strokeWidth: في حالة تقديمه، يرسم حدًا حول منطقة المخطط بعرض محدد (واللون stroke).
النوع: سلسلة أو كائن
تلقائي: "أبيض"
منطقة الرسم البياني اليسرى

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

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

مقدار رسم المخطط من الحد العلوي.

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

عرض منطقة الرسم البياني.

النوع: رقم أو سلسلة
تلقائي: تلقائي
ارتفاع الرسم البياني

رسم بياني لمنطقة ارتفاع.

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

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

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

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

النوع: منطقي
افتراضي: صحيح
حجم الخط

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

النوع: الرقم
افتراضي: تلقائي
اسم الخط

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

النوع: سلسلة
افتراضي: 'Arial'
فرض إطار

لرسم المخطط داخل إطار مضمن. (تجدر الإشارة إلى أنه يتم تجاهل هذا الخيار في IE8، ويتم رسم جميع الرسوم البيانية لـ IE8 في إطارات i.)

النوع: منطقي
تلقائي: خطأ
الارتفاع

ارتفاع المخطط بالبكسل.

النوع: الرقم
افتراضي: ارتفاع العنصر المضمن
ثلاثية الأبعاد

في حال التعيين على "true"، يتم عرض رسم بياني ثلاثي الأبعاد.

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

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

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
النوع: الكائن
تلقائي: null
محاذاة

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

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

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

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

النوع: سلسلة
افتراضي: تلقائي
وضع التسمية التوضيحية

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

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

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

لا يعمل هذا الخيار حاليًا إلا عندما تكون وسيلة الإيضاح "top".

النوع: الرقم
تلقائي: 1
وسيلة الإيضاح

كائن يحدد نمط نص التسمية التوضيحية. ويكون الكائن بهذا التنسيق:

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

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

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

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

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

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

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

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

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

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

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

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

النوع: الكائن
تلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
زاوية دائرية دائرية

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

النوع: الرقم
تلقائي: 0
الفئات العكسية

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

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

لون شريحة المجموعة التي تحمل كل الشرائح أسفل slicevisibilityThreshold.

النوع: سلسلة
تلقائي: "#ccc"
pieResidueSliceLabel

تصنيف للشريحة المُجمَّعة يحتوي على جميع الشرائح أسفل slicevisibilityThreshold.

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

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

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

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

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
النوع: مصفوفة من الكائنات أو كائن به كائنات مدمجة
تلقائي: {}
شريحة مستوى رؤية الإعلان

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

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

النص المطلوب عرضه أعلى المخطط.

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

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

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

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

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

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
النوع: الكائن
تلقائي: null
tooltip.ignoreBounds

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

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

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

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

ملاحظة: لا يمكن تخصيص محتوى تلميح HTML عبر دور بيانات عمود تلميحات الأدوات من خلال التمثيل البصري لمخطط الفقاعات التفسيرية.

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

إذا كان صحيحًا، فاعرض المربعات الملونة بجوار معلومات الشريحة في تلميح الأداة.

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

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

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

كائن يحدد نمط نص التلميح. ويكون الكائن بهذا التنسيق:

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

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

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

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

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

عرض المخطط بالبكسل.

النوع: الرقم
افتراضي: عرض العنصر المضمن

الطرق

الطريقة
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)

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

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

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

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

لعرض الإحداثي الصادي لبكسل وحدة البكسل 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().

الخصائص: بلا

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

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