highcharts - Highcharts传奇项目悬停事件？

Question

我有一个图表，我希望某些系列在图例中不可点击，但其他系列可点击。这很容易，因为有一个 legendItemClick 事件，我无法根据系列进行任何操作。一个例子在这里：http: //jsfiddle.net/9PqyG/3/

我的问题是鼠标指针仍然从箭头变为可点击链接手指针，我不希望任何人认为这是可点击的。我知道我可以更改 itemHoverStyle 参数以使箭头出现在所有图例项中，但这会为每个系列更改它。我可以仅针对特定系列进行此操作吗？

Answer 1

我会使用 CSS 选择器： .highcharts-legend-item:first-child:hover { cursor:crosshair; }

Answer 2

我实际上是用带有鼠标悬停事件的模态来实现的，这就是你可以做到这一点的方法，请在你的图表函数中插入这个代码：

$('#chart_container').on('mouseenter','.highcharts-legend-item',function(event) {
    var seriesName = $(this).text();
    if (seriesName === "this_series_name") {
        $('#myModal').modal('toggle');
    }
});

然后你可以制作一个模态 div 来打开悬停事件，如下面的这个

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h4 class="modal-title" id="myModalLabel">Note</h4>
            </div>
            <div class="modal-body">

                <div class="row">
                    <div class="col-md-12">
                        your message here
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Ok
                </button>
            </div>
        </div>
    </div>
</div>

这是一个演示