时间戳

首页 > 解决方案 > 向下钻取后，向上钻取按钮与图表重叠

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

问题描述

我有一个带有向下钻取的 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]
            ]
        }]
    }
});

通过以下方式可以重现问题。从 Legend 中选择 2010，然后单击republicans 向下钻取。图表与按钮重叠。

标签： javascriptchartshighchartsdrilldown

解决方案

为避免按钮与图表重叠，您可以移出drillUpButton绘图区域：

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

现场演示：http: //jsfiddle.net/BlackLabel/v8azqpo3/

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

推荐阅读