Highcharts 工具提示裁剪

2024-05-07

我正在使用高图表,但遇到了较大的工具提示在 SVG 外部元素处被裁剪的问题,如下图所示。

选项useHTML工具提示和 xAxis 设置为 true,因为我正在应用一些自定义 CSS 这些元素。

有没有办法让工具提示不被裁剪?

我的 highcharts 代码如下所示:

        return {
        chart: {
            renderTo: this._chartContainer,
            type: 'columnrange',
            inverted: true
        },
        title: {
            text: this._getTitle(values)
        },
        xAxis: {
            categories: values.rows.labels[0],
            labels: {
                formatter: function() {
                    return '<span class="xAxisTruncate" title="' + this.value + '">'+ this.value +'</span>';
                },
                useHTML: true
            }
        },
        yAxis: {
            max: this._getMax(),
            min: this._getMin(),
            gridLineWidth: 2,
            opposite: true,
            tickInterval: 31 * 24 * 3600 * 1000,
            type: 'datetime',
            dateTimeLabelFormats: {
                month: '%b %y'
            },
            title: {
                text: yAxisTitleText
            },
            endOnTick: false,
            labels: {
                align: 'left'
            }
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                borderColor: 'transparent',
                borderRadius: 5,
                groupPadding: 0.05
            },
            columnrange: {
                dataLabels: {
                    enabled: true
                },
                animation: false,
                colorByPoint: false
            }
        },
        legend: {
            enabled: false
        },
        series: columnRangeSeries,
        tooltip: {
            enabled: true,
            useHTML: true,
            formatter: function(){
                return this.point.toolTip;
            }
        }
    };

提前致谢。


我很确定,堆栈上存在类似的主题,但我找不到它。一般来说,可以使用 HTML 工具提示来实现这一点,请参阅:http://jsfiddle.net/7wVDV/147/ http://jsfiddle.net/7wVDV/147/

CSS:

.highcharts-container {
  overflow: visible !important;
}
.MyChartTooltip {
  position: relative;
  z-index: 50;
  border: 2px solid rgb(0, 108, 169);
  border-radius: 5px;
  background-color: #ffffff;
  padding: 5px;
  font-size: 9pt;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Highcharts 工具提示裁剪 的相关文章

随机推荐

  • NLTK 中的 wordnet lemmatizer 不适用于副词 [重复]

    这个问题在这里已经有答案了 from nltk stem import WordNetLemmatizer x WordNetLemmatizer x lemmatize angrily pos r Out 41 angrily 这是 nl
  • 去掉尾随零和小数点

    使用 Lua 我将数字格式化为可变位数并去掉尾随零 小数点 例如 string format precision f value gsub 0 1 gsub 值的类型为数字 正数 负数 整数 小数 所以任务已经解决了 但出于美学 教育和性能
  • C# 访问冲突异常

    这是我的代码抛出异常 它今天随机开始 这是照片 这是整个页面代码和错误异常 public frmWFDocumentDetail InitializeComponent NavigationInTransition navigateInTr
  • 如何查找依赖于Python中特定模块的模块列表

    为了减少基于 Python 的 Web 应用程序的开发时间 我尝试对我最近修改的模块使用 reload reload 通过一个专用网页 Web 应用程序的开发版本的一部分 进行 该网页列出了最近修改的模块 并且 py 文件的修改时间戳晚于相
  • 如何在 Android Studio 中立即获取 LivaData 的值?

    savedRecordFileName是一个变量LivaData
  • 默认启动器图标大小应该是多少

    我参考了文档http developer android com guide practices ui guidelines icon design html icon sets http developer android com gui
  • 自定义 OpenLayers 控件

    如何轻松自定义 OpenLayers 地图控件 或者至少 如何最小化控件的高度 谢谢 附言 有 CSS 覆盖吗 您可以对任何 openLayers 控件进行子类化 我刚刚通过对 PanZoomBar panZoomBar js 进行子类化
  • 如何为多个 Android 商店支持我的 Android 应用程序?

    我最近开始在 Google Android Market 上销售我的 Android 应用程序 并实施他们的应用程序许可方案以防止未经授权使用我的应用程序 我现在正计划将其发布到 Amazon Android 应用商店 并且想知道维护我的应
  • C# 资源文件中的 Tab 键切换

    如何向字符串资源添加制表符 t text 不起作用 您必须显式添加制表符 最简单的方法可能是在记事本中键入字符串 显式设置制表符而不是使用转义字符 并将文本复制并粘贴到资源编辑器中 对于换行符 您也会遇到类似的问题 添加换行符的最简单方法是
  • 如何在ios中重置触摸、触摸移动的NSTimer

    我正在开发一个应用程序 其中我必须在 3 秒后隐藏控制按钮 所以我使用 NSTimer 编写代码 然后开始触摸 它可以工作 但问题是 当我再次触摸任何其他按钮时 我的计时器不会重置 即使我像拖动一样移动我的触摸示例 如果我拖动或移动触摸 它
  • 更改 RMarkdown 中的块背景颜色

    我希望某个代码块以不同的颜色 例如红色 突出显示 以表明这是不好的做法 如果我使用的是 Rnw 我可以添加块选项background red 并得到我想要的 但这似乎不起作用 Rmd 我的猜测是 我需要制作一个自定义 css 样式表 尽管我
  • 使用 javascript/jQuery 更改类的背景颜色属性

    这似乎是一个简单的问题 但没有任何解决办法 我正在尝试使用 javascript jQuery 动态更改某些文本的背景颜色 从白色或粉色到绿色 但由于某种原因它不起作用 文本使用名为 novice 的 CSS 类进行样式设置 这是CSS 这
  • 如何将 ng-repeat 与图像映射区域标签一起使用?

    我正在尝试使用 AngularJS 创建可点击的汽车配置文件 一旦我将区域标签属性移动到 auto parts json 并将它们与 ng repeat 中的适当属性绑定 那么它就无法工作 如何修复它 请在全页预览中测试元素 var app
  • 在设计电子邮件主题中添加动态价值

    好吧 我看过很多关于自定义设计电子邮件主题的讨论 但似乎没有一个能解决我想要的问题 目前我的确认电子邮件主题为 确认您的 Qitch com 帐户 我想自定义此电子邮件主题并在其中添加用户名的动态值 这样如果用户ALEX注册一个帐户 他应该
  • Opencv matchTemplate 和 np.where():仅保留唯一值

    继带有马里奥硬币的 opencv 教程 https opencv python tutroals readthedocs io en latest py tutorials py imgproc py template matching p
  • 配置Apache将SSL客户端证书发送到后端服务器

    我想配置 Apache 以便它接收客户端证书 并将其传递到另一台服务器 我在用着 Windows 上的 Apache 2 0 65 后端服务器是基于 apache 的解决方案 IBM HTTP Server 我尝试了这个配置
  • 使用 Bloomberg .Net API 的每小时数据

    我正在努力解决使用 Net API 3 0 从 Bloomberg 获取每小时开盘价 最高价 最低价和最后价格快照的逻辑 我已经用谷歌搜索了很多次 但没有运气 对此的任何帮助将不胜感激 我试图在 Bloomberg Net API C 中找
  • Google 测试中没有模拟的 EXPECT_CALL

    有没有办法通过 GoogleTest for c 测试函数调用而不创建模拟对象 例如我们有以下生产代码 if a method x 我想测试一下是否method在这种情况下将被调用a是真的并且a是假的 我想构建一个与 Google Test
  • 启动应用程序时,“npm start”和“node app.js”之间的区别?

    我已经使用命令安装了一个应用程序express new filename 我刚刚了解到您可以使用以下方式启动应用程序 npm start 到目前为止我已经使用过 node app js 启动我的服务器 有人知道两者有什么区别吗 谢谢 来自m
  • Highcharts 工具提示裁剪

    我正在使用高图表 但遇到了较大的工具提示在 SVG 外部元素处被裁剪的问题 如下图所示 选项useHTML工具提示和 xAxis 设置为 true 因为我正在应用一些自定义 CSS 这些元素 有没有办法让工具提示不被裁剪 我的 highch