javascript - 如何使用 highcharts 库制作具有甘特图的里程碑线？

Question

带有 Highcharts 的甘特图示例:http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/xrange-series/

我正在尝试使用类似里程碑的示例。

我的代码目前看起来像这样:

$(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
            }]
        }]

    });
});

编辑:我希望它看起来像的模型示例:
http://imgur.com/hjLZxBt
我希望从 Sharepoint 上的列表中提取线条以在甘特图上显示银行假期和卡住期

Answer 1

如果您想指定节假日或周末，我建议您使用 plotBands。要标记特定的里程碑，您可以使用 plotLines。以下是将两者应用于您的图表的示例。

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

});
});