php实现甘特图

php实现甘特图 例：

<link rel="stylesheet" href="{
   { \Illuminate\Support\Facades\URL::asset('common/ofu_card.css') }}">
@include('temp.common.style._create_css')
<div class="row"  v-loading.fullscreen.lock="fullscreenLoading">
    <div class="row">
        <div class="box">
            @if(isset($title))
                <div class="box-header with-border">
                    <h3 class="box-title"> {
   {
    $title }}</h3>
                </div>
            @endif
            <div class="box-header with-border" style="padding-bottom: 0">
                <div class="pull-left">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item style="margin-bottom: 0" label="生产工厂"  >
                            <el-select v-model="formInline.factory_id" placeholder="请选择" v-on:change="getFactoryGanttData">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="margin-bottom: 0" label="选择区间">
                            <el-radio-group v-model="formInline.section" v-on:change="getFactoryGanttData" size="mini">
                                <el-radio-button label="1">一个月</el-radio-button>
                                <el-radio-button label="2">三个月</el-radio-button>
                                <el-radio-button label="3">六个月</el-radio-button>
{
   {
   --                                <el-radio-button label="4">一年</el-radio-button>--}}
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="content">
                <div class="table-responsive">
                    <table class="table table-striped table-responsive no-padding table-hover table-bordered table-sm ofu-table-fixed"
                           style="text-align: center">
                        <tr style="">
                            <th rowspan="2" width="100" style="vertical-align:middle;width: 100px; text-align: center">合伙人</th>
                            <th rowspan="2" width="100" style="vertical-align:middle;text-align: center">班组</th>
                            {
   {
   --            <th rowspan="2" width="100" style="vertical-align:middle;text-align: center">人数</th>--}}
                            <template v-for="(val , key) in sectionDate">
                                <th :colspan="val.cols" style="text-align: center">[!! val.month !!] 月份</th>
                            </template>
                        </tr>
                        <tr>
                            <template v-for="(val , key) in sectionDate">
                                <template v-for="(val1 , key1) in val.days">
                                    <th :bgcolor="val1.is_job">[!! val1.day !!]</th>
                                </template>
                            </template>
                        </tr>
                        <template v-for="(item,index) in tableData">
                            <td :rowspan="item.rows">[!! item.workshop_name !!