javascript - Highcharts 不跟踪填充区域下的鼠标事件

标签 javascript api highcharts interaction

有什么方法可以保持与其他区域覆盖的标记的交互(当它们有填充颜色时)?

检查示例: http://jsfiddle.net/ozke/n4k57v5j/1/

$('#container').highcharts({
    chart: {
        type: 'area'
    },
    xAxis: {
        fill: '#F00',
        gridLineWidth: 1,
    },
    yAxis: {
        enabled: false,
        gridLineWidth: 0
    },
    series: [
        // Required JSON code?
        {
            data: [15,20,10,20,30]
        },{
            data: [10,15,20,15,20]
        },
    ]
});

当 x=2 时,蓝色区域中的标记/点无法到达/悬停/交互。

在 CSS 中,等效方法是在区域(而不是边框​​或标记)上使用 pointer-events:none;

这可能与 SVG 和/或事件传播有关。

最佳答案

经过一些研究,我发现 SVG 中有类似于 pointer-events: none; 的东西(由 Highcharts 使用)。有一些 SVG 除外的选项,但就我而言,我需要的是 pointer-events:visibleStroke;

解决方案是:

path { pointer-events: visibleStroke; }

关于javascript - Highcharts 不跟踪填充区域下的鼠标事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26279731/

相关文章:

javascript - Angular2 和社交共享爬虫

api - 如何使用 OpenStreetMap 进行地理编码和路由?

javascript - Highcharts.js 变量饼图无法沿百分比数据标签正确呈现数据

iOS - 如何缓存使用 Embedly API 派生的文章文本?

javascript - Highcharts - 如何在仪表图的两个刻度盘之间显示箭头?

javascript - 性能问题 highchart 图和 socket.io

javascript - 在 ng-click 之后调用的 ng-submit 操作

javascript - 如何在 jquery 中使用 css 方法设置位置?

javascript - 如何使用 Javascript 创建 WebRTC + PubNub 开源视频聊天、语音聊天

c# - RestSharp BitStamp 身份验证失败