مخططات "غانت"

نظرة عامة

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

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

مثال بسيط

 
<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>

عدم وجود تبعيات

لإنشاء رسم بياني غانت ليس له تبعيات، تأكّد من ضبط آخر قيمة لكل صف في جدول البيانات على 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>

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

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

اطّلِع على الجدول التالي للحصول على قائمة بكيفية تعامل "غانت" مع حضور البداية والنهاية والمدة في ظروف مختلفة.

بدء إنهاء المدة النتيجة
صيغة المضارع صيغة المضارع صيغة المضارع تحقّق من توافق المدة مع وقتَي البدء/الانتهاء. تظهر رسالة خطأ في حالة عدم التطابق.
صيغة المضارع صيغة المضارع خالية لحساب المدة من وقت البدء والانتهاء.
صيغة المضارع خالية صيغة المضارع وقت انتهاء العملية الحسابية
صيغة المضارع خالية خالية تظهر رسالة خطأ تفيد بأنه يتعذّر حساب المدة أو وقت الانتهاء.
خالية صيغة المضارع صيغة المضارع وقت بدء الاحتساب
خالية خالية صيغة المضارع لحساب وقت البدء بناءً على التبعيات. إلى جانب 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>

المسار المهم

المسار الحرج في الرسم البياني غانت هو المسار أو المسارات التي تؤثر مباشرةً في تاريخ الانتهاء. يكون المسار الحرج في مخططات Google Gantt باللون الأحمر تلقائيًا، ويمكن تخصيصه باستخدام خيارات 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
الغرض: رقم تعريف المهمة اسم المهمة رقم تعريف المورد (اختياري) بدء إنهاء المدة (بالمللي ثانية) نسبة الاكتمال العناصر التابعة
نوع البيانات: سلسلة سلسلة سلسلة التاريخ التاريخ number number سلسلة
الدور: نطاق البيانات البيانات البيانات البيانات البيانات البيانات البيانات

 

خيارات الضبط

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

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

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

الطرق

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

لرسم المخطط. لا يقبل الرسم البياني أي طلبات أخرى للحصول على طريقة إلا بعد إطلاق فعالية ready. Extended description

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

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

نوع العرض: مصفوفة من عناصر التحديد
setSelection()

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

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

محو الرسم البياني وإصدار جميع الموارد المخصّصة له

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

الأحداث

الحدث الوصف
click

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

الخصائص: targetID
error

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

الخصائص: رقم التعريف، الرسالة
ready

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

الخصائص: بلا
select

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

الخصائص: بلا

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

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