Highcharts + Plotband工具提示懸停+默認樣式

我試圖找到最簡單的方法來將鼠標懸停在情節帶上時顯示工具提示。事件部分是好的，我可以訪問鼠標懸停，但我需要找到一種方式來顯示與Highcharts默認外觀相同樣式的工具提示。Highcharts + Plotband工具提示懸停+默認樣式

這是quick example。我需要文本「顯示在懸停在工具提示」顯示爲一個工具提示樣式相同作爲基於鼠標座標Highcharts默認的地方？我看過docs，找不到任何幫助。

任何想法？

在此先感謝。

2012-09-16 Colin

下面是我在JSFiddle中整理的一個解決方案，雖然這有點破解。

下面的行添加到鼠標懸停事件：

chart.tooltip.refresh(chart.series[1].points[2]);

這將顯示工具提示中隱藏的串聯的適當放置的點。

自定義工具提示格式化程序然後返回所需的文本。

來源

2012-09-17 00:35:31

感謝爲此！甚至沒有想到這樣做！ – Colin

@Colin請將此答案標記爲已接受，如果它解決了您的問題。 – zykadelic

我做了另一個基於格雷格回答，但劇情改爲變種，因爲那是我所需要的。我想它也可以很容易地轉換爲劇情片。

此變體也適用於事件，但會顯示另一個div，而不是依賴特定的隱藏序列。

該示例可在JSFiddle找到。

所以工具提示在同一容器中加入作爲圖表

<div id="tooltip" class="thetooltip"> 
    <p id="tooltiptext" style="margin:0">default</p> 
</div>

和當在情節主線的事件被觸發，其具有附接的工具提示

var $tooltip = $('#tooltip'); 
$tooltip.hide(); 
var $text = $('#tooltiptext'); 
displayTooltip = function (text, left) { 
    $text.text(text); 
    $tooltip.show(); 
    $tooltip.css('left', parseInt(left)+24 + 'px'); 
}; 
var timer; 
hideTooltip = function (e) { 
    clearTimeout(timer); 
    timer = setTimeout(function() { 
     $tooltip.fadeOut(); 
    }, 5000); 
};

沿着顯示工具提示的用戶將鼠標

然後使用附加選項，tooltipText和用於顯示上面的div的事件來定義每個plotline。

plotLines: [{ 
    tooltipText: 'hello', 
    value: Date.UTC(2011, 2, 28, 0, 1, 1), 
    color: '#ff6666', 
    dashStyle: 'solid', 
    width: 3, 
    events: { 
     mouseover: function (e) { 
      displayTooltip(this.options.tooltipText, this.svgElem.d.split(' ')[1]); 
     }, 
     mouseout: hideTooltip 
    } 
}

所述的ToolTipText不是highcharts API的一部分，但定義，當它是通過在元件上的選項屬性可用。

.thetooltip { 
    border: 1px solid #2f7ed8; 
    background-color: #fff; 
    opacity: 0.8500000000000001; 
    padding: 4px 12px; 
    border-radius: 3px; 
    position: absolute; 
    top:100px; 
    box-shadow: 1px 1px 3px #666; 
}

來源

2014-01-22 08:13:16 Patrick

感謝您的好榜樣！ –

另一種解決方案將是使用plotBands /情節主線的「標籤」屬性中包含「useHTML：

工具提示的CSS可以簡單地通過mimicing的CSS被定義類似於默認一個由highcharts ：true「標誌和CSS懸停。

xAxis: { 
//...code  
    plotLines: [{ 
     //...code 
     dashStyle: 'Dash', 
     color: '#000000', 
     width: 2, 
     label: { 
      text: `<div class="plotline"> 
        <div id="custom-tooltip" class="thetooltip"> 
         My custom tooltip! 
        </div> 
       </div>`, 
      useHTML: true, 
     } 
    }] 
}

修改CSS將是：

.thetooltip { 
    display: none; //the main change 
    border: 1px solid #2f7ed8; 
    background-color: #fff; 
    opacity: 0.8500000000000001; 
    padding: 4px 12px; 
    border-radius: 3px; 
    position: absolute; 
    top:100px; 
    box-shadow: 1px 1px 3px #666; 
}

當然在情節主線類：

.plotline { 
    &:hover { 
     .thetooltip { 
      display: block; 
     } 
    } 
}

在我看來，這是一個更強大的解決方案 - 首先，它是一個CSS解決方案，而不是JS，從UX/UI的角度來看，它比奇怪的JS更流暢（只是試圖設置超時權利！）

來源

2017-08-16 09:41:27

Highcharts + Plotband工具提示懸停+默認樣式

回答

相關問題