Question

我正在使用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.起始应该来自数据[0]，因此它将包含两个条和三个点。 2.我需要条形图中的日期不同，因此我可以显示每个活动的时间。

我用毫秒jsfiddle尝试了一段时间，但无法实现任何实质性的

Answer 1

您可以使用＆＃34; low＆＃34;和＆＃34; y＆＃34;数据中的属性因此呈现X偏移，因此您可以获得＆＃34;甘特效应＆＃34;你需要：

请查看此示例：

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)
    }]
}]

});

干杯

弗兰

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

1 个答案: