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

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

您需要用对象替换点数组。它应该是 {x: 5, y:7, name: "Spread the word"}。然后在格式化程序中引用 this.point.options.name