Question

我有一个从PHP中提取的捐赠者列表，然后我动态地为每个捐赠者分配一个ID，即

<div class="rankings-column first">
    <h3 class="ranking vgood">Very good</h3>
    <span id="1" class="0">
        <a href="http://ati.publishwhatyoufund.org/donor/usmcc/" title="U.S., MCC">1. U.S., MCC</a>
    </span>
    <span id="2" class="0">
        <a href="http://ati.publishwhatyoufund.org/donor/gavi/" title="GAVI">2. GAVI</a>
    </span> 
    <span id="3" class="0">
        <a href="http://ati.publishwhatyoufund.org/donor/ukdfid/" title="UK, DFID">3. UK, DFID</a>
    </span>
    <span id="4" class="0">
        <a href="http://ati.publishwhatyoufund.org/donor/undp/" title="UNDP">4. UNDP</a>
    </span>    
</div>

现在我有一张Highcharts气泡图。 bubble（point）id等于span id。我的泡泡样式没有填充和白色边框。

当我悬停跨度时，我希望气泡的边框变为虚线。我怎么做？如果不可能，我想改变颜色或线宽。

由于

Answer 1

首先，Highcharts并没有提供一种简单的方法来设置＆＃34;破折号风格＆＃34;在标记边框上（它适用于行但不适用于标记）。如果您真的有心，那么您需要编写自定义标记。

其次，如果你想在<span>悬停事件中以某种其他方式（如填充或边框颜色）update标记，我会这样做：

这样的跨度：

<span id="0" class="aSpan">Span 0</span>
<span id="1" class="aSpan">Span 1</span>
<span id="2" class="aSpan">Span 2</span>
<span id="3" class="aSpan">Span 3</span>

Highcharts数据如下：

data: [{x: Math.random() * 100, y: Math.random() * 100, z: Math.random() * 100, id: 0},
       {x: Math.random() * 100, y: Math.random() * 100, z: Math.random() * 100, id: 1},                  
       {x: Math.random() * 100, y: Math.random() * 100, z: Math.random() * 100, id: 2},
       {x: Math.random() * 100, y: Math.random() * 100, z: Math.random() * 100, id: 3}]

然后悬停事件，如：

$('.aSpan').hover(function(){
    var myId = parseInt($(this).attr('id'));
    var series = Highcharts.charts[0].series[0];
     $.each(series.points, function(_,point){
        if (point.id === myId){
            point.update({marker: {fillColor: 'red'}});
        }
    });
 });

这里是example。

将鼠标悬停在其他onpage元素上时更改点样式

1 个答案: