javascript - 在HighCharts中以负堆栈在Bar中绘制线

在我的代码中，我想在堆积的条形图的每个条形图中画一条线。如果在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

最佳答案

您可以将额外的散点系列与声明的空点和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/

关于javascript - 在HighCharts中以负堆栈在Bar中绘制线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37808219/