高图规使工具提示可见并居中 [英] Highcharts gauge keep tooltip visible and centered

问题描述

调整屏幕大小时，我无法使高图仪表的笔尖出现并保持可见并居中显示在仪表中心.

I cannot get the tootlip of my highcharts gauge to appear and stay visible and centered inside the gauge when the screen is resized.

在我的小提琴中，您可以看到出现了工具提示，然后在一段时间后消失了.此外，调整窗口大小时，它不会保留在量规的中心.

In my fiddle you can see the tooltip appear then after a small amount of time disappear. Also, it does not remain in the center of the gauge when the window is resized.

感谢您的帮助.我的 JSFIDDLE 在这里.

Any help is appreciated. My JSFIDDLE is here.

    gaugeChartObj = new Highcharts.Chart({
        credits: false,
        chart: {
            renderTo: divID,
            type: 'solidgauge',
            marginTop: 30,
            events: {
                load: function(){
                    var p = this.series[0].points[0];
                    this.tooltip.refresh(p);
                }
            }
        },
        title: {
            text: dataC.title,
            style: {
                fontSize: '16px'
            }
        },
        exporting: {
            enabled: false
        },
        tooltip: {
            borderWidth: 0,
            backgroundColor: 'none',
            useHTML: true,
            shadow: false,
            style: {
                fontSize: '16px'
            },
            formatter: function() {
                return '<div style="width:100%;text-align:center;"><span style="font-size:1.2em;font-weight:bold;">' + this.point.series.name + '</span><br/><span style="font-size:3em;color:' + Highcharts.getOptions().colors[0] + ';font-weight:bold;">' + Highcharts.numberFormat(this.y / 10, 0) + '</span>';
            },
            positioner: function (labelWidth) {
                return {
                    x: 170 - labelWidth / 2,
                    y: 125
                };
            }
        },
        pane: {
            startAngle: 0,
            endAngle: 360,
            background: [{
                outerRadius: '106%',
                innerRadius: '94%',
                backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
                borderWidth: 0
            }]
        },
        yAxis: {
            min: 0,
            max: 100,
            lineWidth: 0,
            tickPositions: []
        },
        plotOptions: {
            solidgauge: {
                borderWidth: '12px',
                dataLabels: {
                    enabled: false
                },
                linecap: 'round',
                stickyTracking: true
            }
        },
        series: [{
            name: 'Subscriptions',
            borderColor: Highcharts.getOptions().colors[0],
            data: [{
                color: Highcharts.getOptions().colors[0],
                radius: '100%',
                innerRadius: '100%',
                y: dataC.seriesData
            }]
        }],
        lang: {
            noData: "No data to display"
        },
        noData: {
            style: {
                fontWeight: 'bold',
                fontSize: '15px',
                color: '#333333'
            }
        }
    });

推荐答案

您可以使用dataLabels而不是工具提示在实体表中显示居中信息: http://api.highcharts.com/highcharts/plotOptions.solidgauge.dataLabels

You can use dataLabels instead of tooltip to show centered information in your solidgauge chart: http://api.highcharts.com/highcharts/plotOptions.solidgauge.dataLabels

dataLabels: {
      enabled: true,
      y: -40,
      borderWidth: 0,
      backgroundColor: 'none',
      useHTML: true,
      shadow: false,
      style: {
        fontSize: '16px'
      },
      formatter: function() {
        return '<div style="width:100%;text-align:center;"><span style="font-size:1.2em;font-weight:bold;">' + this.point.series.name + '</span><br/><span style="font-size:3em;color:' + Highcharts.getOptions().colors[0] + ';font-weight:bold;">' + Highcharts.numberFormat(this.y / 10, 0) + '</span>';
      }
},

在这里您可以看到一个示例，它如何工作: http://jsfiddle.net/ujmxxf03/10/

Here you can see an example how it can work: http://jsfiddle.net/ujmxxf03/10/

这篇关于高图规使工具提示可见并居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！