search

d-band / gantt

Gantt chart library using jsx support SVG, Canvas and SSR
https://d-band.github.io/gantt/
275 stars 61 forks source link

怎么使用 #16

Closed mifen closed 5 years ago

mifen commented 5 years ago

怎么使用

mLuby commented 5 years ago

☝️Agreed—the current readme (and demo) don't explain how to use this.

helloyou2012 commented 5 years ago

There are two ways for using this library:

1. Using gantt with a CDN

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gantt Test Page</title>
</head>
<body>
  <div style="margin-bottom: 20px;">
    <button type="button" id="autoSchedule">Auto Schedule</button>
  </div>
  <div id="svg-gantt"></div>
  <canvas id="canvas-gantt"></canvas>
  <script src="https://unpkg.com/gantt@3.0.4/dist/gantt.min.js" crossorigin></script>
  <script>
    var utils = Gantt.utils;
    var SVGGantt = Gantt.SVGGantt;
    var CanvasGantt = Gantt.CanvasGantt;

    var tasks = [
      { id: 1, name: 'Waterfall model' },
      { id: 11, parent: 1, name: 'Requirements', start: new Date(), duration: 10, percent: 0.5 },
      { id: 12, parent: 1, name: 'Design', start: new Date(), duration: 15, percent: 0.6 },
      { id: 13, parent: 1, name: 'Implement', type: 'milestone', start: new Date(), percent: 0.4 },
      { id: 14, parent: 1, name: 'Verification', start: new Date(), duration: 5, percent: 0.3 },
      { id: 2, name: 'Development' },
      { id: 21, parent: 2, name: 'Preliminary', start: new Date(), duration: 12, percent: 0.7 },
      { id: 22, parent: 2, name: 'Systems design', start: new Date(), duration: 6, percent: 0.1 },
      { id: 23, parent: 2, name: 'Development', start: new Date(), duration: 16, percent: 0.2 },
      { id: 24, parent: 2, name: 'Integration', start: new Date(), duration: 8, percent: 0.8 }
    ];
    var links = [
      { source: 11, target: 12, type: 'FS' },
      { source: 12, target: 13, type: 'FS' },
      { source: 13, target: 14, type: 'FS' },
      { source: 13, target: 21, type: 'FS' },
      { source: 23, target: 24, type: 'SF' }
    ];
    var data = utils.formatData(tasks, links);
    var options = {
      viewMode: 'week',
      onClick: function(v) { alert(v.name); }
    };
    var svgGantt = new SVGGantt('#svg-gantt', data, options);
    var canvasGantt = new CanvasGantt('#canvas-gantt', data, options);

    document.querySelector('#autoSchedule').onclick = function() {
      utils.autoSchedule(tasks, links);
      var newData = utils.formatData(tasks, links);
      svgGantt.setData(newData);
      canvasGantt.setData(newData);
    };
  </script>
</body>
</html>

2. Using gantt with module bundler

You have to choose a module bundler: webpack, rollup or browserify

npm install gantt --save
import { utils, SVGGantt, CanvasGantt } from 'gantt';