Highcharts传奇项目盘旋事件？

我有一个图表，我希望某些系列不可点击图例中的点击，但其他点击可点击。这很容易，因为有legendItemClick事件，我可以做任何事情，根据系列。一个例子是：http://jsfiddle.net/9PqyG/3/Highcharts传奇项目盘旋事件？

我的问题是，鼠标指针仍然从箭头改变为clickable-link-hand-pointer，我不希望任何人认为这是可点击的。我知道我可以更改itemHoverStyle参数来为所有图例项目显示箭头，但这会改变每个系列。我可以只为特定系列做到这一点吗？

来源

2012-07-30 newmanne

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

来源

2012-08-03 20:55:00 newmanne

感谢，认为工程 – newmanne 2012-08-09 21:33:59

我把它实际上与鼠标悬停事件模式，这是你如何能做到这一点，请在您的图表功能，插入此代码：

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

然后你就可以做一个模态分度打开像下面这一个

<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

来源

2017-07-30 23:26:53

Highcharts传奇项目盘旋事件？

回答

相关问题