Highcharts - 用（sp）line系列覆盖时无法点击的小列答案

【问题标题】：Highcharts - Small column not clickable when covered with a (sp)line serieHighcharts - 用（sp）line系列覆盖时无法点击的小列
【发布时间】：2014-09-19 08:02:12
【问题描述】：

我们正在使用 Highcharts 以 column 系列结合一些 spline 系列显示数据。所有列都是可点击的（执行向下钻取），但有些列变得不可点击，因为它们有点小并且完全被样条系列的鼠标跟踪层覆盖。

可以通过在样条系列中禁用鼠标跟踪来部分解决，但是工具提示不适用于该系列，我们需要它。

我们需要的是该列应该是可以通过样条系列的鼠标跟踪层点击。

我在JS-fiddle 上放了一个例子来演示这个问题。

events: {
    click: function () 
       {
           alert('I\'m Jane');
       }
}

在这个例子中，所有的 'Jane' 列都是可点击的，除了第二个（橙色），因为它太小并且被样条系列的不可见 mouseTracking 层覆盖

有什么建议吗？

【问题讨论】：

标签： highcharts

【解决方案1】：

正如您所提到的，您需要禁用样条系列的鼠标跟踪事件。要检索工具提示中的所有系列，您可以使用以下代码：

tooltip: {
        useHTML: true,
        formatter: function () {
            var s = '';
            s += '<table style="border-style: hidden;border-collapse: collapse;">';

            //get the chart object
            var chart = this.points[0].series.chart;

            //get the categories array
            var categories = chart.xAxis[0].categories; 
            var index = 0;

            //compute the index of corr y value in each data arrays  
            while (this.x !== categories[index]) { index++; }

            //loop through series array
            $.each(chart.series, function (i, series) { 

                s += '<tr><td style="color:' + series.color + '">' + series.name + ':</td>';
                s += '<td style="text-align:right;color:' + series.color + '">';
                s += series.data[index].y.toFixed();
                s += '</td></tr>';
            });

            s += "</table>";
            return s;
        },
        shared: true
    }

【讨论】：