如何移除Highcharts提示框（Tooltip）左上角的标记点？

我使用Highcharts绘制地图，希望移除提示框（Tooltip）左上角的小标记点，尝试添加Marker: false但未成功，以下是我的实现代码：

Highcharts.getJSON(
  'https://code.highcharts.com/mapdata/custom/world.topo.json',
  topology => {
 
    const chart = Highcharts.mapChart('container', {
      chart: {
        map: topology
      },
 
      title: {
        text: ''
      },
 
      legend: {
         enabled: false,
         align: 'center',
         verticalAlign: 'bottom',
         itemStyle: {
             fontWeight: 'bold',
             fontSize: '20px'
         }
     },
 
      mapNavigation: {
        enabled: true,
        enableDoubleClickZoomTo: true,
        buttonOptions: {
          align: 'right',
          verticalAlign: 'bottom'
        }
      },
 
      mapView: {
        maxZoom: 30,
        projection: {
          name: 'Orthographic',
          rotation: [60, -30]
        }
      },
 
      colorAxis: {
                         min: 0,
                         max: 100,
                         text: '',
                         stops: [[0, 'darkgrey', ''], [0, '#5ce1e6', '{{question['answer1']}}'], [0.49, '#c9f5f7', ''], [.50, '#aee0a0', ''], [.51, '#fff4c8', ''], [1, '#ffde59', '{{question['answer2']}}']],
                         title: {
                          text: '',
                          },
                     },
 
      credits: {
        enabled: false
      },
 
      tooltip: {
        useHTML: true,
        pointFormat: '{point.name} <br> <div style="display: inline-block;" class="square-answer1-globe"></div>{{question["answer1"]}}: {point.value1}% <br> <div style="display: inline-block;" class="square-answer2-globe"></div>{{question["answer2"]}}: {point.value2}%',
        backgroundColor: 'black',
        style: {
        color: 'white'
         },         
     },

      plotOptions: {
        series: {
          animation: {
            duration: 750
          },
          clip: false

        }
      },
 
      mapline: {
             color: Highcharts.getOptions().colors[0]
           },
      series: [{ 
           name: 'Graticule',
           id: 'graticule',
           type: 'mapline',
           data: getGraticule(),
           nullColor: 'lightgrey',
           color: 'lightgrey',
           accessibility: {
          enabled: false
        },
        enableMouseTracking: false
         },
        
      
      {
        data,
        joinBy: 'name',
        name: '',
        states: {
          hover: {
             color: '',
            borderColor: '#000000'
          }
        },
     
        accessibility: {
          exposeAsGroupOnly: true
        }
      }]
    });
}

解决方案 #

要移除Tooltip左上角的标记点，只需在Tooltip配置中添加headerFormat: ''即可。Highcharts默认的Tooltip头部会包含一个颜色圆点标记，设置空的headerFormat就能彻底去掉这个标记。

修改后的Tooltip配置代码如下：

tooltip: {
  useHTML: true,
  headerFormat: '', // 新增此行移除默认标记点
  pointFormat: '{point.name} <br> <div style="display: inline-block;" class="square-answer1-globe"></div>{{question["answer1"]}}: {point.value1}% <br> <div style="display: inline-block;" class="square-answer2-globe"></div>{{question["answer2"]}}: {point.value2}%',
  backgroundColor: 'black',
  style: {
    color: 'white'
  },         
},

你之前尝试的Marker: false写法不正确，该配置不属于Tooltip的直接属性，因此无法生效。

内容的提问来源于stack exchange，提问作者Gavan Sarrafian