2

我正在研究一个相当复杂的 Highcharts 实现并且遇到了障碍。我正在使用分组柱形图，其系列数据结构非常像这样：http:
//jsfiddle.net/gh/get/jquery/1.7.2/highslide-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 和 height,width 坐标。

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

任何的想法？（提前致谢！）

  • 本
4

2 回答 2

3

所以我花了一些时间研究这个，你是对的，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);
});
于 2013-04-04T00:54:34.217 回答
1

在 mouseover venet for point 中，您可以访问有关列的所有参数。

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

于 2013-04-04T12:42:39.810 回答