Highcharts曲線圖 - 突出顯示點懸停上的xAxis標籤

面對突出顯示折線圖中標籤的問題。Highcharts曲線圖 - 突出顯示點懸停上的xAxis標籤

我在這裏找到一個類似的主題Bold X-Axis Label on Point Hover in Highcharts Column Chart，但它不適合（在這種情況下沒有找到關於xAxis [0] .labelGroup的任何信息）。也有一個在文檔

沒有信息，我需要什麼：點上懸停效果的X軸

選中的標籤，並應突出最接近的一個。軸的類型是日期時間，間隔爲6小時

我的例子： https://jsfiddle.net/sjapdya6/

我試圖使用：

mouseOver: function() { 
    $($('.customLabel')[this.x]).addClass('customLabelSelected'); 
}

添加這些類：

<style> 
    .customLabel { 
    color: #00FF00; 
    background-color: rgba(10, 10, 90, 0.8); 
    } 
    .customLabelSelected { 
    color: #FF0000; 
    } 
</style>

但它不能正常工作。有誰知道如何做到這一點？

預先

來源

2016-11-19 Anton Plotnikov

軸非常感謝保持對象稱爲蜱和該對象內的蜱通過其在軸線值來標識。刻度對象的部分是您想要設計的標籤。

因此，您需要找到徘徊點的「足夠接近」刻度。點與滴答的值並不完全相同，所以您需要定義滿足您的距離。

function findTick(x, ticks, range) { 
    for (var tickValue in ticks) { 
    if (Math.abs(x - tickValue) <= range) { 
     return ticks[tickValue]; 
    } 
    } 
}

活動的，將採取適當的行動要點：如果你想使用CSS樣式

events: { 
     mouseOver: function(e) { 
     var tick = findTick(this.x, this.series.xAxis.ticks, 300000); 
     this.selectedTick = tick; 

     if (tick) { 
      tick.label.css({ 
      color:'#FF0000' 
      }); 
     } 
     }, 
     mouseOut: function(e) { 
     if (this.selectedTick) { 
      this.selectedTick.label.css({ 
      color: '#565f76' 
      }); 
      this.selectedTick = null; 
     } 
     } 
    }

最後一件事，那麼你必須支持HTML標籤。

labels: { 
    useHTML: true,

否則，您將對svg元素進行操作，該元素的style屬性與html元素的樣式不同。

示例：https://jsfiddle.net/sjapdya6/1/

來源

2016-11-19 20:17:52 morganfree

非常感謝！它完美地解決了我的問題。這有點奇怪，在文檔中沒有關於它的信息 –

Highcharts曲線圖 - 突出顯示點懸停上的xAxis標籤

回答

相關問題