Question

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

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

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

我在JS-fiddle上举了一个例子来证明这个问题。

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

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

有什么建议吗？

Answer 1

如您所述，您需要禁用样条系列的moustracking事件。要在工具提示中检索所有系列，您可以使用以下代码：

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
    }

Highcharts - 当用（sp）线系列覆盖时，小柱无法点击

1 个答案: