Question

我使用Highcharts生成饼图。它产生的很好，但问题是我有一个固定的区域来显示图表，工具提示有大量的文本。

工具提示太大而无法放入图表div中，我该如何解决？

$(function () {
    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'ER_inpatient_stay',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                marginTop: 0,
                plotShadow: false,
                backgroundColor: 'none',
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                borderColor: '#fff',
                itemMarginTop: 30,
                verticalAlign: 'top',
                x: 70,
                y: 0
            },
            title: {
                text: ''
            },
            tooltip: {
                userHTML: true,
                style: {
                    padding: 10,
                    width: 250,
                    height: 60,
                },
                formatter: function () {
                    return this.point.residents;
                },
            },
            exporting: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        formatter: function () {
                            return this.point.y;
                        },
                        color: 'white',
                        distance: -10
                    },
                    showInLegend: true,
                    tooltip: {}
                }
            },
            series: [{
                type: 'pie',
                size: 80,
                name: '',
                data: [{
                    'name': 'E/R Visits',
                        'y': 1,
                        'residents': "fMonroe Monroe",
                        'color': '#FA3D19'

                }, {
                    'name': 'Inpatient Stay',
                        'y': 21,
                        'residents': "fGinanni Ginanni, fJobs Jobs, fMonroe Monroe, fDickerson Dickerson, fBrown Brown, fHerter Herter, fDavidson Davidson, fFernbach Fernbach, fGentry Gentry, fJones Jones, fKostic Kostic, fnewresident lnewresident, fLogger Logger, fMaxwell Maxwell, fMcGuire McGuire, fMiller Miller, fO'Farrell O'Farrell, fProgram Program, fProgram2 Program2, frer rer",
                        'color': 'orange'
                }]
            }]
        });
    });
})

小提琴：http://jsfiddle.net/faridu86/syrF6/

Answer 1

请使用CSS

查看解决方法

.highcharts-container {
    overflow: visible !important;
}
.tooltip {
    position: relative;
    z-index: 50;
    border: 2px solid rgb(0, 108, 169);
    border-radius: 5px;
    background-color: #ffffff;
    padding: 5px;
    font-size: 9pt;
}

http://jsfiddle.net/G4NLn/8/

Answer 2

这个解决方案对我有用，受塞巴斯蒂安的启发：

.highcharts-container,
.highcharts-container svg {
    overflow: visible !important;
}

只关注溢出，你仍然需要剪辑工具提示的内容。

Answer 3

通过动态更改svg和highchart-container大小，我已经解决了问题

    $('.highcharts-series-group').mouseover(function(){
            setTimeout(function() {
                $('.highcharts-tooltip').css({'height': 'auto !important'});

                var tspans = $('tspan').length;
                var svg_height = 150;
                if( (tspans * 16 ) > 150 ){
                    svg_height = tspans * 16;
                }
                $('.highcharts-container').css({'height': svg_height+'px'});
                $('svg').height(svg_height);
            },100);
    });

小提琴：http://jsfiddle.net/faridu86/syrF6/2/

Answer 4

我用下面的答案，但它不适合我。对我来说问题是工具提示正常，但当鼠标出来时，工具提示不会消失。这是我的解决方案，它对我来说很好。希望它会有所帮助

$('.highcharts-series-group').mouseenter(function(){
            $('.highcharts-tooltip').css({'height': 'auto !important'});
            var tspans = $('tspan').length;
            var svg_height = 150;
            if( (tspans * 16 ) > 150 ){
                svg_height = tspans * 16;
            }
            $('.highcharts-container').css({'height': svg_height+'px'});
            $('svg').height(svg_height);
            defect_chart.redraw()
        });

        $('.highcharts-series-group').mouseleave(function(){
            defect_chart.tooltip.hide()
        });

Highcharts pie工具提示中断

4 个答案: