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

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的

配置方式都差不多，在其它属性中也可以通过同样的配置来获取不同的属性值。写这篇文章，一方面是怕自己忘了，另一方面也是

给像我一样的小白们提供参考，希望能够对他们有所帮助。

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

相关推荐