HighCharts 如何获取mouseOver时的值并赋值给自己创建的表格中

今天在学习用风玫瑰图展示风速风向数据时，当鼠标移动到某一个数据上时，在自己创建的表中显示出相关的数据。

先上代码：

var chart= {            chart: {                polar:true,         //使用极地图                type: 'column',     //类型是柱状图            },            title: {                text: title,                x: -20 //center            },            pane: {                size: '85%'            },            legend: {                layout: 'vertical',                align: 'right',                verticalAlign: 'middle',                borderWidth: 0            },            xAxis: {                tickmarkPlacement: 'on',//本参数只对分类轴有效。 当值为 on 时刻度线将在分类上方显示；当值为 between 时，刻度线将在两个分类中间显示。                                        // 当 tickInterval 为 1 时，默认是 between，其他情况默认是 on。 默认是：null.                categories: ['北', '北北东', '东北', '东北东', '东', '东南东', '东南', '南南东', '南', '南南西', '西南', '西南西', '西', '西北西', '西北', '北北西']            },            yAxis: {                min: 0,                endOnTick: false,                showLastLabel: true,                title: {                    text: '频率 (%)'                },                labels: {                    formatter: function () {                        return this.value + '%';                    }                },                reversedStacks: false            },            tooltip: {                shared: false,//当提示框被共享时，整个绘图区都将捕捉鼠标指针的移动。提示框文本显示有                              // 序数据（不包括饼图，散点图和标志图等）的系列类型将被显示在同一个提示框中。推荐在单一系列的图表和平板/手机优化的图表中使用。                useHTML: true, //是否使用HTML编辑提示信息                borderRadius: 20,                //backgroundColor: 'none',                //headerFormat: '<b>采集时间:{point.key}</b>',                pointFormat: '<table>' +                '<tr>' +                '<td style="color: {series.color}">{series.name}: </td>' +                '<td style="text-align: right"><b>{point.y}%</b></td>' +                '</tr>',                footerFormat: '</table>',                shadow: false            },            plotOptions: {                column:{                    point: {                        events: { //右边图表中动态显示的数据,尤其注意这里面是如何取值的,this表示的是point对象，

                                     //也就是你点击的那条数据封装成的对象；

                                     
                                     //this.x为该点的X坐标值，然后通过chart的Xaxis属性获取到风的方向
                                     //this.y为该点的y坐标值，也就是series中的值，即百分率；
                                     //this.series.name表示的该点的series的name属性是什么，即风速的等级
                                    
{ //右边图表中动态显示的数据,尤其注意这里面是如何取值的                mouseOver: function () {                    var direction=graphChart.xAxis.categories[this.x];                    var grade = this.series.name;                    var dataPercent = this.y+"%";                    refreshGraphDataBox(direction, grade, dataPercent);                }            }        }    },    series: {        stacking: 'normal',        pointPlacement: 'on'    },
},

//将风玫瑰图展示出来
$('#datagraph').highcharts(graphChart);
//下面是展示右边图表的方法
function refreshGraphDataBox(itemName, maxValue, minValue) {    $('#direction').html(direction);    $('#grade').html(grade);    $('#dataPercent').html(dataPercent);}
//下面是html代码
<div class="box">    <div id="itemButtons" class="form-inline">    </div>    <div class="row-fluid" id="graph">        <div class="span9">            <div class="box" id="datagraph"></div>            <div id="tipNoData" class="hide" style="display: none;">            </div>        </div>        <div class="span3">            <div class="box" id="graphDataBox" style="">                <table id="warnTable" class="warnTable">                    <tbody>                    <tr class="heightTr">                        <th class="headTh">                            方&nbsp&nbsp&nbsp&nbsp向:                        </th>                        <th id="direction" class="Th">                        </th>                    </tr>                    <tr class="heightTr">                        <th class="headTh">                            等&nbsp&nbsp&nbsp&nbsp级:                        </th>                        <th id="grade" class="Th">                        </th>                    </tr>                    <tr class="heightTr">                        <th class="headTh">                            百分率:                        </th>                        <th id="dataPercent" class="Th">                        </th>                    </tr>                    </tbody>                </table>            </div>        </div>    </div></div><div class="row-fluid">    <div class="span12">        <div class="portlet box grey">            <div class="portlet-title">                <h4>                    <i class="icon-file-alt"></i>原始数据                </h4>                <div class="tools">                    <a class="collapse" href="javascript:;"></a>                </div>            </div>            <div class="portlet-body" style="display: block;">                <div id="show_table" style="margin-bottom: 40px;"></div>            </div>        </div>    </div></div>                                                                                                         
//下面是实际展示效果
   最开时配置时，一直找不到可供右边表格展示的数据，仔细研究了一下HighCharts的API文档后才搞明白。而且HighCharts的
配置方式都差不多，在其它属性中也可以通过同样的配置来获取不同的属性值。写这篇文章，一方面是怕自己忘了，另一方面也是
给像我一样的小白们提供参考，希望能够对他们有所帮助。