مخططات غانت

نظرة عامة

مخطط Gantt هو نوع من الرسوم البيانية التي توضح تقسيم مشروع إلى المهام الأساسية له. توضّح مخططات Gantt من Google بداية المهام وانتهائها ومدتها ضمن المشروع، بالإضافة إلى أي تبعيات قد تكون لدى المهمة. يتم عرض مخططات Gantt من Google في المتصفّح باستخدام SVG. مثل جميع الرسوم البيانية في Google، تعرض الرسوم البيانية في Gantt تلميحات للأدوات عندما يمرِّر المستخدم مؤشر الماوس فوق البيانات.

ملاحظة: لن تعمل مخططات Gantt في الإصدارات القديمة من Internet Explorer. (لا يتوافق IE8 والإصدارات الأقدم مع رسومات SVG التي تتطلّبها مخططات Gantt).

مثال بسيط

 
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Research', 'Find sources',
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

      var options = {
        height: 275
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

ما مِن اعتماديات

لإنشاء رسم بياني Gantt لا يحتوي على تبعيات، احرص على ضبط القيمة الأخيرة لكل صف في DataTable على null. 

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['2014Spring', 'Spring 2014', 'spring',
         new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
        ['2014Summer', 'Summer 2014', 'summer',
         new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
        ['2014Autumn', 'Autumn 2014', 'autumn',
         new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
        ['2014Winter', 'Winter 2014', 'winter',
         new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
        ['2015Spring', 'Spring 2015', 'spring',
         new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
        ['2015Summer', 'Summer 2015', 'summer',
         new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
        ['2015Autumn', 'Autumn 2015', 'autumn',
         new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
        ['2015Winter', 'Winter 2015', 'winter',
         new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
        ['Football', 'Football Season', 'sports',
         new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
        ['Baseball', 'Baseball Season', 'sports',
         new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
        ['Basketball', 'Basketball Season', 'sports',
         new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
        ['Hockey', 'Hockey Season', 'sports',
         new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
      ]);

      var options = {
        height: 400,
        gantt: {
          trackHeight: 30
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

موارد التجميع

يمكن تجميع المهام المتشابهة بطبيعتها معًا باستخدام الموارد. أضِف عمودًا من النوع string إلى بياناتك (بعد العمودين Task ID وTask Name)، وتأكّد من أنّ أي مهام يجب تجميعها في مورد لها رقم تعريف المورد نفسه. سيتم تجميع الموارد حسب اللون. 

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Research', 'Find sources', null,
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper', 'write',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography', 'write',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper', 'complete',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper', 'write',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

      var options = {
        height: 275
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

حساب البداية/النهاية/المدة

تقبل مخططات Gantt ثلاث قيم مرتبطة بمدة المهمة: تاريخ البدء وتاريخ الانتهاء والمدّة (بالمللي ثانية). على سبيل المثال، في حال عدم توفّر تاريخ بدء، يمكن أن يحسب الرسم البياني الوقت الناقص استنادًا إلى تاريخ الانتهاء والمدة. وينطبق الأمر نفسه على احتساب تاريخ الانتهاء. إذا تم تحديد تاريخَي البدء والانتهاء، يمكن احتساب المدة بين التاريخَين.

يُرجى الاطّلاع على الجدول أدناه للحصول على قائمة بكيفية تعامل Gantt مع توفُّر بيانات البدء والانتهاء والمدة في ظروف مختلفة.

بدء إنهاء المدة النتيجة
مشاركة العنصر في وضع العرض التقديمي مشاركة العنصر في وضع العرض التقديمي مشاركة العنصر في وضع العرض التقديمي تأكد من أن المدة متسقة مع أوقات البدء/الانتهاء. تعرض رسالة خطأ إذا كانت غير متّسقة.
مشاركة العنصر في وضع العرض التقديمي مشاركة العنصر في وضع العرض التقديمي خالية احتساب المدة من وقت البدء ووقت الانتهاء.
مشاركة العنصر في وضع العرض التقديمي خالية مشاركة العنصر في وضع العرض التقديمي يتم احتساب وقت الانتهاء.
مشاركة العنصر في وضع العرض التقديمي خالية خالية يعرض رسالة خطأ بسبب تعذّر حساب المدة أو وقت الانتهاء.
خالية مشاركة العنصر في وضع العرض التقديمي مشاركة العنصر في وضع العرض التقديمي يتم احتساب وقت البدء.
خالية خالية مشاركة العنصر في وضع العرض التقديمي لحساب وقت البدء استنادًا إلى التبعيات. بالإضافة إلى defaultStartDate، يفعِّل هذا الخيار رسم الرسم البياني باستخدام المُدد فقط.
خالية مشاركة العنصر في وضع العرض التقديمي خالية يؤدي إلى عرض رسالة خطأ بسبب تعذّر حساب وقت البدء أو المدة.
خالية خالية خالية تعرض رسالة خطأ بسبب تعذّر حساب وقت البدء أو وقت الانتهاء أو المدة.

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

<html>
  <head>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      google.charts.load("current", { packages: ["gantt"] });
      google.charts.setOnLoadCallback(drawChart);

      function toMilliseconds(minutes) {
        return minutes * 60 * 1000;
      }

      function drawChart() {
        var otherData = new google.visualization.DataTable();
        otherData.addColumn("string", "Task ID");
        otherData.addColumn("string", "Task Name");
        otherData.addColumn("string", "Resource");
        otherData.addColumn("date", "Start");
        otherData.addColumn("date", "End");
        otherData.addColumn("number", "Duration");
        otherData.addColumn("number", "Percent Complete");
        otherData.addColumn("string", "Dependencies");

        otherData.addRows([
          [
            "toTrain",
            "Walk to train stop",
            "walk",
            null,
            null,
            toMilliseconds(5),
            100,
            null,
          ],
          [
            "music",
            "Listen to music",
            "music",
            null,
            null,
            toMilliseconds(70),
            100,
            null,
          ],
          [
            "wait",
            "Wait for train",
            "wait",
            null,
            null,
            toMilliseconds(10),
            100,
            "toTrain",
          ],
          [
            "train",
            "Train ride",
            "train",
            null,
            null,
            toMilliseconds(45),
            75,
            "wait",
          ],
          [
            "toWork",
            "Walk to work",
            "walk",
            null,
            null,
            toMilliseconds(10),
            0,
            "train",
          ],
          [
            "work",
            "Sit down at desk",
            null,
            null,
            null,
            toMilliseconds(2),
            0,
            "toWork",
          ],
        ]);

        var options = {
          height: 275,
          gantt: {
            defaultStartDate: new Date(2015, 3, 28),
          },
        };

        var chart = new google.visualization.Gantt(
          document.getElementById("chart_div")
        );

        chart.draw(otherData, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

المسار الحرج

المسار الحرج في مخطط Gantt هو المسار أو المسارات التي تؤثر مباشرةً في تاريخ الانتهاء. يكون المسار الحرج في مخططات Gantt من Google ملونًا باللون الأحمر تلقائيًا، ويمكن تخصيصه باستخدام خيارات criticalPathStyle. ويمكنك أيضًا إيقاف المسار الحرج من خلال ضبط criticalPathEnabled على false. 

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: true,
            criticalPathStyle: {
              stroke: '#e64a19',
              strokeWidth: 5
            }
          }
        };

أسهم التصميم

يمكنك تصميم أسهم التبعية بين المهام باستخدام خيارَي gantt.arrow: 

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
            arrow: {
              angle: 100,
              width: 5,
              color: 'green',
              radius: 0
            }
          }
        };

تنسيق المقاطع الصوتية

يتم التعامل مع تصميم الشبكة من خلال مجموعة من innerGridHorizLine وinnerGridTrack وinnerGridDarkTrack. عند ضبط innerGridTrack فقط، سيحسب الرسم البياني لونًا أغمق للسمة innerGridDarkTrack، ولكن من خلال ضبط innerGridDarkTrack فقط، سيستخدم innerGridTrack لونه التلقائي ولن يحسب لونًا أفتح. 

      var options = {
        height: 275,
        gantt: {
          criticalPathEnabled: false,
          innerGridHorizLine: {
            stroke: '#ffe0b2',
            strokeWidth: 2
          },
          innerGridTrack: {fill: '#fff3e0'},
          innerGridDarkTrack: {fill: '#ffcc80'}
        }
      };

جارٍ التحميل

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

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

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

  var chart = new google.visualization.Gantt(container);

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

الصفوف: يمثّل كل صف في الجدول مهمةً.

الأعمدة:

  العمود 0 العمود 1 العمود 2 العمود 3 العمود 4 العمود 5 العمود 6 العمود 7
الغرض: معرّف المهمة اسم المهمّة رقم تعريف المورد (اختياري) بدء إنهاء المدة (بالمللي ثانية) اكتملت العملية بالنسبة المئوية التبعيات
نوع البيانات: سلسلة سلسلة سلسلة التاريخ التاريخ الرقم الرقم سلسلة
الدور: نطاق البيانات البيانات البيانات البيانات البيانات البيانات البيانات

 

خيارات الإعداد

الاسم النوع القيمة التلقائية الوصف
backgroundColor.fill سلسلة "أبيض" لون تعبئة الرسم البياني، كسلسلة لون HTML.
gantt.arrow عنصر null بالنسبة إلى مخططات Gantt، تتحكم gantt.arrow في الخصائص المختلفة للأسهم التي تربط المهام.
gantt.arrow.angle الرقم 45 زاوية رأس السهم.
gantt.arrow.color سلسلة "#000" لون الأسهم.
gantt.arrow.length الرقم 8 تمثّل هذه السمة طول رأس السهم.
gantt.arrow.radius الرقم 15 نصف القطر لتحديد منحنى السهم بين مهمتين.
gantt.arrow.spaceAfter الرقم 4 مقدار المسافة البيضاء بين رأس السهم والمهمة التي يشير إليها.
gantt.arrow.width الرقم 1.4 عرض الأسهم.
gantt.barCornerRadius الرقم 2 نصف القطر لتحديد منحنى زوايا الشريط.
gantt.barHeight الرقم null تمثّل هذه السمة ارتفاع الأشرطة للمهام.
gantt.criticalPathEnabled boolean صحيح إذا كان true أي سهم على المسار الحرج سيتم تصميمه بشكل مختلف.
gantt.criticalPathStyle عنصر null كائن يحتوي على نمط أي أسهم مسار حرج
gantt.criticalPathStyle.stroke سلسلة null لون أي أسهم مسار حرج.
gantt.criticalPathStyle.strokeWidth الرقم 1.4 سُمك أي أسهم مسار حرج.
gantt.defaultStartDate التاريخ/الرقم null إذا تعذّر احتساب تاريخ البدء من القيم في DataTable، سيتم ضبط تاريخ البدء على هذا التاريخ. يتم قبول قيمة date (new Date(YYYY, M, D)) أو رقمًا، وهو عدد المللي ثانية المطلوب استخدامها.
gantt.innerGridHorizLine عنصر null تحدد نمط خطوط الشبكة الأفقية الداخلية.
gantt.innerGridHorizLine.stroke سلسلة null لون خطوط الشبكة الأفقية الداخلية.
gantt.innerGridHorizLine.strokeWidth الرقم 1 عرض خطوط الشبكة الأفقية الداخلية.
gantt.innerGridTrack.fill سلسلة null لون تعبئة مسار الشبكة الداخلية. إذا لم يتم تحديد innerGridDarkTrack.fill، سيتم تطبيق ذلك على كل مسار شبكة.
gantt.innerGridDarkTrack.fill سلسلة null لون التعبئة لمسار الشبكة الداخلية الداكنة البديل
gantt.labelMaxWidth الرقم 300 الحد الأقصى للمساحة المسموح بها لكل تصنيف مهمة.
gantt.labelStyle عنصر null

كائن يحتوي على أنماط تصنيفات المهام.

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled boolean صحيح يملأ شريط المهام استنادًا إلى النسبة المئوية المكتملة من المهمة.
gantt.percentStyle.fill سلسلة null لون النسبة المئوية للجزء المكتمل من شريط المهام.
gantt.shadowEnabled boolean صحيح في حال ضبط هذه السياسة على true، يتم رسم ظل أسفل كل شريط مهام يتضمّن عناصر تابعة.
gantt.shadowColor سلسلة "#000" يحدد لون الظلال تحت أي شريط مهام يحتوي على تبعيات.
gantt.shadowOffset الرقم 1 يحدد إزاحة الظلال بالبكسل ضمن أي شريط مهام يتضمن تبعيات.
gantt.sortTasks boolean صحيح تحدِّد هذه السياسة أنّه يجب ترتيب المهام طوبولوجيًا، إذا كانت القيمة صحيحة، وإلا استخدِم الترتيب نفسه المستخدَم في الصفوف المقابلة في DataTable.
gantt.trackHeight الرقم null تمثّل هذه السمة ارتفاع المسارات.
العرض الرقم عرض العنصر الذي يتضمّنه عرض الرسم البياني بالبكسل
الطول الرقم ارتفاع العنصر الذي يحتوي على الصورة ارتفاع المخطط بالبكسل.

الطُرق

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

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

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

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

نوع الإرجاع: مصفوفة من عناصر الاختيار
setSelection()

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

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

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

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

الأحداث

حدث الوصف
click

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

المواقع: targetID
error

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

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

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

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

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

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

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

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