dhtmlxGanttは、クロスブラウザおよびクロスプラットフォームアプリケーション向けの完全に機能するガントチャートです。プロジェクト管理アプリケーションのすべてのニーズを満たすことができ、最も完全なガントチャートライブラリです。これにより、動的なガントチャートを作成し、プロジェクトの進行状況を便利なグラフィカルな方法で視覚化できます。dhtmlxGanttを使用すると、アクティビティ間の依存関係を表示したり、現在のタスクステータスを完了率の影で表示したり、アクティビティをツリー構造に編成したりできます。
dhtmlxGanttの試用版をダウンロードするにはクリックしてください
タスクブランチの展開/折りたたみ
タスクブランチを開くには、openメソッドを使用します。
var data = {
tasks:[
{
id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},
{
id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
parent:"p_1"}
]};
gantt.open("p_1");
タスクブランチを閉じるには、closeメソッドを使用します。
var data = {
tasks:[
{
id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},
{
id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
parent:"p_1"}
]};
gantt.close("p_1");
複数のブランチを展開/折りたたむ
複数のタスクブランチを開く/閉じる必要がある場合、最も速い方法は、必要なブール値（true-open、false-close）を必要なタスクにプログラムで設定することです。$プロパティを開き、ガントチャートを再描画します。
すべてのタスクを展開します。
gantt.eachTask(function(task){
task.$open = true;
});
gantt.render();
すべてのタスクを折りたたむ：
gantt.eachTask(function(task){
task.$open = false;
});
gantt.render();
タスクの子を取得する
ブランチタスクの子を取得するには、getChildrenメソッドを使用します。
var data = {
tasks:[
{
id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},
{
id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
parent:"p_1"}
]};
gantt.getChildren("p_1");//->["t_1"]
ツリー関連のメソッドの詳細については、「タスクの親/子」の記事を参照してください。
ツリーのアイコンを変更します
親アイテム
親アイテムのアイコンを設定するには、grid_folderテンプレートを使用します。
gantt.templates.grid_folder = function(item) {
return "<div class='gantt_tree_icon gantt_folder_" +
(item.$open ? "open" : "closed") + "'></div>";
};
子ども
へはgrid_fileテンプレートを使用して、子供のアイコンを設定します。
gantt.templates.grid_file = function(item) {
return "<div class='gantt_tree_icon gantt_file'></div>";
};
オープン/クローズフラグオープン/クローズフラグ
のアイコンを設定するには、grid_openテンプレートを使用します。
gantt.templates.grid_open = function(item) {
return "<div class='gantt_tree_icon gantt_" +
(item.$open ? "close" : "open") + "'></div>";
};
ブランチの子のインデントを設定します
ブランチ内のサブタスクのインデントを設定するには、grid_indentテンプレートを使用します（幅のCSSプロパティを変更します）。
gantt.templates.grid_indent=function(task){
return "<div style='width:20px; float:left; height:100%'></div>"
};
ツリーノードにチェックボックスを追加
チェックボックス（またはその他のHTMLコンテンツ）をツリーノードに追加するには、grid_blankテンプレートを使用します。
gantt.templates.grid_blank=function(task){
return "<input id='ch1' type='checkbox' onClick='someFunc()'></input>"
};
ツリーノードテンプレートを設定する
ツリーノードのテンプレートを設定するには、columns属性のtemplate属性を使用します。テンプレート関数の戻り値は、内部HTMLとして追加されます。したがって、属性には任意のHTML構造を使用できます。
サーバーとの統合にdhtmlxConnectorを使用しない場合は、ガントチャートにロードするデータに対するXSS攻撃の可能性を防ぐために、消毒する必要があることに注意してください（dhtmlxConnectorは自動的に完了します）
gantt.config.columns=[
{
name:"text", label:"Task name", tree:true, width:230, template:myFunc },
{
name:"start_date", label:"Start time", align: "center" },
{
name:"duration", label:"Duration", align: "center" }
];
gantt.init("gantt_here");
function myFunc(task){
if(task.priority ==1)
return "<div class='important'>"+task.text+" ("+task.users+") </div>";
return task.text+" ("+task.users+")";
};