Highcharts / Highstock步骤线没有垂直＆＃34;过渡＆＃34;行呢？

Question

是否可以省略“方波”线的垂直线？我想你可以称之为一个水平线，这是一个例子：

Answer 1

实现此外观的最简单方法是使用带有自定义“行”符号的散点图：

// define a custom line symbol
Highcharts.SVGRenderer.prototype.symbols.line = function (x, y, w, h) {
    return ['M', x, y, 'L', x - w * 2, y, 'M', x, y, 'L', x + w * 2, y, 'z'];
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
}

$('#container').highcharts({
    chart: {
        type: 'scatter'    
    },
    title: {
        text: 'Look At Lines!!'
    },     
    series: [{
        name: 'Line Symbol',
        data: [54.4, 29.9, {y: 129.2, radius: 8}, 144.0, 176.0, 135.6],
        marker: {
            symbol: 'line',
            lineColor: null, 
            lineWidth: 2
        }
    }]
});

请注意，您可以通过提升radius。

来调整单个点的长度

小提琴here。

产地：

Answer 2

虽然上面的答案很好，但我遇到的问题是，当与柱形图一起显示时，线符号的宽度与列宽不同。

example image

另一种选择是在新的图表类型中扩展列类型图表，如下所示：

$(function () {
(function (H) {
    var each = H.each,
        pick = H.pick,
        Series = H.Series,
        seriesType = H.seriesType;


    seriesType('floatingStep', 'column', {
        fixedPointLength: 2
    }, /** @lends seriesTypes.floatingStep.prototype */ {

        /**
         * Translate each point to the plot area coordinate system and find shape positions
         */
        translate: function () {
            var series = this,
                chart = series.chart,
                options = series.options,
                dense = series.dense = series.closestPointRange * series.xAxis.transA < 2,
                borderWidth = series.borderWidth = pick(
                    options.borderWidth,
                    dense ? 0 : 1 // #3635
                ),
                yAxis = series.yAxis,
                threshold = options.threshold,
                translatedThreshold = series.translatedThreshold = yAxis.getThreshold(threshold),
                minPointLength = pick(options.minPointLength, 5),
                fixedPointLength = options.fixedPointLength,
                metrics = series.getColumnMetrics(),
                pointWidth = metrics.width,
                seriesBarW = series.barW = Math.max(pointWidth, 1 + 2 * borderWidth), // postprocessed for border width
                pointXOffset = series.pointXOffset = metrics.offset;

            if (chart.inverted) {
                translatedThreshold -= 0.5; // #3355
            }

            // When the pointPadding is 0, we want the columns to be packed tightly, so we allow individual
            // columns to have individual sizes. When pointPadding is greater, we strive for equal-width
            // columns (#2694).
            if (options.pointPadding) {
                seriesBarW = Math.ceil(seriesBarW);
            }

            Series.prototype.translate.apply(series);

            // Record the new values
            each(series.points, function (point) {
                var yBottom = pick(point.yBottom, translatedThreshold),
                    safeDistance = 999 + Math.abs(yBottom),
                    plotY = Math.min(Math.max(-safeDistance, point.plotY), yAxis.len + safeDistance), // Don't draw too far outside plot area (#1303, #2241, #4264)
                    barX = point.plotX + pointXOffset,
                    barW = seriesBarW,
                    barY = Math.min(plotY, yBottom),
                    up,
                    barH = Math.max(plotY, yBottom) - barY;

                // Handle options.minPointLength
                if (Math.abs(barH) < minPointLength) {
                    if (minPointLength) {
                        barH = minPointLength;
                        up = (!yAxis.reversed && !point.negative) || (yAxis.reversed && point.negative);
                        barY = Math.abs(barY - translatedThreshold) > minPointLength ? // stacked
                            yBottom - minPointLength : // keep position
                            translatedThreshold - (up ? minPointLength : 0); // #1485, #4051
                    }
                }
                if (fixedPointLength) {
                    barH = fixedPointLength;
                }

                // Cache for access in polar
                point.barX = barX;
                point.pointWidth = pointWidth;

                // Fix the tooltip on center of grouped columns (#1216, #424, #3648)
                point.tooltipPos = chart.inverted ? [yAxis.len + yAxis.pos - chart.plotLeft - plotY, series.xAxis.len - barX - barW / 2, barH] : [barX + barW / 2, plotY + yAxis.pos - chart.plotTop, barH];

                // Register shape type and arguments to be used in drawPoints
                point.shapeType = 'rect';
                point.shapeArgs = series.crispCol.apply(
                    series,
                    point.isNull ?
                    // #3169, drilldown from null must have a position to work from
                    // #6585, dataLabel should be placed on xAxis, not floating in the middle of the chart
                    [barX, translatedThreshold, barW, 0] : [barX, barY, barW, barH]
                );
            });
        },
    });
})(Highcharts);

}）;

View in JS Fiddle