ガントチャートTreeGridの紹介

: らら

2023.09.01

JavaScript

はじめに

簡易的なものを探していたら、よさげなものがあったので

紹介しておきます。

COQsoftさんのGantt chart

下記

http://www.treegrid.com/

日本のTreeGrid 製品の正規販売代理店

https://www.xlsoft.com/jp/products/treegrid/

Gantt chart

TreeGrid 製品無償版のダウンロードってのがある。

無償版の制限

無制限に無償版をご利用いただけます。

HTML ページ上に体験版を示すメッセージが表示されます。

購入すると最小ライセンスで３３万円・・・

無償版体験版を落とすと..

メインのJS　GridE.jsは、バイナリファイルになっていて、変更したいと思う人は・・・

筆者は、サンプルの下記がそのまま使えそうなので・・・

TreeGridEval\ExamplesGantt\Html\Gantt\Gantt.html

gantt chart

英語なのでなんとか・・したい・・

Gantt.htmlの313行目の下記に・・


      <div class="Border">
         <div class="Main" id="Gantt">
            <script>TreeGrid('<bdo Sync="0" Debug="Check" Layout_Url="GanttDef.xml" Data_Url="GanttData.xml"></bdo>',"Gantt");</script>
         </div>
      </div>

Data_Bonus=\'<Grid><Cfg Language="JP"/></Grid>\'を追加


      <div class="Border">
         <div class="Main" id="Gantt">
            <script>TreeGrid('<bdo Sync="0" Debug="Check" Layout_Url="GanttDef.xml" Data_Url="GanttData.xml" Data_Bonus=\'<Grid><Cfg Language="JP"/></Grid>\'></bdo>',"Gantt");</script>
         </div>
      </div>

日本語になりましたーー

gantt chart

こちらのサンプルは、XMLファイルの呼び出しのようで・・

TreeGridEval\ExamplesGantt\phpのサンプルがあるので・・

xmlの部分をphpに・・


      <div class="Border">
         <div class="Main" id="Gantt">
            <script>TreeGrid('<bdo Sync="0" Debug="Check" Layout_Url="GanttDef.xml" Data_Url="GanttDBData.php" Upload_Url="GanttDBUpload.php" Data_Bonus=\'<Grid><Cfg Language="JP"/></Grid>\'></bdo>',"Gantt");</script>
         </div>
      </div>

Database、Framework、Grid、php-txt-db-apiディレクトリと

GanttLang.xml、GanttDef.xml、Gantt.htmlを別のファルダ―へコピー

TreeGridEval\ExamplesGantt\phpの下記をコピーして


GanttBasicDBData.php
GanttBasicDBUpload.php

こんな感じでリネーム。


GanttDBData.php
GanttDBUpload.php

TreeGridEval\ExamplesGantt\Html\Gantt\GanttData.xml

上記を参照に・・


         <I id="1" TASK="Task 1" SECTION="S1" COMPLETE="100" START="3/16/2018 9:00" END="3/20/2018 18:00" PARTS1="3/19/2018 9:00~3/23/2018 18:00" DESCENDANTS="2" RESOURCES="Mill*2"/>

id,TASKとか使っている変数を拾ってきます・・


GanttDBData.php

下記のパスを変えて・・


define("API_HOME_DIR" ,"./php-txt-db-api/"); // Sets path to PHP TXT DB database script 
require_once("./Framework/IncDbTxt.php"); $db = new Database("./Database");

下記みたいに変更・・

なーんにも考えずに、既存のコーディング方法にのっとって・・笑


$rows = $db->Query("SELECT * FROM Gantt"); $rows = $rows->GetRows();
echo "<Grid><Body><B>";
foreach($rows as $row){
   echo "<I id='" . $row["id"] . "'" 
         . " TASK='" . htmlspecialchars($row["TASK"],ENT_QUOTES) . "'"
         . " SECTION='" . $row["SECTION"] . "'"
         . " START='" . $row["START"] . "'"
         . " END='" . $row["END"] . "'"
         . " DESCENDANTS='" . $row["DESCENDANTS"] . "'"
         . " COMPLETE='" . $row["COMPLETE"] . "'"
         . " PARTS1='" . $row["PARTS1"] . "'"
         . " RESOURCES='" . $row["RESOURCES"] . "'"
         . " CALENDAR='" . $row["CALENDAR"] . "'"
         . " FLAGS='" . $row["FLAGS"] . "'"
         . " FLAGSTEXT='" . $row["FLAGSTEXT"] . "'"
         . " MAXSTART='" . $row["MAXSTART"] . "'"
         . " MAXEND='" . $row["MAXEND"] . "'"
         . " MINSTART='" . $row["MINSTART"] . "'"
         . " MINEND='" . $row["MINEND"] . "'"
         . " GANTTGanttClass='" . $row["CLASS"] . "'"
         . "/>\n";
   }

GanttDBUpload.php

下記も同様・・にパスを変更


define("API_HOME_DIR" ,"./php-txt-db-api/"); // Sets path to PHP TXT DB database script 
require_once("./Framework/IncDbTxt.php"); $db = new Database("./Database");

こんな感じで変更・・下記の部分を変更・・

なーんにも考えずに、既存のコーディング方法にのっとって・・笑


      if(!empty($A["Deleted"])){
         $db->Exec("DELETE FROM Gantt WHERE id=".$A["id"]);
         }
      else if(!empty($A["Added"])){
         $db->Exec("INSERT INTO GanttBig(id,TASK,SECTION,START,END,DESCENDANTS,COMPLETE,PARTS1,RESOURCES,CALENDAR,FLAGS,FLAGSTEXT,MAXSTART,MAXEND,MINSTART,MINEND,CLASS ) VALUES("
               . $A["id"] . "," 
               . "'" . str_replace("'","''",$A["TASK"]) . "',"
               . "'" . $A["SECTION"] . "',"
               . "'" . $A["START"] . "',"
               . "'" . $A["END"] . "',"
               . "'" . $A["DESCENDANTS"] . "',"
               . "'" . $A["COMPLETE"] . "',"
               . "'" . $A["PARTS1"] . "',"
               . "'" . $A["RESOURCES"] . "',"
               . "'" . $A["CALENDAR"] . "',"
               . "'" . $A["FLAGS"] . "',"
               . "'" . $A["FLAGSTEXT"] . "',"
               . "'" . $A["MAXSTART"] . "',"
               . "'" . $A["MAXEND"] . "',"
               . "'" . $A["MINSTART"] . "',"
               . "'" . $A["MINEND"] . "',"
               . "'" . $A["CLASS"] . "')");
         }
      else if(!empty($A["Changed"])){
         $S = "UPDATE Gantt SET ";
         foreach($A as $name => $value){
            if($name=="TASK") $S .= "$name = '" . str_replace("'","''",$value) . "',";
            else if($name=="SECTION" || $name=="START" || $name=="END" || $name=="DESCENDANTS"|| $name=="COMPLETE"|| $name=="PARTS1"|| $name=="RESOURCES"|| $name=="CALENDAR"|| $name=="FLAGS"|| $name=="FLAGSTEXT"|| $name=="MAXSTART"|| $name=="MAXEND"|| $name=="MINSTART"|| $name=="MINEND"|| $name=="CLASS") $S .= "$name = '$value',";
            }
         $S = substr($S,0,strlen($S)-1);
         $S .= " WHERE id=".$A["id"];
         $db->Exec($S);
         }
      }

FrameworkのIncDbTxt.php

パス書替え


require_once("./php-txt-db-api/txt-db-api.php");

Databaseフォルダーの中に

Gantt.txtを作ります・・パーミッションは書き込み可能にします。。


TASK#SECTION#START#END#DESCENDANTS#COMPLETE#PARTS1#RESOURCES#CALENDAR#FLAGS#FLAGSTEXT#MAXSTART#MAXEND#MINSTART#MINEND#CLASS#id
str#str#str#str#str#str#str#str#str#str#str#str#str#str#str#str#str
################
PROJECT#TASK#8/1/2023#9/4/2023#1#0##person########Black#1

こんな感じ・・・


│  GanttData.xml
│  GanttDBData.php
│  GanttDBUpload.php
│  GanttDef.xml
│  GanttLang.xml
│  index.html(Gantt.html)
├─Database
│      Gantt.txt
├─Framework
│      Export.php
│      IncDbAdo.php
│      IncDbMySQL.php
│      IncDbODBC.php
│      IncDbSQLite.php
│      IncDbSQLite3.php
│      IncDbTxt.php
│      TreeGridFramework.php
│      Xml.php
├─Grid
│  │  Defaults.js
│  │  Defaults.xml
│  │  Ding.wav
│  │  Drag.cur
│  │  GridE.js
│  │  GridED.js
│  │  GridEStandalone.js
│  │  Help.html
│  │  Info.txt
│  │  NoDrag.cur
│  │  Text.js
│  │  Text.xml
│  ├─Compatible
│  │  │  Info.txt
│  │  ├─Borders
│  │  ├─Colors
│  │  ├─ExtJS
│  │  ├─Gradient
│  │  ├─Light
│  │  ├─Office
│  │  ├─Plain
│  │  ├─Query
│  │  ├─Relief
│  │  ├─Round
│  │  └─Sharp
│  ├─External
│  ├─Languages
│  └─Styles
├─php-txt-db-api
│      const.php
│      database.php
│      expression.php
│      resultset.php
│      sql.php
│      stringparser.php
│      txt-db-api.php
│      util.php

まぁ・・セキュリティ的に・・あれな感じなのでオンプレで使いますけど・・

テキストDBはデフォルトのようなので・・・

なんとか・・保存できるようになった！。

あと・・リソースがGanttDef.xmlにハードコーディングされているので

下記の2か所　お好みで・・・


   <!-- Resources definition -->
   <Resources>
      <R Name="Mill" Price="27" Type="1" Availability="2;w#3/6/2018~3/9/2018#2"/>
      <R Name="Drill" Price="40" Type="1" Availability="15;3/26/2018~4/7/2018#-8"/>
      <R Name="Material" Price="1" Type="2" Availability="15;w#3/20/2018~4/4/2018#20"/>
   </Resources>
      <I id="Mill" Def="Resource"/>
      <I id="Drill" Def="Resource"/>
      <I id="Material" Def="Resource" Height="40"/>

リソースとか料金をあらかじめ表に出したい場合は

Visible="0"をとってやってください・・


      <C Name="RESOURCES" Visible="0" Width="132" Type="Text"/> <!-- Resources column -->
      <C Name="PRICE" Visible="0" Width="76" Type="Float" Format=",0.00" Formula="Grid.GetGanttPrice(Row,'GANTT')"/> <!-- Task price column -->

さいごに

高性能すぎで・・設定がわかりませーーん・・

まぁ。個人的には一時的なので・・買ってね・・って表示されても問題ありません。

名古屋のWeb制作会社

ガントチャートTreeGridの紹介

はじめに

Gantt chart

さいごに

関連記事