Highcharts工具提示不顯示相應的文本值，而是顯示'undefined'

Question

我有一個文本值列表及其相應的分數值（值X和值y）。我能夠在值x和值y的交點處繪製一個點。懸停在圓點上顯示x，y座標上點的位置值，但顯示未顯示的相應文本值。

<script> 

    var array = @Html.Raw(Json.Encode(ViewBag.Items3DList)); 
    var practicalityscore = []; 
    for(var i in array){ 
     var serie = new Array(array[i].YAxis, array[i].AvgIPA, array[i].Title); 
     practicalityscore.push(serie); 
    } 

    $(function() { 

     var chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'practicalityscore', 
       zoomType: 'xy', 
       defaultSeriesType:'scatter', 
       borderWidth:1, 
       borderColor:'#fff', 
       marginLeft:50, 
       marginRight:50, 
       backgroundColor:'#fff', 
       plotBackgroundColor:'#fff', 

      }, 
      credits:{enabled:false}, 
      title:{ 
       text:'Most Practical Ideas', 
       align: 'left', 

      }, 
      legend:{ 
       enabled:false 
      }, 
      tooltip:{ 
       crosshairs: [{ 
        enabled:true, 
        width:1, 
        color:'rgba(238,46,47,.25)' 
       },{ 
        enabled:true, 
        width:1, 
        color:'rgba(238,46,47,.25)' 
       }], 

       formatter: function(){ 
        return '<span><b>Practicality</b>: '+ Highcharts.numberFormat(this.x,0) + '<br/><span><b>Avg IPA</b>: '+ Highcharts.numberFormat(this.y,0) + '<br/><span><b>Idea</b>: '+ this.point.name; 
       } 
      }, 
      plotOptions: { 
       series: { 
        color:'#0093dd', 
        marker: { 
         fillOpacity:1, 
         radius:7, 
         lineWidth:.5, 
         lineColor:'#fff', 
        }, 

       } 
      }, 
      xAxis:{ 
       title:{ 
        text:'Practicality Score' 
       }, 
       min:0, 
       max:10, 
       tickInterval:1, 
       tickLength:0, 
       minorTickLength:0, 
       gridLineWidth:0, 
       showLastLabel:true, 
       showFirstLabel:false, 
       lineColor:'#fff', 
       lineWidth:0 
      }, 
      yAxis:{ 
       title:{ 
        text:'AvgIPA', 
        rotation:-90, 
        margin:10, 
       }, 
       min:0, 
       max:10, 
       tickInterval:1, 
       tickLength:0, 
       minorTickLength:0, 
       lineColor:'#fff', 
       lineWidth:0 
      }, 
      series: [{ 
       color:'rgba(238,46,47,.5)', 
       data: practicalityscore, 

      }] 
     }, function(chart) { // on complete 

      var width = chart.plotBox.width/2.0; 
      var height = chart.plotBox.height/2.0 + 1; 

      chart.renderer.rect(chart.plotBox.x, 
           chart.plotBox.y, width, height, 1) 
       .attr({ 
        fill: '#fff', 
        'stroke-width': 4, 
        stroke: '#fff', 
        zIndex: 1 
       }) 
       .add(); 

      chart.renderer.rect(chart.plotBox.x + width, 
            chart.plotBox.y, width, height, 1) 
        .attr({ 
         fill: '#fff', 
         'stroke-width': 4, 
         stroke: '#fff', 
         zIndex: 1 
        }) 
        .add(); 

      chart.renderer.rect(chart.plotBox.x, 
            chart.plotBox.y + height, width, height, 1) 
        .attr({ 
         fill: '#fff', 
         'stroke-width': 4, 
         stroke: '#fff', 
         zIndex: 1 
        }) 
        .add(); 

      chart.renderer.rect(chart.plotBox.x + width, 
            chart.plotBox.y + height, width, height, 1) 
        .attr({ 
         fill: '#fff', 
         'stroke-width': 4, 
         stroke: '#fff', 
         zIndex: 1 
        }) 
        .add(); 

     }); 
    }); 
</script> 

這是我從我的服務器端代碼收到的數組對象的json表示形式。

array[1] 
object{ 
AvgIPA:7, IdeaId:17989, Likes:3, Status:2, StatusString:"Published", Title:"Spread the word", UserFullName:"Anurag Acharya", XAxis:9, YAxis:5, ZAxis:7} 

現在我只發送相關數據到我的系列從實用性分數組。這是數據的表示。

practicalityscore [1] 
[5, 7, "Spread the word"] 

下面是瀏覽器如何顯示在圖表上

而不是不確定的數據，「將消息傳播出去」的截圖應該得到顯示。

Answer 1

您可以嘗試修改格式如下，改變this.point.name到this.point.series.name

function(){ 
    return '<span><b>Practicality</b>: '+ 
     Highcharts.numberFormat(this.x,0) + 
     '<br/><span><b>Avg IPA</b>: '+ 
     Highcharts.numberFormat(this.y,0) + 
     '<br/><span><b>Idea</b>: '+ this.point.series.name; 
} 

不知道如果我理解正確的目標，希望這有助於

我試圖創建一個類似的jsfiddle示範基地在我的理解

http://jsfiddle.net/unshz5uu/

Answer 2

您需要更換您的點的Wi陣列第二個對象。它應該是{x：5，y：7，名稱：「傳播單詞」}。然後在格式化程序中參考this.point.options.name