Highcharts - 如何更改顯示數據並刪除鼠標懸停？

Question

我在我的頁面上有一張Highcharts餅圖，工作正常。
我想要做的是刪除在餅圖的鼠標懸停上顯示的值，而是用dataLabels（？）靜態顯示值。

我不擅長JS，也不知道從哪裏開始。
請參閱下面的圖解說明。

$(function() { 
    $('#total').highcharts({ 
     credits: { 
     enabled: false 
     }, 
     data: { 
     table: document.getElementById('datatable_total'), 
     switchRowsAndColumns: true, 
     endRow: 1 
     }, 
     chart: { 
     type: 'pie' 
     }, 
     title: { 
     text: '' 
     }, 
     yAxis: { 
     allowDecimals: false, 
     title: { 
      text: 'Units' 
     } 
     }, 
     tooltip: { 
     formatter: function() { 
      return '<b>' + this.series.name + '</b><br/>' + 
      this.point.y + ' ' + this.point.name.toLowerCase(); 
     } 
     }, 
     navigation: { 
     buttonOptions: { 
      verticalAlign: 'bottom', 
      y: -20 
     } 
     } 
    }); 
    }); 

Answer 1

$(function() { 
 
    Highcharts.chart('container', { 
 
     chart: { 
 
      plotBackgroundColor: null, 
 
      plotBorderWidth: null, 
 
      plotShadow: false, 
 
      type: 'pie' 
 
     }, 
 
     title: { 
 
      text: '' 
 
     }, 
 
     tooltip: { 
 
      pointFormat: '{series.name}: {point.y}' 
 
     }, 
 
     plotOptions: { 
 
      pie: { 
 
       allowPointSelect: true, 
 
       cursor: 'pointer', 
 
       dataLabels: { 
 
        enabled: true, 
 
        format: '<b>{point.name}</b> <br>{point.y}</br>', 
 
        style: { 
 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
 
        } 
 
       } 
 
      } 
 
     }, 
 
     series: [{ 
 
      colorByPoint: true, 
 
      data: [{ 
 
       name: 'Europe', 
 
       y: 50 
 
      }, { 
 
       name: 'Africa', 
 
       y: 25 
 
      }, { 
 
       name: 'Australia', 
 
       y: 18 
 
      }, { 
 
       name: 'US', 
 
       y: 7 
 
      }] 
 
     }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>