Question

看看这个script :(由于某些原因，JsFiddle没有为我显示图表，但它可以作为html工作）

我有两个重叠的范围，但我无法让一对蓝色到前面，另一个黑色。单击“任务2”以查看上面的蓝色范围是否隐藏。

我尝试过使用z-index选项，但我只能通过系列设置而不是通过配对。

完整代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container1" style="min-width: 400px; height: 200px; margin: 0 auto"></div>

<div id="container2" style="min-width: 400px; height: 200px; margin: 0 auto"></div>

<script>
$(function () {

    window.chart1 = new Highcharts.Chart({

        chart: {
            renderTo: 'container1',
            type: 'columnrange',
            inverted: true
        },

        title: {
            text: "Top Chart"
        },

        xAxis: {
            categories: ['Customer A', 'Customer B']
        },

        yAxis: {
            labels: {
                formatter: function () {
                    return Math.abs(this.value);
                }
            }
        },
         tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                    'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
            }
        },

        legend: {
            enabled: true
        },

        plotOptions: {
            columnrange: {
                grouping: false
            }
        },

        series: [{
            name: 'Task 1',
            stack: 'Tasks',
            data: [{
                x: 0,
                low: -5,
                high: 5
            }, {
                x: 1,
                low: -15,
                high: 15
            }]
        }, {
            name: 'Task 2',
            stack: 'Tasks',
            data: [{
                x: 0,
                low: -10,
                high: 10
            }, {
                x: 1,
                low: -3,
                high: 3
            }]
        }]

    });


});
</script>

Answer 1

实现此目标的方法之一是为图表中的特定系列提供pointPadding。此选项允许两个条形都可见，即使它们彼此重叠。

plunker演示

   series: [{
        name: 'Task 1',
        stack: 'Tasks',
        data: [{
            x: 0,
            low: -5,
            high: 5
        }, {
            x: 1,
            low: -15,
            high: 15
        }]
    }, {
        name: 'Task 2',
        stack: 'Tasks',
        pointPadding: 0.3, /*pointPadding to specific series*/
        data: [{
            x: 0,
            low: -10,
            high: 10
        }, {
            x: 1,
            low: -3,
            high: 3
        }]
    }]

Highcharts Stacked Range z-Index

1 个答案: