highcharts - 如何在 .highcharts() 函数中的任何位置访问 series.data？

Question

我计划在我的 x Axis 标签的鼠标悬停事件中将数据放在 y Axis 上，这样当用户将鼠标悬停在 x Axis 标签上时，它将在我的堆栈图中显示值的摘要文本.

问题是如何访问 x Axis 内的 y Axis 数据:{...} 代码

这是我的代码 http://jsfiddle.net/BkxhA/3/

       $(function () {

        var categoryImgs = {
            'AIA': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img>&nbsp;',
            'AMP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'AMP RPP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Asteron Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Fidelity Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;'
        };

        var totals = new Array();
        var stackTotals = new Array();
        var i = 5, j = 0;
        //totals = HighchartsAdapter
        function reverse() {
            totals.reverse();
        }

        $('#container').highcharts({
            chart: {
                type: 'column'
            },

            title: {
                text: 'Premium Summary'
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                },
                labels: {
                    formatter: function () {                            
                        return '$' + this.value;
                    }
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray',                                                        
                    },                                                
                    formatter: function () {
                        totals[i++] = this.total;                           
                        return '';
                    }, 

                }                    
            },  

            xAxis: {
                categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
                labels: {
                    x: 5,
                    useHTML: true,

                    formatter: function () {                           

                        var n = totals.shift();
                        return '<div class="stacktotal">$' + n +  '</div><div class="myToolTip" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>';

                    },
                    events: {
                        mouseover: function () {
                            $('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>This should be the series y-axis data (this.series.data...something)<p>');
                        },
                        mouseout: function () {
                            $('#hoverboard').html('');
                        }                            
                    },
                }                    
            },

            linkedTo: 0,
            categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],

            legend: {
                align: 'right',
                x: -70,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>' +
                        'Total: ' + this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            textShadow: '0 0 3px black, 0 0 3px black'
                        },
                        format: '${y}'
                    }
                }

            },

            series: [{
                name: 'Policy Fee',
                y:'$' + this.value,
                data: [200.12, 290, 45.78, 71, 120]                    
            }, {
                name: 'WOP',
                data: [150, 210.23, 150, 200, 100]
            }, {
                name: 'Income Protection',
                data: [89, 400, 258.13, 212, 152]
            }, {
                name: 'Life Cover',
                data: [150, 210.23, 150, 200, 100]
            } ]

        });           

    });

Answer 1

看起来插件有局限性 - 在事件回调中 this 指向 DOM 元素，而不是 Highcharts 中的某些内容。

为了实现您的需要，您可以为格式化程序中创建的 HTML 标记添加一些自定义属性，以及您需要的信息。例如传递索引:

                    formatter: function () {              
                        var axis = this.axis,
                            index = axis.categories.indexOf(this.value);

                        var n = totals.shift();
                        return '<div class="stacktotal" data-index="' + index + '">$' + n +  '</div><div class="myToolTip" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>';

                    },

然后您可以在事件中获取该值:

                        mouseover: function () {
                            var chart = $("#container").highcharts(),
                                index = $(this).find('.stacktotal').attr("data-index");

                            console.log('Index', index); //index is index of category
                            var point = chart.series[0].data[index];
                            console.log('Point', point); // point for specific category in first series


                            $('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>' + point.total + '<p>');
                        },

全部演示:http://jsfiddle.net/BkxhA/4/