نمودار گانت

بررسی اجمالی

نمودار گانت نوعی نمودار است که تجزیه پروژه را به وظایف اجزای آن نشان می دهد. نمودارهای Google Gantt شروع، پایان و مدت کارها در یک پروژه و همچنین وابستگی هایی که ممکن است یک کار داشته باشد را نشان می دهد. نمودارهای Google Gantt در مرورگر با استفاده از SVG ارائه می‌شوند. مانند همه نمودارهای گوگل، نمودارهای گانت وقتی کاربر روی داده ها قرار می گیرد، نکات ابزار را نمایش می دهد.

توجه: نمودار گانت در نسخه های قدیمی اینترنت اکسپلورر کار نخواهد کرد. (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>

بدون وابستگی

برای ایجاد نمودار گانت که هیچ وابستگی ندارد، مطمئن شوید که آخرین مقدار برای هر ردیف در 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>

شروع/پایان/مدت محاسبات

نمودار گانت سه مقدار مربوط به مدت زمان کار را می پذیرد: تاریخ شروع، تاریخ پایان و مدت زمان (بر حسب میلی ثانیه). به عنوان مثال، اگر تاریخ شروع وجود نداشته باشد، نمودار می تواند زمان از دست رفته را بر اساس تاریخ پایان و مدت زمان محاسبه کند. همین امر در مورد محاسبه تاریخ پایان نیز صدق می کند. اگر تاریخ شروع و پایان هر دو داده شود، مدت زمان را می توان بین این دو محاسبه کرد.

برای فهرستی از نحوه مدیریت گانت با شروع، پایان و مدت زمان در شرایط مختلف، جدول زیر را ببینید.

شروع کنید پایان مدت زمان نتیجه
حاضر حاضر حاضر بررسی کنید که مدت زمان با زمان شروع/پایان مطابقت داشته باشد. در صورت ناسازگاری خطا می دهد.
حاضر حاضر خالی مدت زمان شروع و پایان را محاسبه می کند.
حاضر خالی حاضر زمان پایان را محاسبه می کند.
حاضر خالی خالی خطا را به‌عنوان ناتوانی در محاسبه مدت یا زمان پایان نشان می‌دهد.
خالی حاضر حاضر زمان شروع را محاسبه می کند.
خالی خالی حاضر زمان شروع را بر اساس وابستگی ها محاسبه می کند. در ارتباط با 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>

مسیربحرانی

مسیر بحرانی در نمودار گانت مسیر یا مسیرهایی است که مستقیماً بر تاریخ پایان تأثیر می گذارد. مسیر بحرانی در نمودارهای گانت گوگل به طور پیش فرض قرمز رنگ است و می توان آن را با استفاده از گزینه های 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 هدف - شی خالی برای نمودارهای گانت ، 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 عدد خالی ارتفاع میله ها برای وظایف.
gantt.criticalPathEnabled بولی درست است، واقعی اگر true هر فلش در مسیر بحرانی، سبک متفاوتی خواهد داشت.
gantt.criticalPathStyle هدف - شی خالی یک شی حاوی سبک برای هر فلش مسیر بحرانی.
gantt.criticalPathStyle.stroke رشته خالی رنگ هر فلش مسیر بحرانی.
gantt.criticalPathStyle.strokeWidth عدد 1.4 ضخامت هر فلش مسیر بحرانی.
gantt.defaultStartDate تاریخ / شماره خالی اگر تاریخ شروع را نتوان از مقادیر موجود در DataTable محاسبه کرد، تاریخ شروع روی این تنظیم می شود. یک مقدار date ( new Date(YYYY, M, D) ) یا یک عدد را می‌پذیرد که تعداد میلی‌ثانیه‌های مورد استفاده است.
gantt.innerGridHorizLine هدف - شی خالی سبک خطوط شبکه افقی داخلی را تعریف می کند.
gantt.innerGridHorizLine.stroke رشته خالی رنگ خطوط شبکه افقی داخلی.
gantt.innerGridHorizLine.strokeWidth عدد 1 عرض خطوط شبکه افقی داخلی.
gantt.innerGridTrack.fill رشته خالی رنگ پر کردن مسیر شبکه داخلی. اگر innerGridDarkTrack.fill مشخص نشده باشد، این برای هر مسیر شبکه اعمال می شود.
gantt.innerGridDarkTrack.fill رشته خالی رنگ پر کردن مسیر شبکه داخلی تیره و متناوب.
gantt.labelMaxWidth عدد 300 حداکثر فضای مجاز برای هر برچسب کار.
gantt.labelStyle هدف - شی خالی

یک شی حاوی سبک‌های برچسب‌های کار.

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled بولی درست است، واقعی نوار وظیفه را بر اساس درصد تکمیل شده برای کار پر می کند.
gantt.percentStyle.fill رشته خالی رنگ بخش درصد تکمیل شده یک نوار وظیفه.
gantt.shadowEnabled بولی درست است، واقعی اگر روی true تنظیم شود، زیر هر نوار وظیفه که دارای وابستگی است، سایه ای می کشد.
gantt.shadowColor رشته '#000' رنگ سایه ها را در زیر هر نوار وظیفه ای که وابستگی دارد، مشخص می کند.
gantt.shadowOffset عدد 1 افست سایه‌های زیر هر نوار وظیفه‌ای که وابستگی دارد را بر حسب پیکسل تعریف می‌کند.
gantt.sortTasks بولی درست است، واقعی مشخص می کند که اگر درست باشد، وظایف باید از نظر توپولوژیکی مرتب شوند. در غیر این صورت از همان ترتیب ردیف های مربوط به DataTable استفاده کنید.
gantt.trackHeight عدد خالی ارتفاع مسیرها.
عرض عدد عرض عنصر حاوی عرض نمودار، بر حسب پیکسل.
ارتفاع عدد ارتفاع عنصر حاوی ارتفاع نمودار بر حسب پیکسل

مواد و روش ها

روش شرح
draw(data, options)

نمودار را رسم می کند. نمودار فراخوانی های متد بیشتر را فقط پس از فعال شدن رویداد ready می پذیرد. Extended description

نوع بازگشت: ندارد
getSelection()

آرایه ای از موجودیت های نمودار انتخاب شده را برمی گرداند. موجودیت های قابل انتخاب میله ها، ورودی های افسانه و دسته ها هستند. برای این نمودار، در هر لحظه می توان تنها یک موجودیت را انتخاب کرد. Extended description

نوع بازگشت: آرایه ای از عناصر انتخابی
setSelection()

موجودیت های نمودار مشخص شده را انتخاب می کند. هر انتخاب قبلی را لغو می کند. موجودیت های قابل انتخاب میله ها، ورودی های افسانه و دسته ها هستند. برای این نمودار، تنها یک موجودیت را می توان در یک زمان انتخاب کرد. Extended description

نوع بازگشت: ندارد
clearChart()

نمودار را پاک می کند و تمام منابع اختصاص داده شده آن را آزاد می کند.

نوع بازگشت: ندارد

مناسبت ها

رویداد شرح
click

هنگامی که کاربر در داخل نمودار کلیک می کند، فعال می شود. می توان برای شناسایی زمانی که عنوان، عناصر داده، ورودی های افسانه، محورها، خطوط شبکه یا برچسب ها کلیک می شود، استفاده کرد.

ویژگی ها: targetID
error

هنگامی که هنگام تلاش برای ارائه نمودار، خطایی رخ می دهد، فعال می شود.

ویژگی ها: شناسه، پیام
ready

نمودار برای تماس های متد خارجی آماده است. اگر می‌خواهید با نمودار تعامل داشته باشید و پس از ترسیم روش‌ها را فراخوانی کنید، باید قبل از فراخوانی متد draw ، شنونده‌ای برای این رویداد تنظیم کنید و تنها پس از فعال شدن رویداد، آنها را فراخوانی کنید.

خواص: هیچ
select

هنگامی که کاربر روی یک موجودیت بصری کلیک می کند فعال می شود. برای اطلاع از آنچه انتخاب شده است، getSelection() را فراخوانی کنید.

خواص: هیچ

خط مشی داده

تمام کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.