Question

TL;易患DR？

要触发列的单击事件，必须单击列。当柱子具有很少或没有可辨别的高度时，这很难做到。如何使列上方/下方的区域（在未堆叠的柱形图中）将鼠标光标更改为指针，然后单击鼠标点击该点的事件？

关注更多？

我有一个未堆叠的柱形图，其中存在很大的差异。这导致一些列非常小，对用户来说基本上是不可见的。

当尝试在小列上触发点击事件时，这证明是有问题的，因为我可以告诉单击触发点击事件的唯一方法是它是否在列本身内。我将点击事件连接为

plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            alert('Category: ' + this.category + ', value: ' + this.y);
                        }
                    }
                }
            }
        }

以下JSFiddle是此问题的一个示例（The Dec point）。

如果列已堆叠，并且知道解决方法是指定minimum point length，我理解此限制。但是我希望，当列没有堆叠时，有一种方法可以在列的x轴边界内沿着图表垂直方向点击任何区域来触发click事件。

下图中的黄色区域是我试图点击以点击“12月”的点数事件。柱。

鼠标悬停在此区域应该将指针更改为光标，单击鼠标时，应触发相应列的单击事件。

Answer 1

JSFiddle

方法：连接鼠标移动并点击图表容器上的事件。

在mousemove事件中，根据事件偏移坐标和图表+点绘图的组合获取匹配点。将鼠标光标更改为光标并将状态更改为悬停（适当时）。

$('#container').on('mousemove', function(event) {
    var chart = $('#container').highcharts();
    if (chart.series.length === 1) {
        $('#container').css('cursor', 'default');
        for (var seriesIdx = 0; seriesIdx < chart.series.length; seriesIdx++) {
             var series = chart.series[seriesIdx];
            for (var pointIdx = 0; pointIdx < series.data.length; pointIdx++) {
                var point = series.data[pointIdx];
                var height = chart.plotTop + point.plotY;
                var min = chart.plotLeft + point.plotX - (point.pointWidth / 2);
                var max = chart.plotLeft + point.plotX + (point.pointWidth / 2);
                var isWithin = event.offsetX >= min && event.offsetX <= max;
                if (isWithin && event.offsetY < height) {
                    $('#container').css('cursor', 'pointer');
                    point.setState('hover');
                    point.hasExtendedHover = true;
                } else {
                    if (point.hasExtendedHover) {
                        point.setState();
                        point.hasExtendedHover = false;
                    }
                }
            }
        }
    }
});

类似于click事件，但在找到的点上突破，因为你没有光标，其他点需要点状态清理。

$('#container').on('click', function(event) {
    var chart = $('#container').highcharts();
    var found = false;
    for (var seriesIdx = 0; seriesIdx < chart.series.length; seriesIdx++) {
         var series = chart.series[seriesIdx];
        for (var pointIdx = 0; pointIdx < series.data.length; pointIdx++) {
            var point = series.data[pointIdx];
            var min = chart.plotLeft + point.plotX - (point.pointWidth / 2);
            var max = chart.plotLeft + point.plotX + (point.pointWidth / 2);
            if (event.offsetX > min && event.offsetX < max) {
                point.firePointEvent('click');
                found = true;
                break;
            }
        }
        if (found) {
            break;   
        }
    }
});

<强>的问题：

我似乎无法让这个用于多个系列使用类别。 plotX的plotX和plotY值似乎意味着什么不同于有一个系列时。
容器上的mousemove事件没有总是火，特别是在多个系列。我的假设是存在的阻止此事件在图表中传播的东西它没有冒泡到容器里。这是零星的，很难知道确定发生了什么。
如果你将鼠标悬停在一列以上，那么进入该列，悬停状态消失，令人烦恼的小嘀嗒声仍然在20多种刮擦方式后痒痒。 IE10 +没有这个问题（对于IE来说是什么？！+）

如何点击小栏上/下的区域，在未堆叠的柱形图中，点击点击事件

1 个答案: