jquery - 如何始终显示云图中该点的弹出窗口？

在下面的图片中，您可以看到悬停时出现的弹出窗口。我希望它总是出现在其他地方。

最佳答案

尝试通过plotoptions

plotOptions: {
      series: {
        dataLabels: {
            enabled: true,
          inside: false,
          overflow: 'none',
          crop: true,
          shape: 'callout',
          backgroundColor:'rgba(255,255,255,0.8)',
          borderColor: 'rgba(0,0,255,0.8)',
          color: 'rgba(0,0,0,0.75)',
          borderWidth: .5,
          borderRadius: 5,
          y: -10,
          style: {
            fontFamily: 'Helvetica, sans-serif',
            fontSize: '10px',
            fontWeight: 'normal',
            textShadow: 'none'
          },
          formatter: function() {
            return '<strong>'+this.series.name+'</strong>'
                        +'<br/>Group: <strong>'+ this.x+'</strong>'
                  +'<br/>Value: <strong>'+ Highcharts.numberFormat(this.y,0)+'</strong>';
          }
        }
      }
    }

检查下面的例子

Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
     tooltip: {
    	enabled: false,
      crosshairs: true
    },
      plotOptions: {
      series: {
      	dataLabels: {
        	enabled: true,
          inside: false,
          overflow: 'none',
          crop: true,
          shape: 'callout',
          backgroundColor:'rgba(255,255,255,0.8)',
          borderColor: 'rgba(0,0,255,0.8)',
          color: 'rgba(0,0,0,0.75)',
          borderWidth: .5,
          borderRadius: 5,
          y: -10,
          style: {
          	fontFamily: 'Helvetica, sans-serif',
          	fontSize: '10px',
            fontWeight: 'normal',
            textShadow: 'none'
          },
          formatter: function() {
          	return '<strong>'+this.series.name+'</strong>'
            			+'<br/>Group: <strong>'+ this.x+'</strong>'
                  +'<br/>Value: <strong>'+ Highcharts.numberFormat(this.y,0)+'</strong>';
          }
        }
      }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});

#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>