在Highcharts上向Pie Tooltip添加其他數據

Question

我正試圖使用​​highcharts將其他數據添加到我的餅圖。 試圖解釋： 我的瀏覽器的餅圖：

• 火狐 - 10％
• 鉻 - 12％
• 資源管理器 - 65％
• 歌劇院 - 13％

我想添加更多信息以顯示在工具提示中： 例如：

• 火狐 - 10％其中女性用戶：5％
• 鉻 - 12％，其中的女人用戶：10％
• 瀏覽器 - 其中65％的女人用戶：30％
• 歌劇院 - 13％，其中女性用戶的：5％

我的推杆被髮明的價值觀，我想了解如何自定義工具提示，並添加一些更達ta系列。

我JsFiddle代碼

這是派我的JS代碼：

<script> 
    $(function() { 
     $('#container').highcharts({ 
      chart: { 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false, 
       type:'pie' 
      }, 

      title: { 
       text: 'Browsers' 
      }, 

      subtitle: { 
       text:false, 
      }, 

      tooltip: { 
       pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
      }, 

      plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: true, 
         format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
         style: { 
          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
         } 
        } 
       } 
      }, 

      series: [{ 
       name: "Total", 
       colorByPoint: true, 
       data: [{ 
        name: "Firefox", 
        y: 10, 
       }, { 
        name: "Chrome", 
        y: 12, 
       }, { 
        name: "Explorer", 
        y: 65, 
       }, { 
        name: "Opera", 
        y: 13, 
       }] 
      }], 

     }); 
    }); 
</script> 

這是理解我想要做什麼的圖像：

感謝

Answer 1

您可以將自定義數據串聯起來，然後在工具提示中使用

data: [{ 
      name: "Firefox", 
      y: 10, 
    custom:"5% " 
     }, { 
      name: "Chrome", 
      y: 12, 
    custom:"10% " 
     }, { 
      name: "Explorer", 
      y: 65, 
    custom:"15%" 
     }, { 
      name: "Opera", 
      y: 13, 
    custom:"25% " 
     }] 

在提示

tooltip: { 
     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b> <br>of which woman users {point.custom}' 
    } 

See updated fiddle here

Answer 2

使用您還可以使用tooltip.formatter和提取值從this.point.options.custom（其中自定義如果字段的名稱，比如在上面的例子中）

http://api.highcharts.com/highcharts#tooltip.formatter