javascript - 在 HighCharts 中使用负堆栈在条形图中绘制线条

Question

在我的代码中，我想在堆积条形图的每个条形中绘制一条线。如果 Highcharts 中有任何选项可以像这样自定义图表

我需要在每个条中绘制所选部分的线和圆。

我的代码

    var categories = ['Atlanta', 'Columbia', 'Ohio', 'Great So'];
$(document).ready(function () {
    $('#container').highcharts({
        title: { text: null },
        subtitle: { text: null },
        credits: {
            enabled: false
        },

        chart: {
            type: 'bar'
        },
        xAxis: [{
            categories: categories,
            reversed: false, //to change x axis starting from top or bottom
            opposite:true,
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            tickLength: 0,

        }],
        yAxis: {
            min: -2250,
            max:2250,
            title: {
                text: null
            },
           gridLineWidth: 0,
           minorGridLineWidth: 0,
           lineColor: 'transparent',
           linewidth: 0,
           plotLines: [{
            color: '#ddd',
            width: 1,
            value: 0
        }],
            labels: {
                //step: 10,
                formatter: function () {
                    var value;

                    if(this.value==0)                                                               value='$-';
                    else if(this.value<0)
                    value='$('+Math.abs(this.value)+')';
                    else
                    value='$'+Math.abs(this.value);

                    return  value;
                }
            }
        },

        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'Male',
            data: [1000,1300,200,300]
        }, {
            name: 'Female',
            data: [1000,-300,-200,300]
        }]
    });
   });

fiddle :Fiddle

Answer 1

您可以使用带有声明的空点和 lineWidth 参数的额外散点系列。

series: [{
         type:'scatter',
       color: 'red',
       lineWidth: 2,
       data: [[0,0],[0,800],null,[1,0],[1,800],null,[2,0],[2,800],null,[3,0],[3,800],null,[4,0],[4,800]]
    }, {
        name: 'Year 1800',
        data: [107, 31, 635, 203, 100]
    }, {
        name: 'Year 1900',
        data: [-133, -156, -247, -408, 20]
    }]

缺少的矩形可以通过 Renderer.rect 添加功能。

示例:

• http://jsfiddle.net/9u3hgq42/