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

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/

Answer 2

就像Sebastian Bochan的优秀答案一样，我通过添加两个＆＃34;虚拟系列＆＃34;来解决您的问题。（没有有意义的数据值）到图表中以模拟线条和标记。

series: [{
    name: 'Male',
    data: [1000,1300,200,300],
    grouping: false,
    zIndex: 10
}, {
    name: 'Female',
    data: [1000,-300,-200,300],
    grouping: false,
    zIndex: 10
}, {
    // "dummy series" to draw the lines
    name: 'thin lines',
    data: [2495,2495,2495,2495],
    groupPadding: 0.6,
    color: 'gray',
    stacking: false,
    grouping: true,
    borderWidth: 0,
    showInLegend: false,
    enableMouseTracking: false,
    zIndex: 0
}, {
    // "dummy series" to draw the markers
    name: 'markers',
    data: [2495,2495,2495,2495],
    type: 'line',
    lineWidth: 0,
    marker: { fillColor: 'gray' },
    showInLegend: false,
    enableMouseTracking: false
}]

对于绘制线条的系列，我使用了（默认）列格式。我将groupPadding设置为0.6以将列细化为一行，将stacking设置为false，这样它就不会包含在男性和女性系列中，并设置showInLegend和enableMouseTracking为false，因此用户无法与他们互动。

对于标记，我为第二个＆＃34;虚拟＆＃34;选择了行格式。系列。我将数据设置为最大可见值（在您的示例中一直向下推动标记离开图表的边缘）。我也重复了showInLegend和enableMouseTracking属性。

最后，为了使该行与男性和女性列一致，我使用了grouping属性。我将这两个都设置为false，以确保它们不会与＆＃34; dummy＆＃34;一起绘制。列。

以下是您对这些变化的更新版本：http://jsfiddle.net/brightmatrix/1hgvxp0u/3/

在HighCharts中使用负堆栈在Bar中绘制线条

2 个答案: