Question

我是Highcharts的新手并且一直在尝试甘特图表类型，遗憾的是现在还没有一大堆文档。

我的要求非常基本，我需要绘制多个里程碑系列，以显示不同项目的滑点。我已经使用了一些我在网上找到的示例代码来启动我，但是我需要删除系列之间的空白（'我的第一行'）行。看到： -

    var today = new Date(),
    day = 1000 * 60 * 60 * 24;

    var grey_OrigTargDate = '#A6A6A6';
    var blue_Completed = '#2e75b6';
    var green_Ontarget = '#00b050';
    var yellow_OfftrackMinor = '#ffc000';
    var red_OffTrackMajor = '#ff0000';

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();

// THE CHART

Highcharts.setOptions({
    colors: ['#058DC7']
});

Highcharts.ganttChart('container', {
    title: {
        text: 'Gantt Chart Test'
    },
    xAxis: {
        currentDateIndicator: true,
        min: today - 3 * day,
        max: today + 18 * day
    },

    series: [{
        name: 'Test series',
        data: [{
            taskName: 'My 1st row',
            id: 'r1',
            start: today + 4.5 * day,
            milestone: true,
            color: grey_OrigTargDate
        }, {
            taskName: 'My 1st row',
            id: 'r2',
            start: today + 7.5 * day,
            milestone: true,
            color: green_Ontarget
        }, {
            taskName: 'My 2nd row',
            id: 'r3',
            start: today + 9.5 * day,
            milestone: true,
            color: blue_Completed
        }, {
            taskName: 'My 2nd row',
            id: 'r4',
            start: today + 11.5 * day,
            milestone: true,
            color: red_OffTrackMajor
        }]
    }]
});

我试图在每一行上绘制2个里程碑。我知道x系列图表可以完成类似的事情，但我更喜欢使用甘特选项。我很感激任何帮助。

Answer 1

您可以通过为Y-axis

分配类别来解决此问题

 yAxis: {
    type: 'category',
    categories: ['A', 'B'],
    reversed: true,        
 },

为了实现此目的，您可以使用taskName / y: 0更改y: 1。如果您的taskName与您的类别名称相同，则会有效，但如果要更改类别，则使用y: 0会更加动态。

您的代码最终将如下所示：

 var today = new Date(),
    day = 1000 * 60 * 60 * 24;

    var grey_OrigTargDate = '#A6A6A6';
    var blue_Completed = '#2e75b6';
    var green_Ontarget = '#00b050';
    var yellow_OfftrackMinor = '#ffc000';
    var red_OffTrackMajor = '#ff0000';

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();

// THE CHART

Highcharts.setOptions({
    colors: ['#058DC7']
});

Highcharts.ganttChart('container', {
    title: {
        text: 'Gantt Chart Test'
    },
    xAxis: {
        currentDateIndicator: true,
        min: today - 3 * day,
        max: today + 18 * day
    },

    yAxis: {
        type: 'category',
        categories: ['A', 'B'],
        reversed: true,

    },

    series: [{
        name: 'Test series',
        data: [{
            y: 0, // taskName: 'A' works too
            id: 'r1',
            start: today + 4.5 * day,
            milestone: true,
            color: grey_OrigTargDate
        }, {
            y: 0,
            id: 'r2',
            start: today + 7.5 * day,
            milestone: true,
            color: green_Ontarget
        },{
            y: 1,
            id: 'r3',
            start: today + 9.5 * day,
            milestone: true,
            color: blue_Completed
        }, {
            y: 1,
            id: 'r4',
            start: today + 11.5 * day,
            milestone: true,
            color: red_OffTrackMajor
        }]
    }]
});

这是一个有效的JSFiddle https://jsfiddle.net/z86aq99g/1/

Highcharts Gantt里程碑系列

1 个答案: