2

ハイチャートを使用して円グラフを生成しています。正常に生成されていますが、グラフを表示する固定領域があり、ツールチップに大量のテキストがあるという問題があります。

ツールチップが大きすぎてチャート 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を使ったワークアウンドをご覧ください

.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 に答える
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 に答える