2

我正在使用 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/

4

4 回答 4

3

请看一下使用 CSS 的 workaournd

.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/

于 2013-09-06T13:33:16.260 回答
1

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

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

虽然只处理溢出，但您仍然需要剪辑工具提示的内容。

于 2014-07-17T13:45:14.467 回答
0

我使用了下面的答案，但它对我不起作用。对我来说，问题是工具提示正常出现，但是当鼠标离开时，工具提示并没有消失。这是我的解决方案，对我来说效果很好。希望它会有所帮助

$('.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()
        });
于 2014-01-22T17:38:08.107 回答
0

通过如下动态更改 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/

于 2013-09-09T14:17:35.607 回答