Question

我在Highcharts Donut / Pie图表的中心显示文字。但我的问题是中心文本与工具提示文本重叠，工具提示变得不可读。

我尝试更改工具提示的zIndex以将其置于前面，但它不起作用。我希望工具提示位于甜甜圈中心文本之上。

请在此处查看完整图表：http://jsfiddle.net/SufianRashid/88q5uke1

//==================== HIGH CHARTS =========================//
    function RenderPieChart(chartId, chartData, donutCenterText) {
        $('#' + chartId).highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: 0,
                plotShadow: false,
                height: 270
            },
            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            title: {
                text: '',
                align: 'center',
                verticalAlign: 'middle',
                y: 0,
                useHTML: true
            },
            tooltip: {
                backgroundColor: 'white',
                useHtml: true,
                //zIndex: 99, //on top of everything
                headerFormat: '',
                pointFormat: '{point.actualCounts} {point.name}'
            },
            plotOptions: {
                pie: {
                    dataLabels: {
                        formatter: function () { if (this.y != 0) return this.y + '%'; },    //don't show 0% values
                        enabled: true,
                        distance: -25,  //change this value to show label inside/outside the pie chart (negative means towards inside)
                        style: {
                            fontWeight: 'bold',
                            color: 'white',
                            textShadow: '0px 1px 2px black'
                        }
                    },
                    //showInLegend: true,
                    startAngle: 0,
                    endAngle: 360,
                    center: ['50%', '50%']
                },
                //-------- On click open drill down url --------//
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function () {
                                location.href = this.options.url;   //same window
                            }
                        }
                    }
                }//End adding link
                //--------------------------------//
            },
            series: [{
                type: 'pie',
                innerSize: '140px',
                //--------------------//
                data: chartData
                //--------------------//
            }]
        },
//-------- Show Center Text ------//
        function (chart) {

            var xpos = chart.plotLeft + (chart.plotWidth * 0.43);
            var ypos = chart.plotTop + (chart.plotHeight * 0.4);


            // Render the text 
            chart.innerText = chart.renderer.html(donutCenterText, xpos, ypos).add();

        }
        );  //EOF: HighChart
    }

Answer 1

尝试以下操作将解决您的问题：

<强> CSS：

tooltip: {
           borderWidth: 0,
           backgroundColor: "rgba(255,255,255,0)",
           shadow: false,
           useHTML: true,
           //zIndex: 99, //on top of everything
           headerFormat: '',
           pointFormat: '{point.actualCounts} {point.name}'
         },

<强> JQuery的：

RenderPieChart(
'PieChartContainer', 
[
{ name: 'tickets opened within 24 hrs', y: 76.5, actualCounts: 54, url:'../dummyUrl.html' },
{ name: 'tickets opened within 25 to 48 hrs', y: 6.9, actualCounts: 77, url:'../dummyUrl.html' },
{ name: 'tickets opened in 49 to 72+ hrs', y: 93.1, actualCounts: 1032, url:'../dummyUrl.html' }
],
"<span id='DonutCenterText' style='text-align:center;' class='donutValuesOpen'><span>Total Open <br/>Tickets: <a href='../dummyUrl.html'> 1109 </a> <br/> </span><span class='Avg'>Average Days <br/>Open: 8 </span> </span>"
);

//==================== HIGH CHARTS =========================//
        function RenderPieChart(chartId, chartData, donutCenterText) {
            $('#' + chartId).highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: 0,
                    plotShadow: false,
                    height: 270
                },
                credits: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                title: {
                    text: '',
                    align: 'center',
                    verticalAlign: 'middle',
                    y: 0,
                    useHTML: true
                },
                tooltip: {
                    borderWidth: 0,
                    backgroundColor: "rgba(255,255,255,0)",
                    shadow: false,
                    useHTML: true,
                    //zIndex: 99, //on top of everything
                    headerFormat: '',
                    pointFormat: '{point.actualCounts} {point.name}'
                },

                plotOptions: {
                    pie: {
                        dataLabels: {
                            formatter: function () { if (this.y != 0) return this.y + '%'; },    //don't show 0% values
                            enabled: true,
                            distance: -25,  //change this value to show label inside/outside the pie chart (negative means towards inside)
                            style: {
                                fontWeight: 'bold',
                                color: 'white',
                                textShadow: '0px 1px 2px black'
                            }
                        },
                        //showInLegend: true,
                        startAngle: 0,
                        endAngle: 360,
                        center: ['50%', '50%']
                    },
                    //-------- On click open drill down url --------//
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function () {
                                    location.href = this.options.url;   //same window
                                }
                            }
                        }
                    }//End adding link
                    //--------------------------------//
                },
                series: [{
                    type: 'pie',
                    innerSize: '140px',
                    //--------------------//
                    data: chartData
                    //--------------------//
                }]
            },


//------- Show Donut center text ------------------//
            function (chart) {

                var xpos = chart.plotLeft + (chart.plotWidth * 0.43);
                var ypos = chart.plotTop + (chart.plotHeight * 0.4);

            
                // Render the text 
                chart.innerText = chart.renderer.html(donutCenterText, xpos, ypos).add();

            }
            );  //EOF: HighChart
        }

检查：

＆＃13;

    .highcharts-tooltip span {
        background-color:white;
        border:1px solid;
        opacity:1;
        z-index:9999 !important;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="PieChartContainer" style="height: 400px"></div>

＆＃13;

index

＆＃13;

highcharts圆环图中心文本与工具提示重叠

1 个答案: