Highcharts:将鼠标悬停在列组信息上

Highcharts: locating column group information on mouseover

本文关键字：信息 悬停 鼠标 Highcharts      更新时间：2023-09-26

我正在做一个相当复杂的Highcharts实现，并且遇到了一个障碍。我使用的是分组柱状图，其序列数据结构非常像这样:
http://jsfiddle.net/gh/get/jquery/1.7.2/hililide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/

。

series: [{
    name: 'Tokyo',
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0]
}, {
    name: 'New York',
    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5]
},
...

当用户将鼠标放在特定月份的任何列上时，我将尝试捕获以下内容:

  1. 月份组的索引(例如Jan == 0, Feb == 1或诸如此类)
  2. 整个组的x、y和高度、宽度坐标。

问题是plotopoptions .column.events. mouseover中的"this"包含了如此巨大的数据量，我一直无法确定信息存在于大量数据结构中的位置。而且，mouseOver事件似乎与被鼠标悬停的单个列相关联，而不是与组本身相关联。

任何想法?(提前感谢!)

    本

所以我花了一点时间研究这个，你是对的，传递给mouseOver方法的event对象并不是那么有用。我试图找到当前突出显示的专栏的引用，但无济于事。但是，我发现了另一种方法，即依赖于图表的DOM结构。这意味着如果他们在未来的版本中改变图表布局，它可能会中断，但现在应该可以工作。

图表的基本结构是这样的:

<g class="highcharts-series-group">
   <g class="highcharts-series">
      <rect x="11" y="223" width="5" height="55" />
      <rect x="61" y="199" width="5" height="79" />
      <rect x="111" y="160" width="5" height="118" />
      <rect x="161" y="135" width="5" height="143" />
      <rect x="211" y="118" width="5" height="160" />
      <rect x="261" y="83" width="5" height="195" />
      <!-- More <rect/>'s -->
   </g>
   <g class="highcharts-series">
      <rect x="19" y="185" width="5" height="93" />
      <rect x="69" y="191" width="5" height="87" />
      <rect x="119" y="169" width="5" height="109" />
      <rect x="169" y="175" width="5" height="103" />
      <rect x="219" y="161" width="5" height="117" />
      <rect x="269" y="184" width="5" height="94" />
      <!-- More <rect/>'s -->
   </g>
   <!-- More <g class="highcharts-series"/>'s -->
</g>

这些直接对应于在图表创建中传递的系列信息，我相信您指的是x, y, width和height属性。我们可以使用这个结构来使用一些老式的事件处理来检索您正在查找的信息。

// Loop over each series element and bind a 
// 'mouseover' event to it.
$('.highcharts-series rect').on('mouseover', function() {
    var self = $(this);
    // Determine the offset (equal to the number of 'rect'
    // objects before it)
    var xIndex = self.prevAll('rect').length;
    var groupInfo = [];
    // Retrieve the '.highcharts-series-group' node
    // NOTE: $(this).parents('.highcharts-series-group')
    // does not appear to work (perhaps a limitation with 
    // jQuery and SVG?)
    $(this.parentNode.parentNode)
        // Loop over all series nodes within the current chart
        .find('.highcharts-series')
        .each(function(){
            // Retrieve the matching entry within each series
            // (represented by the nth 'rect' node)
            var element = $(this).find('rect:eq(' + xIndex + ')');
            if (!element.length) {
                return;
            }
            // Populate the Group Info element
            groupInfo.push({
                x: element.attr('x'),
                y: element.attr('y'),
                width: element.attr('width'),
                height: element.attr('height')
            });
        });
    // Do what you want with the groupInfo object and xIndex here:
    console.log(xIndex, groupInfo);
});

在鼠标悬停点通道中，您可以访问关于列的所有参数。

http://jsfiddle.net/amKuZ/

 mouseOver: function() {
                    $report.html('coordinate: x: ' +this.plotX+'coordinate y: ' +this.plotY+'column width' + this.pointWidth + ' x value:'+this.x);
                }

http://api.highcharts.com/highcharts plotOptions.column.point.events.mouseOver

相关文章：