Question

我有一个带有向下钻取的Highcharts柱形图，当我向下钻取时出现了问题。当我向下钻取时，将出现向上钻取按钮，该按钮与图表重叠。有没有办法放置此向上钻取按钮而不与图表重叠。

以下是示例代码。 http://jsfiddle.net/yasirunilan/gt8n96ck/

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Highcharts multi-series drilldown'
    },
    subtitle: {
        text: 'Click columns to drill down to single series. Click categories to drill down both.'
    },
    xAxis: {
        type: 'category'
    },

    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        }
    },

    series: [{
        name: '2010',
        data: [{
            name: 'Republican',
            y: 5,
            drilldown: 'republican-2010'
        }, {
            name: 'Democrats',
            y: 2,
            drilldown: 'democrats-2010'
        }, {
            name: 'Other',
            y: 4,
            drilldown: 'other-2010'
        }]
    }, {
        name: '2014',
        data: [{
            name: 'Republican',
            y: 4,
            drilldown: 'republican-2014'
        }, {
            name: 'Democrats',
            y: 4,
            drilldown: 'democrats-2014'
        }, {
            name: 'Other',
            y: 4,
            drilldown: 'other-2014'
        }]
    }],
    drilldown: {
        series: [{
            id: 'republican-2010',
            data: [
                ['East', 4],
                ['West', 2],
                ['North', 1],
                ['South', 4]
            ]
        }, {
            id: 'democrats-2010',
            data: [
                ['East', 6],
                ['West', 2],
                ['North', 2],
                ['South', 4]
            ]
        }, {
            id: 'other-2010',
            data: [
                ['East', 2],
                ['West', 7],
                ['North', 3],
                ['South', 2]
            ]
        }, {
            id: 'republican-2014',
            data: [
                ['East', 2],
                ['West', 4],
                ['North', 1],
                ['South', 7]
            ]
        }, {
            id: 'democrats-2014',
            data: [
                ['East', 4],
                ['West', 2],
                ['North', 5],
                ['South', 3]
            ]
        }, {
            id: 'other-2014',
            data: [
                ['East', 7],
                ['West', 8],
                ['North', 2],
                ['South', 2]
            ]
        }]
    }
});

可以按照以下方式重现问题。从图例中选择2010，然后单击共和党人以进行深入研究。图表与按钮重叠。

Answer 1

为避免将按钮与图表重叠，可以将drillUpButton移动到绘图区域之外：

    drillUpButton: {
        position: {
            x: 0,
            y: -35,
        }
    }

实时演示：http://jsfiddle.net/BlackLabel/v8azqpo3/

API：https://api.highcharts.com/highcharts/drilldown.drillUpButton.position.y

向下钻取后，向下钻取按钮与图表重叠

1 个答案: