Question

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

e.g。

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]
},
...

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

月份组的索引（例如Jan == 0，Feb == 1或类似的东西）
整个组的x，y和高度，宽度坐标。

问题是plotOptions.column.events.mouseOver中的“this”包含如此庞大的数据量，我无法确定信息存在于海量数据结构中的哪个位置。此外，似乎mouseOver事件与被鼠标悬停的单个列绑定，而不是与组本身绑定。

有什么想法吗？（先谢谢！）

本

Answer 1

所以我花了一些时间研究这个问题，而你是对的，传递给event方法的mouseOver对象并没有那么有用。我尝试找到对当前突出显示的列的引用，但无济于事。但是，我发现了一种替代方法，依赖于图表的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);
});

Answer 2

在用于point的mouseover事件中，您可以访问有关列的所有参数。

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

Highcharts：在鼠标悬停时查找列组信息

2 个答案: