Highcharts工具提示不显示相应的文本值，而是显示“未定义”

Question

I have a list of text values with their corresponding score values (value X and value y). I am able to plot a dot at the intersection of value x and value y. Hovering over the dot displays the location value of the dot on x,y coordinates but for the corresponding text value it is displaying unidentified.

<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>

Here is the json representation of my array object which i received from my server side code.

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}

Now i send only the relevant data to my series from practicalityscore array. Here is the representation of that data.

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

Here is the screenshot of how browser is displaying the data on chart

Instead of undefined, "Spread the word" should get displayed.

Answer 1

You may try to modify your formatter as following , change this.point.name to 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;
}

Not sure if I understand your objective correctly, hope this help

I tried to create a similar jsfiddle example base on my understand

http://jsfiddle.net/unshz5uu/

Answer 2

You need to replace your array for point with object. It should be {x: 5, y:7, name: "Spread the word"}. Then in formatter refer to this.point.options.name