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