Highcharts：创建具有堆叠行的甘特图答案

【问题标题】：Highcharts: Creating gantt chart having stacked rowsHighcharts：创建具有堆叠行的甘特图
【发布时间】：2013-12-11 10:20:27
【问题描述】：

我正在使用 Highcharts 为具有三个阶段请求、提交和批准的流程创建甘特图。它有两个用于计划和实际的堆栈。我使用 highcharts 堆积条来表示像这样绘制的数据jsFiddle of Gantt
而不是数据作为

           series: [{
            name: 'Requested',
            data: [1,3,4,5,6],
            stack: 'Planned'
        }, {
            name: 'Requested',
            data: [2,4,5,7,8],
            stack: 'Actual'
        }, {
            name: 'Submitted',
            data: [2,3,2,3,4],
            stack: 'Planned'
        }, {
            name: 'Submitted',
            data: [3,5,2,3,4],
            stack: 'Actual'
        }, {
            name: 'Approved',
            data: [6,3,2,3,4],
            stack: 'Planned'
        }, {
            name: 'Approved',
            data: [2,4,2,3,4],
            stack: 'Actual'
        }]

我希望数据作为日期在这里我分别有请求、提交和批准的第一个、第二个和第三个日期。

 series: [{
            name: 'Part1',
            data: [Date.UTC(2013,01,12),Date.UTC(2013,01,23),Date.UTC(2013,02,05)],
            stack: 'Planned'
        }, {
            name: 'Part1',
            data: [Date.UTC(2013,01,15),Date.UTC(2013,01,29),Date.UTC(2013,02,05)],
            stack: 'Actual'
        },]

我需要从系列数据中获取 y 轴上的系列名称

 xAxis: {
               categories: ['Part1', 'Part2', 'Part3', 'Part4', 'Part5']             
            },

和 1. 起点应该从 data[0] 开始，因此它将包含两个条形图和三个点。 2. 我需要在栏中显示不同的日期，因此我可以显示每个活动的时间。

我尝试了以毫秒为单位的时间jsfiddle，但没有得到任何实质性的结果

【问题讨论】：

我有点不清楚第一个例子有什么问题，第二个例子有什么问题，你能用这个更新问题吗？另外，您是否看过here 的甘特图示例。
@PawełFus 第一个例子是正确的，但我需要那个 1. 单个柱的零应该从第一个 value.2 开始。值必须是日期 3. 条形应代表日期的差异，即完成任务的天数。
使用简单的堆叠条第一个点是不可能的。使用我的第一条评论中的解决方案，或尝试使用带有倒置选项的柱状范围图表作为图表。 2）这不是问题，使用日期时间轴。 3）您需要为此预处理数据并使用差异。

标签： javascript jquery json highcharts

【解决方案1】：

您可以在数据中使用“low”和“y”属性，以便呈现 X 偏移，因此您可以获得所需的“甘特效应”：

请检查这个例子：

var chart = new Highcharts.Chart({

chart: {
    renderTo: 'container',
    type: 'bar'
},

title: {
    text: 'Gantt module development plan'  
},

subtitle: {
    text: 'Using fake data'
},

xAxis: {
    categories: ['Planning', 'Development', 'Testing', 'Documentation']
},

yAxis: {
    type: 'datetime',
    min: Date.UTC(2012, 0, 1)
},

        tooltip: {
            formatter: function() {
                 console.log(this.point);
                var point = this.point;
                return '<b>'+ point.category +'</b><br/>'+
                    Highcharts.dateFormat('%b %e, %Y', point.low) + ' - ' +
                    Highcharts.dateFormat('%b %e, %Y', point.y);
            } 
        },

series: [{
    data: [{
        low: Date.UTC(2011, 11, 20),
        y: Date.UTC(2012, 0, 15)
    }, {
        low: Date.UTC(2012, 0, 10),
        y: Date.UTC(2012, 4, 28)
    }, {
        low: Date.UTC(2012, 3, 15),
        y: Date.UTC(2012, 4, 28)
    }, {
        low: Date.UTC(2012, 4, 15),
        y: Date.UTC(2012, 4, 28)
    }]
}]

});

干杯

弗兰

【讨论】：