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>

这是demo

Highcharts传奇项目悬停事件？

2 个答案: