Question

当图表宽度小于工具提示宽度时，工具提示会被切断。

所以，我已经改变了＆＃34;溢出＆＃34; ＆＃34; .highcharts-container＆＃34;的属性到＆＃34;可见＆＃34;并且它解决了除IE以外的所有浏览器中的问题（在某些情况下我看到了ScrollBars）。

问题是＆＃34;如何保持ToolTip正常呈现并支持IE？＆＃34;

Answer 1

问题是包含的html元素太小了，工具提示因为溢出而被切断：由highcharts定义的隐藏。

您可以添加以下CSS类：

  .highcharts-container {
    overflow: visible !important;
  }

  .highcharts-container svg {
    overflow: visible !important;
  }

你需要使用！important来覆盖由highcharts配置的样式。

Answer 2

默认情况下，highcharts将工具提示放在图表的SVG元素框中。而且，如果工具提示大于图表，则将不可见。

对于您而言，我认为您需要允许工具提示移到图表的SVG元素框之外。

有一个API选项：fun <T> LiveData<T>.getOrAwaitValue( time: Long = 2, timeUnit: TimeUnit = TimeUnit.SECONDS, afterObserve: () -> Unit = {} ): T { var data: T? = null val latch = CountDownLatch(1) val observer = object : Observer<T> { override fun onChanged(o: T?) { data = o latch.countDown() this@getOrAwaitValue.removeObserver(this) } } this.observeForever(observer) afterObserve.invoke() // Don't wait indefinitely if the LiveData is not set. if (!latch.await(time, timeUnit)) { this.removeObserver(observer) throw TimeoutException("LiveData value was never set.") } @Suppress("UNCHECKED_CAST") return data as T } class LiveDataValueCapture<T> { val lock = Any() private val _values = mutableListOf<T?>() val values: List<T?> get() = synchronized(lock) { _values.toList() // copy to avoid returning reference to mutable list } fun addValue(value: T?) = synchronized(lock) { _values += value } } inline fun <T> LiveData<T>.captureValues(block: LiveDataValueCapture<T>.() -> Unit) { val capture = LiveDataValueCapture<T>() val observer = Observer<T> { capture.addValue(it) } observeForever(observer) try { capture.block() } finally { removeObserver(observer) } }，默认情况下为tooltip.outside。您可以将其设置为undefined，然后工具提示将在图表的SVG元素外部呈现。

true

您可以在https://api.highcharts.com/highcharts/tooltip.outside上详细了解它。

Answer 3

为什么不定义工具提示的宽度，该宽度小于图表的宽度并将文本包装在其中：http://jsfiddle.net/4qLsw34t/

＆＃13;

}}

＆＃13;

或者，如果使用任何早期版本的highcharts，您可以使用formatter选项：http://jsfiddle.net/4qLsw34t/5/

＆＃13;

tooltip: {
            style: {
              width: "100px"
            }
  }

＆＃13;

Answer 4

将工具提示的z-index设置为1000，将HighCharts外部容器的z-index设置为较小的数字。

工具提示在Highcharts 3.X中被截断

4 个答案: