用highcharts做甘特图展示

最新推荐文章于 2026-05-14 14:28:56 发布

原创最新推荐文章于 2026-05-14 14:28:56 发布 · 置顶 · 6.5k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #java #hicharts #甘特图

java前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用Highcharts库来创建甘特图。首先，需要引入jQuery和Highcharts的相关js文件。接着，详细讲述了body中的HTML结构和JavaScript代码设置。在实现过程中，数据格式的适配是主要难点之一。

一、首先，需要引插件：

jquery-1.11.3.js

highcharts.js

highcharts-more.js

二、body中的html代码

<div id="container_center"></div>

三、js代码

<script type="text/javascript">
    var xArray;
    var yArray;
    var seriesArray;
    $(function() {

        $.ajax({
               type: "POST",    
               dataType: "JSON",    
               url: "<%=basePath%>admin/project/getprojectdatas.php?id=${id}",
               success : function(result){
                   xArray = result.xArray;
                   yArray = result.yArray;
                   seriesArray = result.seriesArray;
                   $('#container_center').highcharts({
                        chart: {
                            type: 'columnrange',
                            inverted: true //反转
                        },

                        title: {
                            text: ''
                        },

                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            categories: xArray
                        },
                        yAxis: {
                            categories: yArray,
                            title: {
                                text: '日期'
                            },
                            labels: {
                                rotation: -30,
                                formatter: function() {
                                    var vDate = new Date(this.value);
                                    if(vDate.getFullYear() === 1970) {
                                        return "";
                                    } else {
                                        return vDate.getFullYear() + "-" + (vDate.getMonth() + 1) + "-" + vDate.getDate();
                                    }

                                }
                            }
                        },
                        tooltip: {
                            formatter: function() {
                                var beginDate = new Date(yArray[this.y]);   //开始时间  时间戳
                                var dateIndex;
                                for(var i = 0; i < xArray.length; i++){
                                    if(this.x === xArray[i]){
                                        dateIndex = i;
                                    }
                                }
                                var endDateIndex = seriesArray[dateIndex][1];
                                var endDate = new Date(yArray[endDateIndex]);   //结束时间 时间戳

                                var beginYear = beginDate.getFullYear();    //开始年份
                                var beginMonth = beginDate.getMonth() + 1;  //开始月份
                                var beginDay = beginDate.getDate();         //开始号数

                                var endYear = endDate.getFullYear();        //结束年份
                                var endMonth = endDate.getMonth() + 1;      //结束月份
                                var endDay = endDate.getDate();             //结束号数

                                var days = (endDate - beginDate) / (1000*60*60*24) +1   //总天数


                                return this.x+" : "+beginYear+"/"+beginMonth+"/"+beginDay+" - "+endYear+"/"
                                    +endMonth+"/"+endDay + " , 共"+days+"天";
                            }
                        },

                        plotOptions: {
                            columnrange: {
                                dataLabels: {
                                    enabled: true,
                                    formatter: function() {
                                        return;
                                    }
                                }
                            }
                        },

                        legend: {
                            enabled: false
                        },
                        series: [{
                            data: seriesArray
                        }]
                    });
               }
            });

    });
</script>

难点

数据格式需要多思考