PHP+Javascript 实现甘特图

选择工厂、年份、月份生成甘特图

Gantt.blade.php

<link rel="stylesheet" href="{
   { \Illuminate\Support\Facades\URL::asset('common/common.css') }}">
<link rel="stylesheet" href="{
   { \Illuminate\Support\Facades\URL::asset('vendor/myGantt/dhtmlxgantt.css?v=7.0.3') }}">
<script src="{
   { \Illuminate\Support\Facades\URL::asset('vendor/myGantt/dhtmlxgantt.js?v=7.0.3') }}"></script>
{
   {
   --<script src="/vendor/myGantt/dhtmlxgantt.js?v=7.0.3"></script>--}}
{
   {
   --<link rel="stylesheet" href="/vendor/myGantt/dhtmlxgantt.css?v=7.0.3">--}}
<link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">
<style type="text/css">
    .init_font{
   font-size: 14px}
    .year{
   border: 1px solid #d2d6de; height: 35px;border-radius: 4px;padding: 6px 12px;}
    .month-default{
   border-color: #a9a9a9;background-color: #fff;color: #444;border:1px solid #dcdcdc;border-color: #ddd;-webkit-box-shadow:none;box-shadow:none;border:1px solid transparent;display:inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: 400;line-height: 1.42857143;text-align:center;border-radius:4px}
    a.no{
   background: #5cb85c;color: #fff;}
    .none{
   border: none;background: none;}
    thead tr th{
   font-size: 14px}
    .thumbnail{
   margin-bottom: 0px;height: 130px;}
    .form-control{
   
        padding: 4px;
        font-size: 14px;
    }
    .form-horizontal .control-label {
   
        font-size: 14px;
    }

    /*搜索样式*/
    .gantt_grid_head_buttons  {
   
        position: relative;
        right: 50px;
    }

    #search {
   
        background: url("{
   { \Illuminate\Support\Facades\URL::asset('vendor/myGantt/image/search.png') }}") no-repeat;
        background-position-x: 0;
        background-size: 14px;
        border-radius: 4px;
        padding: 5px 0 5px 15px;
        border: 1px solid #4DFFD3;
        width: 110px;
        height: 25px;
    }
    .weekend {
   
        background:#f4f7f4;
    }
    .gantt_selected .weekend {
   
        background:#f7eb91;
    }

    .gantt_bars_area>div:nth-of-type(odd){
   
        background: #febb73;
        color: #111;
    }

    .bgColor1{
   
        background: #00e765;
    }
    .bgColor2{
   
        background: #e7808e;
    }
    .bgColor3{
   
        background: #b247e7;
    }
    .bgColor4{
   
        background: #262ee7;
    }
    .bgColor5{
   
        background: #67dbe7;
    }
    .bgColor6{
   
        background: #e7e54b;
    }
</style>
<style type="text/css">
     .init_font{
   font-size: 14px}
	.year{
   border: 1px solid #d2d6de; height: 35px;border-radius: 4px;padding: 6px 12px;}
    .month-default{
   border-color: #a9a9a9;background-color: #fff;color: #444;border:1px solid #dcdcdc;border-color: #ddd;-webkit-box-shadow:none;box-shadow:none;border:1px solid transparent;display:inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: 400;line-height: 1.42857143;text-align:center;border-radius:4px}
    a.no{
   background: #5cb85c;color: #fff;}
    .none{
   border: none;background: none;}
    thead tr th{
   font-size: 14px}
    .thumbnail{
   margin-bottom: 0px;height: 130px;}
    .form-control{
   
        padding: 4px;
        font-size: 14px;
    }
     .form-horizontal .control-label {
   
         font-size: 14px;
     }
</style>
<div class="content">
    <div class="row">
        <form class="form-horizontal" style="margin-bottom: 50px;">
	        <div class="col-md-1">
			    <select id="plan_factory_graphics" class="form-control no_padding col-sm-12 extra plan_factory_graphics" name="plan_factory"  onchange="selectFactory(this.value)" required="1">
	                <option value="">请选择</option>
	                @foreach($pubFactory as $k => $v)
	                    <option value="{!! $v->id !!}">{
   !! $v->abbr !!}</option>
	                @endforeach
	            </select>
	        </div>
	        <div class="col-md-1">
	        	<td>
	        		<input type="text" id="year" class="extra no_padding col-sm-12 year" name="year" placeholder="年" required="1">
	        	</td>
	        </div>
	        <div class="col-md-9">
	        	<a class=" month-default ajax_month 01" href="javascript:void(0);" data-info="01">一月</a>
	        	<a class=" month-default ajax_month 02" href="javascript:void(0);" data-info="02">二月</a>
	        	<a