如何使用highcharts库使用GANTT图表创建里程碑线？

Question

Example of a GANTT chart with Highcharts: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/xrange-series/

I'm trying to use an example like that with milestones.

My code is looking like this currently:

$(function () {

    /**
     * Highcharts X-range series plugin
     */ (function (H) {
        var defaultPlotOptions = H.getOptions().plotOptions,
            columnType = H.seriesTypes.column,
            each = H.each;

        defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {});
        H.seriesTypes.xrange = H.extendClass(columnType, {
            type: 'xrange',
            parallelArrays: ['x', 'x2', 'y'],
            animate: H.seriesTypes.line.prototype.animate,

            /**
             * Borrow the column series metrics, but with swapped axes. This gives free access
             * to features like groupPadding, grouping, pointWidth etc.
             */
            getColumnMetrics: function () {
                var metrics,
                chart = this.chart,
                    swapAxes = function () {
                        each(chart.series, function (s) {
                            var xAxis = s.xAxis;
                            s.xAxis = s.yAxis;
                            s.yAxis = xAxis;
                        });
                    };

                swapAxes();

                this.yAxis.closestPointRange = 1;
                metrics = columnType.prototype.getColumnMetrics.call(this);

                swapAxes();

                return metrics;
            },
            translate: function () {
                columnType.prototype.translate.apply(this, arguments);
                var series = this,
                    xAxis = series.xAxis,
                    yAxis = series.yAxis,
                    metrics = series.columnMetrics;

                H.each(series.points, function (point) {
                    barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX;
                    point.shapeArgs = {
                        x: point.plotX,
                        y: point.plotY + metrics.offset,
                        width: barWidth,
                        height: metrics.width
                    };
                    point.tooltipPos[0] += barWidth / 2;
                    point.tooltipPos[1] -= metrics.width / 2;
                });
            }
        });

        /**
         * Max x2 should be considered in xAxis extremes
         */
        H.wrap(H.Axis.prototype, 'getSeriesExtremes', function (proceed) {
            var axis = this,
                dataMax = Number.MIN_VALUE;

            proceed.call(this);
            if (this.isXAxis) {
                each(this.series, function (series) {
                    each(series.x2Data || [], function (val) {
                        if (val > dataMax) {
                            dataMax = val;
                        }
                    });
                });
                if (dataMax > Number.MIN_VALUE) {
                    axis.dataMax = dataMax;
                }
            }
        });
    }(Highcharts));


    // THE CHART
    $('#container').highcharts({
        chart: {
            type: 'xrange'
        },
        title: {
            text: 'Highcharts X-range study'
        },
        xAxis: {
            type: 'datetime',
        },
        yAxis: {
            title: '',
            categories: ['Prototyping', 'Development', 'Testing'],
            min: 0,
            max: 2
        },
        series: [{
            name: 'Project 1',
            // pointPadding: 0,
            // groupPadding: 0,
            borderRadius: 5,
            pointWidth: 10,
            data: [{
                x: Date.UTC(2014, 11, 1),
                x2: Date.UTC(2014, 11, 2),
                y: 0
            }, {
                x: Date.UTC(2014, 11, 2),
                x2: Date.UTC(2014, 11, 5),
                y: 1
            }, {
                x: Date.UTC(2014, 11, 8),
                x2: Date.UTC(2014, 11, 9),
                y: 2
            }, {
                x: Date.UTC(2014, 11, 9),
                x2: Date.UTC(2014, 11, 19),
                y: 1
            }, {
                x: Date.UTC(2014, 11, 10),
                x2: Date.UTC(2014, 11, 23),
                y: 2
            }]
        }]

    });
});

EDIT: mock-up example of what I want it to look like:
http://imgur.com/hjLZxBt
I want the lines to pull from a list on Sharepoint to show bank holidays and freeze periods on the gantt chart

Answer 1

If you want to designate bank holidays or weekends, I would recommend using plotBands. To mark a specific milestone, you could use plotLines. Here is an example of both applied to your chart.

http://jsfiddle.net/u8zvpaum/

$(function () {

/**
 * Highcharts X-range series plugin
 */ (function (H) {
    var defaultPlotOptions = H.getOptions().plotOptions,
        columnType = H.seriesTypes.column,
        each = H.each;

    defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {});
    H.seriesTypes.xrange = H.extendClass(columnType, {
        type: 'xrange',
        parallelArrays: ['x', 'x2', 'y'],
        animate: H.seriesTypes.line.prototype.animate,

        /**
         * Borrow the column series metrics, but with swapped axes. This gives free access
         * to features like groupPadding, grouping, pointWidth etc.
         */
        getColumnMetrics: function () {
            var metrics,
            chart = this.chart,
                swapAxes = function () {
                    each(chart.series, function (s) {
                        var xAxis = s.xAxis;
                        s.xAxis = s.yAxis;
                        s.yAxis = xAxis;
                    });
                };

            swapAxes();

            this.yAxis.closestPointRange = 1;
            metrics = columnType.prototype.getColumnMetrics.call(this);

            swapAxes();

            return metrics;
        },
        translate: function () {
            columnType.prototype.translate.apply(this, arguments);
            var series = this,
                xAxis = series.xAxis,
                yAxis = series.yAxis,
                metrics = series.columnMetrics;

            H.each(series.points, function (point) {
                barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX;
                point.shapeArgs = {
                    x: point.plotX,
                    y: point.plotY + metrics.offset,
                    width: barWidth,
                    height: metrics.width
                };
                point.tooltipPos[0] += barWidth / 2;
                point.tooltipPos[1] -= metrics.width / 2;
            });
        }
    });

    /**
     * Max x2 should be considered in xAxis extremes
     */
    H.wrap(H.Axis.prototype, 'getSeriesExtremes', function (proceed) {
        var axis = this,
            dataMax = Number.MIN_VALUE;

        proceed.call(this);
        if (this.isXAxis) {
            each(this.series, function (series) {
                each(series.x2Data || [], function (val) {
                    if (val > dataMax) {
                        dataMax = val;
                    }
                });
            });
            if (dataMax > Number.MIN_VALUE) {
                axis.dataMax = dataMax;
            }
        }
    });
}(Highcharts));


// THE CHART
$('#container').highcharts({
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Highcharts X-range study'
    },
    xAxis: {
        type: 'datetime',

        /* START plotBands AND plotLines EDITS */

        pointInterval: 24 * 3600 * 1000, // one day,   
        plotLines: [{ // mark milestone date with vertical line
            color: '#F45B5B',
            width: '2',
            value: Date.UTC(2014, 11, 6),
            label: {
                useHTML: true,
                text: '<span style="color:#F45B5B"">Dec 6, 2014</span>'


            }
        }],
        plotBands: [{ // visualize the weekend or other range of dates
            from: Date.UTC(2014, 11, 2),
            to: Date.UTC(2014, 11, 5),
            color: 'rgba(68, 170, 213, .2)'
        }]

        /* END plotBands AND plotLines EDITS */

    },
    yAxis: {
        title: '',
        categories: ['Prototyping', 'Development', 'Testing'],
        min: 0,
        max: 2
    },
    series: [{
        name: 'Project 1',
        // pointPadding: 0,
        // groupPadding: 0,
        borderRadius: 5,
        pointWidth: 10,
        data: [{
            x: Date.UTC(2014, 11, 1),
            x2: Date.UTC(2014, 11, 2),
            y: 0
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 2
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 2
        }]
    }]

});
});

Answer 2

Thanks joshwa for a great answer.

If there are 2 projects, each of the 3 sections ('Prototyping', 'Development', 'Testing') would have 2 bar one on top of the other for comparison.

$(function () {

/**
 * Highcharts X-range series plugin
 */ (function (H) {
    var defaultPlotOptions = H.getOptions().plotOptions,
        columnType = H.seriesTypes.column,
        each = H.each;

    defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {});
    H.seriesTypes.xrange = H.extendClass(columnType, {
        type: 'xrange',
        parallelArrays: ['x', 'x2', 'y'],
        animate: H.seriesTypes.line.prototype.animate,

        /**
         * Borrow the column series metrics, but with swapped axes. This gives free access
         * to features like groupPadding, grouping, pointWidth etc.
         */
        getColumnMetrics: function () {
            var metrics,
            chart = this.chart,
                swapAxes = function () {
                    each(chart.series, function (s) {
                        var xAxis = s.xAxis;
                        s.xAxis = s.yAxis;
                        s.yAxis = xAxis;
                    });
                };

            swapAxes();

            this.yAxis.closestPointRange = 1;
            metrics = columnType.prototype.getColumnMetrics.call(this);

            swapAxes();

            return metrics;
        },
        translate: function () {
            columnType.prototype.translate.apply(this, arguments);
            var series = this,
                xAxis = series.xAxis,
                yAxis = series.yAxis,
                metrics = series.columnMetrics;

            H.each(series.points, function (point) {
                barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX;
                point.shapeArgs = {
                    x: point.plotX,
                    y: point.plotY + metrics.offset,
                    width: barWidth,
                    height: metrics.width
                };
                point.tooltipPos[0] += barWidth / 2;
                point.tooltipPos[1] -= metrics.width / 2;
            });
        }
    });

    /**
     * Max x2 should be considered in xAxis extremes
     */
    H.wrap(H.Axis.prototype, 'getSeriesExtremes', function (proceed) {
        var axis = this,
            dataMax = Number.MIN_VALUE;

        proceed.call(this);
        if (this.isXAxis) {
            each(this.series, function (series) {
                each(series.x2Data || [], function (val) {
                    if (val > dataMax) {
                        dataMax = val;
                    }
                });
            });
            if (dataMax > Number.MIN_VALUE) {
                axis.dataMax = dataMax;
            }
        }
    });
}(Highcharts));


// THE CHART
$('#container').highcharts({
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Highcharts X-range study'
    },
    xAxis: {
        type: 'datetime',
        pointInterval: 24 * 3600 * 1000, // one day,   
    },
    yAxis: {
        title: '',
        categories: ['Prototyping', 'Development', 'Testing'],
        min: 0,
        max: 2
    },
    series: [{
        name: 'Project 1',
        borderRadius: 5,
        pointWidth: 10,
        data: [{
            x: Date.UTC(2014, 11, 1),
            x2: Date.UTC(2014, 11, 2),
            y: 0
        },{
            x: Date.UTC(2014, 11, 3),
            x2: Date.UTC(2014, 11, 9),
            y: 0
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 1),
            x2: Date.UTC(2014, 11, 9),
            y: 2
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 2
        }]
    },{
        name: 'Project 2',
        borderRadius: 5,
        pointWidth: 10,
        data: [{
            x: Date.UTC(2014, 11, 1),
            x2: Date.UTC(2014, 11, 2),
            y: 0
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 2
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 13),
            x2: Date.UTC(2014, 11, 18),
            y: 2
        }]
    }]

});
});

Answer 3

If you add a second axis and series (with the data of the milestones) you should be able to do it.

Here is an example with a line on top of a column chart

 $(function () { $('#container').highcharts({ chart: { zoomType: 'xy' }, title: { text: 'Average Monthly Temperature and Rainfall in Tokyo' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: [{ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], crosshair: true }], yAxis: [{ // Primary yAxis labels: { format: '{value}°C', style: { color: Highcharts.getOptions().colors[1] } }, title: { text: 'Temperature', style: { color: Highcharts.getOptions().colors[1] } } }, { // Secondary yAxis title: { text: 'Rainfall', style: { color: Highcharts.getOptions().colors[0] } }, labels: { format: '{value} mm', style: { color: Highcharts.getOptions().colors[0] } }, opposite: true }], tooltip: { shared: true }, legend: { layout: 'vertical', align: 'left', x: 120, verticalAlign: 'top', y: 100, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' }, series: [{ name: 'Rainfall', type: 'column', yAxis: 1, data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], tooltip: { valueSuffix: ' mm' } }, { name: 'Temperature', type: 'spline', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], tooltip: { valueSuffix: '°C' } }] }); }); 

Answer 4

您可以在xAxis上使用plotLines 。