Highchart：將自己的計算添加到工具提示

Question

我想向工具提示中的工具提示添加評分，該評分取決於工具提示中的{point.y}。這是我的轉換功能：

function getGrade(score) 
{ 
    if(score >= 5-4/6) 
     return 'A'; 
    if(score >= 5-4/6*2) 
     return 'B'; 
    if(score >= 5-4/6*3) 
     return 'C'; 
    if(score >= 5-4/6*4) 
     return 'D'; 
    if(score >= 5-4/6*5) 
     return 'E'; 
    if(score >= 5-4/6*6) 
     return 'F'; 
} 

這是我的highchart配置：

$(function() { 

    $('#container').highcharts({ 

     chart: { 
      polar: true, 
      type: 'line' 
     }, 

     title: { 
      text: 'Budget vs spending', 
      x: -80 
     }, 

     pane: { 
      size: '80%' 
     }, 

     xAxis: { 
      categories: ['Sales', 'Marketing', 'Development', 'Customer Support', 
        'Information Technology', 'Administration'], 
      tickmarkPlacement: 'on', 
      lineWidth: 0 
     }, 

     yAxis: { 
      gridLineInterpolation: 'polygon', 
      lineWidth: 0, 
      min: 0 
     }, 

     tooltip: { 
      shared: true, 
      pointFormat: '<span style="color:{series.color}">{series.name}: <b>' + getGrade('{point.y:,.0f}') + '</b> ({point.y:,.0f})<br/>' 
     }, 

     legend: { 
      align: 'right', 
      verticalAlign: 'top', 
      y: 70, 
      layout: 'vertical' 
     }, 

     series: [{ 
      name: 'Allocated Budget', 
      data: [1, 1, 2, 3, 4, 5], 
      pointPlacement: 'on' 
     }, { 
      name: 'Actual Spending', 
      data: [3, 4, 3, 2, 2, 2], 
      pointPlacement: 'on' 
     }] 

    }); 
}); 

在這裏，整個代碼http://jsfiddle.net/A2uvs/

有誰一個什麼問題？

在此先感謝！

Answer 1

我覺得最好使用tooltip：formatter，因爲你可以使用一個函數。看看this小提琴。 它可能沒有完全按照你想要的格式設置，但我相信我已經讓你獲得了大部分的方式，剩下的就是你想要的樣式，但功能在那裏。

function getGrade(score){ 
    if(score >= 5-4/6) 
     return 'A'; 
    if(score >= 5-4/6*2) 
     return 'B'; 
    if(score >= 5-4/6*3) 
     return 'C'; 
    if(score >= 5-4/6*4) 
     return 'D'; 
    if(score >= 5-4/6*5) 
     return 'E'; 
    if(score >= 5-4/6*6) 
     return 'F'; 
} 

$(function(){ 
    $('#container').highcharts({ 
     chart: { 
      polar: true, 
      type: 'line' 
     },  
     title: { 
      text: 'Budget vs spending', 
      x: -80 
     }, 
     pane: { 
      size: '80%' 
     }, 
     xAxis: { 
      categories: ['Sales', 'Marketing', 'Development', 'Customer Support', 'Information Technology', 'Administration'], 
      tickmarkPlacement: 'on', 
      lineWidth: 0 
     }, 
     yAxis: { 
      gridLineInterpolation: 'polygon', 
      lineWidth: 0, 
      min: 0 
     }, 
     tooltip: { 
      shared: true, 
      formatter: function() { 
       var s = '<b>'+ this.x +'</b>'; 

       $.each(this.points, function(i, point) { 
        var tempcolor = point.series.color; 
        s += '<br/>'+ '<span style="color:'+ tempcolor+'">'+point.series.name +': '+ getGrade(point.y) +'('+point.y+')'+ '</span>'; 
       }); 
       return s; 
      } 
     }, 
     legend: { 
      align: 'right', 
      verticalAlign: 'top', 
      y: 70, 
      layout: 'vertical' 
     }, 
     series: [{ 
      name: 'Allocated Budget', 
      data: [1, 1, 2, 3, 4, 5], 
      pointPlacement: 'on' 
     }, { 
      name: 'Actual Spending', 
      data: [3, 4, 3, 2, 2, 2], 
      pointPlacement: 'on' 
     }] 
    }); 
});