После развертки кнопка сверления перекрывается с графиком - PullRequest
Новая
       50

После развертки кнопка сверления перекрывается с графиком

0 голосов
/ 20 сентября 2018

У меня есть столбчатая диаграмма 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 из Легенды, затем нажмите на республиканцев, чтобы развернуть.График перекрывается кнопкой.

1 Ответ

0 голосов
/ 20 сентября 2018

Чтобы избежать наложения кнопки на график, вы можете переместить drillUpButton за пределы области графика: 

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

Демонстрационная версия: http://jsfiddle.net/BlackLabel/v8azqpo3/

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

...